HOW TO MAKE A HIGH OR LOW NUMBER GAME USING HTML, JAVASCRIPT, AND CSS
Code: _______________________________________________________________ <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>High or Low - 0 to 99</title> </head> <body> <style> #frame001 { background-color: lightblue; width: 400px; height: 400px; border: 2px solid black; border-radius: 4px; } #font001 { text-align: center; font-size: large; color: black; } </style> <div id="frame001"> <div id="font001"> <h2>High or Low - 0 to 99</h2> <text>Attempts: </text><text id="score001">0</text> <hr /> <p id="message001"></p> <p id="message002"></p> <p id="message003"></p> <div id="disappear001"> <p>Click on Begin to begin the game.</p> <button onclick="begin001()">Begin</button> </div> </div> </div> <script> var a; var count001 = 0; count001++; var numbers001 = Math.floor(Math.random() * 100); function begin001() { disappear001.innerHTML = ""; message001.innerHTML = "Choose a number from 0 to 99."; message003.innerHTML = "<input type=text id=input001 maxlength=2 size=1 /><br /><br /><button onclick=submit001()>Submit</button>"; } function submit001() { score001.innerHTML = count001++; var a = input001.value; if (a == numbers001) { message001.innerHTML = "Congratulations. You have guessed the right number."; message003.innerHTML = "<button onclick=repeat001()>Repeat</button>"; } if (a > numbers001) { message001.innerHTML = "Your number is high. Try again."; message003.innerHTML = "<input type=text id=input001 maxlength=2 size=1 /><br /><br /><button onclick=submit001()>Submit</button>"; } if (a < numbers001) { message001.innerHTML = "Your number is low. Try again."; message003.innerHTML = "<input type=text id=input001 maxlength=2 size=1 /><br /><br /><button onclick=submit001()>Submit</button>"; } } function repeat001() { location.reload(); } </script> </body> </html> Here is a video of the above code. |
OTHER RELATED PAGES: Learn how to make a quiz Learn how to make a random quiz Learn how to make an object move in a canvas Learn how to make find the differences game Learn how to create an input box using html and javascript Learn how to create a crossword puzzle using html, javascript and css |