Spaces:

liewchooichin
/

homepage

Running

App Files Files Community

liewchooichin commited on Jun 5

Commit

80d53d3

•

1 Parent(s): 3705ef3

number games

Browse files

Files changed (3) hide show

number-game/index.html +40 -0
number-game/script.js +99 -0
number-game/style.css +46 -0

number-game/index.html ADDED Viewed

	@@ -0,0 +1,40 @@

+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width,
+                    initial-scale=1">
+    <title>Number guessing game</title>
+    <link href="favicon.svg"
+          rel="icon"
+          type="image/x-icon">
+    <link href="style.css"
+          rel="stylesheet"
+          type="text/css">
+    <script src="script.js" defer> </script>
+  </head>
+  <body>
+<header>
+    <h1>Easy number guessing game</h1>
+</header>
+<main>
+    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>
+    <div class="form">
+      <label for="guessField">Enter a guess: </label>
+      <input type="number" min="1" max="100" required id="guessField" class="guessField">
+      <input type="submit" value="Submit guess" class="guessSubmit">
+    </div>
+    <div class="resultParas">
+      <p class="guesses"></p>
+      <p class="lastResult"></p>
+      <p class="lowOrHi"></p>
+      <p class="message"></p>
+    </div>
+</main>
+</body>
+</html>

number-game/script.js ADDED Viewed

	@@ -0,0 +1,99 @@

+/* Number guessing game */
+/* First lesson in javascript with MDN */
+/* https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash */
+let randomNumber = Math.floor(Math.random() * 100) + 1;
+/* Setup the constant field of HTML elements */
+const guesses = document.querySelector(".guesses");
+const lastResult = document.querySelector(".lastResult");
+const lowOrHi = document.querySelector(".lowOrHi");
+const message = document.querySelector(".message");
+/* Input and button */
+const guessSubmit = document.querySelector(".guessSubmit");
+const guessField = document.querySelector(".guessField");
+let guessCount = 1;
+let resetButton;
+/* Check the guesses */
+function checkGuess() {
+  // The main part of the guessing game
+  const userGuess = Number(guessField.value);
+  // Check the input
+  // If the number is not within 1 and 100 (inclusive).
+  if (userGuess<1 || userGuess>100) {
+    message.textContent = `You have entered ${userGuess}. Enter a number between 1 and 100 (inclusive).`
+  }
+  else {
+    message.textContent = "";
+  }
+  // Write the previous guesses into the paragraph.
+  if (guessCount === 1) {
+    guesses.textContent = "Previous guesses: ";
+  }
+  // Append the current guesses.
+  guesses.textContent = `${guesses.textContent} ${userGuess}`;
+  // Check if the guess is the correct number.
+  if (userGuess === randomNumber) {
+    lastResult.textContent = "Congratulations! You got it right!";
+    lastResult.style.backgroundColor = "green";
+    lowOrHi.textContent = "";
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = "!!!GAME OVER!!!";
+    lowOrHi.textContent = "";
+    setGameOver();
+  } else {
+    lastResult.textContent = "Guess again!";
+    lastResult.style.backgroundColor = "red";
+    if (userGuess < randomNumber) {
+      lowOrHi.textContent = "Last guess was too low!";
+    } else if (userGuess > randomNumber) {
+      lowOrHi.textContent = "Last guess was too high!";
+    }
+  }
+  guessCount++;
+  guessField.value = "";
+  guessField.focus();
+}
+// Check for event
+guessSubmit.addEventListener("click", checkGuess);
+// Add the start new game button
+function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement("button");
+  resetButton.textContent = "Start new game";
+  // Place the button at the message
+  message.textContent = "";
+  document.body.append(resetButton);
+  // Add event listener to the start new game button
+  resetButton.addEventListener("click", resetGame);
+}
+// Reset the game
+function resetGame() {
+  guessCount = 1;
+  const resetParas = document.querySelectorAll(".resultParas p");
+  for (const resetPara of resetParas) {
+    resetPara.textContent = "";
+  }
+  resetButton.parentNode.removeChild(resetButton);
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = "";
+  guessField.focus();
+  lastResult.style.backgroundColor = "white";
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}

number-game/style.css ADDED Viewed

	@@ -0,0 +1,46 @@

+/* Stylesheet */
+html {
+    font-family: Verdana, sans-serif;
+    font-size: medium;
+}
+/* Mobile first design */
+body {
+    width: 95%;
+    max-width: 800px;
+    min-width: 300px;
+    margin: 0 auto;
+}
+.form input[type="number"] {
+    width: 200px;
+}
+.lastResult {
+    color: white;
+    padding: 3px;
+}
+/* Make the header h1 small for mobile screen */
+header h1 {
+    font-size: medium;
+}
+/* Add a line above the footer */
+#myicon {
+    float: left;
+    object-fit: cover;
+    margin-right: 0.1em;
+}
+footer {
+    font-size: 0.9em;
+    border-top: 1px solid lightgrey;
+}
+/* For larger screen */
+@media (min-width: 600px) {
+    body {
+        width: 50%;
+    }
+  /* Make the header larger for wider screen */
+  header h1 {
+    font-size: 1.2em;
+  }
+}