HTML program for printing diamond pattern of alphabets validations using JavaScript, this program works on both ways by appending child and document.write method. For using this program with document.write method simply uncomment the commented part and comment the appendChild part and innerHTML part. This program checks the input is even number between 2 and 24 and then prints the diamond pattern of alphabets.
<html>
<head>
<style type="text/css">
.but {
border-radius: 20px;
width: 250px;
height: 40px;
font-weight: bolder;
font-size: 20px;
}
</style>
<script type="text/javascript" >
function makeDiamond() {
var n = document.getElementById("dia").value;
n = Number(n);
if ((n<25) && (n>1)) {
var t = n%2;
if (t==0) {
drawDiamond(n);
}
else {
alert("Only EVEN numbers between 2 and 24 are allowed");
}
}
else {
alert("Only EVEN numbers between 2 and 24 are allowed");
}
}
function drawDiamond(a) {
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var count= 0;
var pree = document.createElement("pre");
var divv = document.createElement("div");
var sp= document.getElementById("ad");
pree.setAttribute("id", "pr");
sp.appendChild(divv);
sp.appendChild(pree);
// document.getElementById("pr").innerHTML += ;
// document.write("<pre>");
for (var i= 1;i<=(a/2);i++) {
for (var s=(a/2); s>=i; s--) {
// document.write(" ");
document.getElementById("pr").innerHTML += " ";
}
for (var j= 1; j<(2*i); j++) {
// document.write(str.charAt(count));
document.getElementById("pr").innerHTML += str.charAt(count);
}
count++;
// document.write("\n");
document.getElementById("pr").innerHTML += "\n";
}
for (var p=1;p<=a+1;p++) {
// document.write(str.charAt(count));
document.getElementById("pr").innerHTML += str.charAt(count);
}
// document.write("<br>");
document.getElementById("pr").innerHTML += "\n";
var h=Number(1);
for (var d=1;d<=(a/2);d++) {
for (var e=1;e<=d;e++) {
// document.write(" ");
document.getElementById("pr").innerHTML += " ";
}
count--;
for (var f=(a-h);f>=1;f--) {
// document.write(str.charAt(count));
document.getElementById("pr").innerHTML += str.charAt(count);
}
h=h+2;
// document.write("\n");
document.getElementById("pr").innerHTML += "\n";
}
// document.write("</pre>");
}
function clearScreen() {
var sp= document.getElementById("ad");
var prr = document.getElementById("pr");
sp.removeChild(sp.childNodes[0]);
}
function numb(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if ((charCode > 47 && charCode < 58))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
</script>
</head>
<body>
<div>
<form id="formd" method="get" action="JavaScript:makeDiamond()">
<label for="dia">Diamond No.:</label>
<input type="text" id="dia" maxlength="2" onkeypress="return numb()" />
</form>
<button type="submit" class="but" form="formd" value="submit">Make Diamonds</button>
<button type="button" class="but" value="clear" onclick="return clearScreen()">Clear Screen</button>
</div>
<span id="ad"></span>
</body>
</html>
<html>
<head>
<style type="text/css">
.but {
border-radius: 20px;
width: 250px;
height: 40px;
font-weight: bolder;
font-size: 20px;
}
</style>
<script type="text/javascript" >
function makeDiamond() {
var n = document.getElementById("dia").value;
n = Number(n);
if ((n<25) && (n>1)) {
var t = n%2;
if (t==0) {
drawDiamond(n);
}
else {
alert("Only EVEN numbers between 2 and 24 are allowed");
}
}
else {
alert("Only EVEN numbers between 2 and 24 are allowed");
}
}
function drawDiamond(a) {
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var count= 0;
var pree = document.createElement("pre");
var divv = document.createElement("div");
var sp= document.getElementById("ad");
pree.setAttribute("id", "pr");
sp.appendChild(divv);
sp.appendChild(pree);
// document.getElementById("pr").innerHTML += ;
// document.write("<pre>");
for (var i= 1;i<=(a/2);i++) {
for (var s=(a/2); s>=i; s--) {
// document.write(" ");
document.getElementById("pr").innerHTML += " ";
}
for (var j= 1; j<(2*i); j++) {
// document.write(str.charAt(count));
document.getElementById("pr").innerHTML += str.charAt(count);
}
count++;
// document.write("\n");
document.getElementById("pr").innerHTML += "\n";
}
for (var p=1;p<=a+1;p++) {
// document.write(str.charAt(count));
document.getElementById("pr").innerHTML += str.charAt(count);
}
// document.write("<br>");
document.getElementById("pr").innerHTML += "\n";
var h=Number(1);
for (var d=1;d<=(a/2);d++) {
for (var e=1;e<=d;e++) {
// document.write(" ");
document.getElementById("pr").innerHTML += " ";
}
count--;
for (var f=(a-h);f>=1;f--) {
// document.write(str.charAt(count));
document.getElementById("pr").innerHTML += str.charAt(count);
}
h=h+2;
// document.write("\n");
document.getElementById("pr").innerHTML += "\n";
}
// document.write("</pre>");
}
function clearScreen() {
var sp= document.getElementById("ad");
var prr = document.getElementById("pr");
sp.removeChild(sp.childNodes[0]);
}
function numb(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if ((charCode > 47 && charCode < 58))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
</script>
</head>
<body>
<div>
<form id="formd" method="get" action="JavaScript:makeDiamond()">
<label for="dia">Diamond No.:</label>
<input type="text" id="dia" maxlength="2" onkeypress="return numb()" />
</form>
<button type="submit" class="but" form="formd" value="submit">Make Diamonds</button>
<button type="button" class="but" value="clear" onclick="return clearScreen()">Clear Screen</button>
</div>
<span id="ad"></span>
</body>
</html>
No comments:
Post a Comment