Implement a game rest functionality, so that the player can make a new guess! Here is how:
- Select the element with the βagainβ class and attach a click event handler
- In the handler function, restore initial values of the score and secretNumber variables
- Restore the initial conditions of the message, number, score and guess input field
- Also restore the original background color (#222) and number width (15rem)
Code:
HTML:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <title>Guess My Number!</title> </head> <body> <header> <h1>Guess My Number!</h1> <p class="between">(Between 1 and 20)</p> <button class="btn again">Again!</button> <div class="number">?</div> </header> <main> <section class="left"> <input type="number" class="guess" /> <button class="btn check">Check!</button> </section> <section class="right"> <p class="message">Start guessing...</p> <p class="label-score">π― Score: <span class="score">20</span></p> <p class="label-highscore"> π₯ Highscore: <span class="highscore">0</span> </p> </section> </main> <script src="script.js"></script> </body> </html>
CSS:
style.css
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); * { margin: 0; padding: 0; box-sizing: inherit; } html { font-size: 62.5%; box-sizing: border-box; } body { font-family: 'Press Start 2P', sans-serif; color: #eee; background-color: #222; /* background-color: #60b347; */ } /* LAYOUT */ header { position: relative; height: 35vh; border-bottom: 7px solid #eee; } main { height: 65vh; color: #eee; display: flex; align-items: center; justify-content: space-around; } .left { width: 52rem; display: flex; flex-direction: column; align-items: center; } .right { width: 52rem; font-size: 2rem; } /* ELEMENTS STYLE */ h1 { font-size: 4rem; text-align: center; position: absolute; width: 100%; top: 52%; left: 50%; transform: translate(-50%, -50%); } .number { background: #eee; color: #333; font-size: 6rem; width: 15rem; padding: 3rem 0rem; text-align: center; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); } .between { font-size: 1.4rem; position: absolute; top: 2rem; right: 2rem; } .again { position: absolute; top: 2rem; left: 2rem; } .guess { background: none; border: 4px solid #eee; font-family: inherit; color: inherit; font-size: 5rem; padding: 2.5rem; width: 25rem; text-align: center; display: block; margin-bottom: 3rem; } .btn { border: none; background-color: #eee; color: #222; font-size: 2rem; font-family: inherit; padding: 2rem 3rem; cursor: pointer; } .btn:hover { background-color: #ccc; } .message { margin-bottom: 8rem; height: 3rem; } .label-score { margin-bottom: 2rem; }
JavaScript:
script.js
'use strict'; let secretNumber = Math.trunc(Math.random() * 20) + 1; let score = 20; let highscore = 0; const displayMessage = function (message) { document.querySelector('.message').textContent = message; }; document.querySelector('.check').addEventListener('click', function () { const guess = Number(document.querySelector('.guess').value); console.log(guess, typeof guess); // When there is no input if (!guess) { displayMessage('βοΈ No number!'); // When player wins } else if (guess === secretNumber) { displayMessage('π Correct Number!'); document.querySelector('.number').textContent = secretNumber; document.querySelector('body').style.backgroundColor = '#60b347'; document.querySelector('.number').style.width = '30rem'; if (score > highscore) { highscore = score; document.querySelector('.highscore').textContent = highscore; } // When guess is wrong } else if (guess !== secretNumber) { if (score > 1) { displayMessage(guess > secretNumber ? 'π Too high!' : 'π Too low!'); score--; document.querySelector('.score').textContent = score; } else { displayMessage('π₯ You lost the game!'); document.querySelector('.score').textContent = 0; } } }); document.querySelector('.again').addEventListener('click', function () { score = 20; secretNumber = Math.trunc(Math.random() * 20) + 1; displayMessage('Start guessing...'); document.querySelector('.score').textContent = score; document.querySelector('.number').textContent = '?'; document.querySelector('.guess').value = ''; document.querySelector('body').style.backgroundColor = '#222'; document.querySelector('.number').style.width = '15rem'; });
Paste All three Files in the Same Folder, and Open the Index.html. You will see the Project.
(OR)
Single HTML File: (All 3 in Single File)
HTML:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Guess My Number!</title> <style> @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); * { margin: 0; padding: 0; box-sizing: inherit; } html { font-size: 62.5%; box-sizing: border-box; } body { font-family: 'Press Start 2P', sans-serif; color: #eee; background-color: #222; /* background-color: #60b347; */ } /* LAYOUT */ header { position: relative; height: 35vh; border-bottom: 7px solid #eee; } main { height: 65vh; color: #eee; display: flex; align-items: center; justify-content: space-around; } .left { width: 52rem; display: flex; flex-direction: column; align-items: center; } .right { width: 52rem; font-size: 2rem; } /* ELEMENTS STYLE */ h1 { font-size: 4rem; text-align: center; position: absolute; width: 100%; top: 52%; left: 50%; transform: translate(-50%, -50%); } .number { background: #eee; color: #333; font-size: 6rem; width: 15rem; padding: 3rem 0rem; text-align: center; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); } .between { font-size: 1.4rem; position: absolute; top: 2rem; right: 2rem; } .again { position: absolute; top: 2rem; left: 2rem; } .guess { background: none; border: 4px solid #eee; font-family: inherit; color: inherit; font-size: 5rem; padding: 2.5rem; width: 25rem; text-align: center; display: block; margin-bottom: 3rem; } .btn { border: none; background-color: #eee; color: #222; font-size: 2rem; font-family: inherit; padding: 2rem 3rem; cursor: pointer; } .btn:hover { background-color: #ccc; } .message { margin-bottom: 8rem; height: 3rem; } .label-score { margin-bottom: 2rem; } </style> </head> <body> <header> <h1>Guess My Number!</h1> <p class="between">(Between 1 and 20)</p> <button class="btn again">Again!</button> <div class="number">?</div> </header> <main> <section class="left"> <input type="number" class="guess" /> <button class="btn check">Check!</button> </section> <section class="right"> <p class="message">Start guessing...</p> <p class="label-score">π― Score: <span class="score">20</span></p> <p class="label-highscore"> π₯ Highscore: <span class="highscore">0</span> </p> </section> </main> <script> 'use strict'; let secretNumber = Math.trunc(Math.random() * 20) + 1; let score = 20; let highscore = 0; const displayMessage = function (message) { document.querySelector('.message').textContent = message; }; document.querySelector('.check').addEventListener('click', function () { const guess = Number(document.querySelector('.guess').value); console.log(guess, typeof guess); // When there is no input if (!guess) { displayMessage('βοΈ No number!'); // When player wins } else if (guess === secretNumber) { displayMessage('π Correct Number!'); document.querySelector('.number').textContent = secretNumber; document.querySelector('body').style.backgroundColor = '#60b347'; document.querySelector('.number').style.width = '30rem'; if (score > highscore) { highscore = score; document.querySelector('.highscore').textContent = highscore; } // When guess is wrong } else if (guess !== secretNumber) { if (score > 1) { displayMessage(guess > secretNumber ? 'π Too high!' : 'π Too low!'); score--; document.querySelector('.score').textContent = score; } else { displayMessage('π₯ You lost the game!'); document.querySelector('.score').textContent = 0; } } }); document.querySelector('.again').addEventListener('click', function () { score = 20; secretNumber = Math.trunc(Math.random() * 20) + 1; displayMessage('Start guessing...'); document.querySelector('.score').textContent = score; document.querySelector('.number').textContent = '?'; document.querySelector('.guess').value = ''; document.querySelector('body').style.backgroundColor = '#222'; document.querySelector('.number').style.width = '15rem'; }); </script> </body> </html>