a. Take a positive integer value from the respondent as below fig. and Display Star Diamond.
b. Validate above form field
c. ON VALIDATION DISPLAY PROPER USER FRIENDLY MESSAGE TO USER.
d. Try to design a good looking html page with proper alignment..
e. You are only allowed to use HTML for design the page and JavaScript for scripting logic.
 <html> | |
| <head> | |
| <script type="text/javascript"> | |
| function display(){ | |
| var reg=/^[0-9]$/; | |
| var content = document.getElementById("top").innerHTML; | |
| var divText="<br><fieldset style='background-color:green;color: #123abc;width: 400px;'><legend>"+"Star Diamond"+"</legend><fieldset style='background-color:yellow;color: #123546;width: 75px;'>"; | |
| var input=document.getElementById("tex").value*1; | |
| var space=input-2; | |
| var line=(input+1)/2; | |
| ; | |
| if(input==""){ | |
| alert("Please enter Number"); | |
| return false; | |
| } | |
| if((input%2)==0) | |
| { | |
| alert("Please enter Number"); | |
| return false; | |
| } | |
| for(var i=0; i<line;i++) | |
| { | |
| for (var c = 1 ; c < space; c++ ) | |
| divText=divText+" "; | |
| space--; | |
| for (var d = 1 ; d <=2*i+1 ; d++ ) | |
| divText=divText+"*"; | |
| divText=divText+"<br>"; | |
| } | |
| var down=(input-1)/2; | |
| var spa=1; | |
| for(var r=down; r>0; r--) | |
| { | |
| for(var sp=spa; sp>=1; sp--) | |
| divText=divText+" "; | |
| spa++; | |
| for(var m=1; m<=2*r-1; m++) | |
| divText=divText+"*"; | |
| divText=divText+"<br>"; | |
| } | |
| divText=divText+"</fieldset>"; | |
| content=content+divText; | |
| document.getElementById("top").innerHTML=content; | |
| return true; | |
| } | |
| </script> | |
| </head> | |
| <body><center><form id="1"> | |
| <div id="top"> | |
| <fieldset style="background-color:orange;color: #123abc; width: 400px;"> | |
| <legend style="background-color:green;color: #ff0000; font-family: verdana; font-size: 14pt;">DISPLAY</legend> | |
| <div>Enter Number you want:<input type="text" id="tex" value=""><input type="button" id="dis" value="Display" onclick="return display()"></div> | |
| </fieldset> | |
| </div> | |
| </form></center> | |
| </body> | |
| </html> |
Thursday, December 26, 2013
Display Stars using javascript
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment