API tools faq
paste
Advertisement
lovelymondayss

timedoor intermediate pertemuan 4

lovelymondayss
Sep 16th, 2022
1,124
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Number Guessing Game</title>
  8.   </head>
  9.   <style>
  10.     html {
  11.       font-family: "Comic Sans MS", "Comic Sans", cursive;
  12.     }
  13.     h1 {
  14.       background-color: #17a589;
  15.       color: #fff;
  16.       text-align: center;
  17.       width: 750px;
  18.     }
  19.     p {
  20.       font-size: 18px;
  21.       text-align: center;
  22.     }
  23.     body {
  24.       width: 100%;
  25.       max-width: 750px;
  26.       min-width: 480px;
  27.       margin: 0 auto;
  28.     }
  29.  
  30.     #wrapper {
  31.       box-sizing: border-box;
  32.       text-align: center;
  33.       width: 750px;
  34.       height: 400px;
  35.       background-color: #17a589;
  36.       color: #fff;
  37.       font-size: 25px;
  38.     }
  39.  
  40.     #submitguess {
  41.       background-color: yellow;
  42.       color: black;
  43.       width: 200px;
  44.       height: 50px;
  45.       border-radius: 25px;
  46.       font-size: 30px;
  47.       border-style: none;
  48.       margin-top: 50px;
  49.       /* margin-left: 75px; */
  50.     }
  51.  
  52.     #guessField {
  53.       color: #000;
  54.       width: 550px;
  55.       height: 100px;
  56.       font-size: 30px;
  57.       border-style: none;
  58.       margin-top: 25px;
  59.       font-size: 45px;
  60.       /* margin-left: 50px; */
  61.       border: 5px solid #14727d;
  62.       text-align: center;
  63.     }
  64.  
  65.     #guess {
  66.       font-size: 55px;
  67.       /* margin-left: 90px; */
  68.       margin-top: 120px;
  69.       color: #fff;
  70.     }
  71.  
  72.     .resultCheck {
  73.       color: yellow;
  74.       padding: 7px;
  75.       font-size: 24px;
  76.     }
  77.   </style>
  78.   <body>
  79.     <h1>Guess The Number</h1>
  80.     <p>
  81.       We have selected a random number between 1 - 10. See if you can guess it.
  82.     </p>
  83.     <div id="wrapper">
  84.       <div class="form">
  85.         <label for="guessField" id="guesses">Enter a guess: </label>
  86.         <input type="number" id="guessField" class="guessField" />
  87.         <input
  88.          type="submit"
  89.          value="Submit guess"
  90.          class="guessSubmit"
  91.          id="submitguess"
  92.        />
  93.       </div>
  94.       <div class="resultParas">
  95.         <p>Guesses Remaining: <span class="lastResult">10</span></p>
  96.         <p>Result : <span class="resultCheck"></span></p>
  97.       </div>
  98.     </div>
  99.   </body>
  100.   <script type="text/javascript">
  101.     const numberInputed = document.querySelector("#guessField");
  102.     const guessSlot = document.querySelector(".lastResult");
  103.     const resultCheck = document.querySelector(".resultCheck");
  104.     const p = document.createElement("p");
  105.     //1. Set Variable
  106.     //write the code here
  107.     var randomNumber = parseInt(Math.random() * 10 + 1);
  108.     var guessCount = 5;
  109.  
  110.     document.getElementById("submitguess").onclick = function () {
  111.       // 2. Event when Guess Submited
  112.       //write the code here
  113.       var guess = numberInputed.value;
  114.       validateGuess(guess);
  115.     };
  116.  
  117.     function validateGuess(guess) {
  118.       //3. Function to validate the guess
  119.       //write the code here
  120.       if (guess < 1) {
  121.        alert("Please enter a number greater than 0!");
  122.      } else if (guess > 10) {
  123.         alert("Please enter a number less than 11!");
  124.       } else if (guessCount === 0) {
  125.         displayMessage("Game Over!!!");
  126.         endGame();
  127.       } else {
  128.         checkGuess(guess);
  129.       }
  130.     }
  131.  
  132.     function checkGuess(guess) {
  133.       //4. Function to check the Guess
  134.       //write the code here
  135.       if (guess == randomNumber) {
  136.         displayMessage("CONGRATULATIONS!!! You Guessed it right");
  137.         endGame();
  138.       } else if (guess > randomNumber) {
  139.         guessCount--;
  140.         displayMessage("Oops! Try a smaller number!");
  141.       } else if (guess < randomNumber) {
  142.        guessCount--;
  143.        displayMessage("Oops! Try a greater number!");
  144.      }
  145.    }
  146.  
  147.    function endGame() {
  148.      //5. Function to end the Game
  149.      //write the code here
  150.      numberInputed.value = " "; //empty input form
  151.      //disable button
  152.      document.getElementById("submitguess").setAttribute("disabled", "");
  153.    }
  154.  
  155.    function displayMessage(message) {
  156.      resultCheck.innerHTML = `<b>${message}</b>`;
  157.       guessSlot.innerHTML = `${guessCount}  `;
  158.     }
  159.   </script>
  160. </html>
  161.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!