Hugging Face's logo

Spaces:
liewchooichin
/
homepage
Running

App Files Community
liewchooichin commited on
Commit
80d53d3
·
verified ·
1 Parent(s): 3705ef3

number games

Browse files
Files changed (3) hide show
  1. number-game/index.html +40 -0
  2. number-game/script.js +99 -0
  3. number-game/style.css +46 -0
number-game/index.html ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en-US">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport"
6
+ content="width=device-width,
7
+ initial-scale=1">
8
+ <title>Number guessing game</title>
9
+ <link href="favicon.svg"
10
+ rel="icon"
11
+ type="image/x-icon">
12
+ <link href="style.css"
13
+ rel="stylesheet"
14
+ type="text/css">
15
+ <script src="script.js" defer> </script>
16
+ </head>
17
+
18
+ <body>
19
+
20
+ <header>
21
+ <h1>Easy number guessing game</h1>
22
+ </header>
23
+ <main>
24
+ <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>
25
+
26
+ <div class="form">
27
+ <label for="guessField">Enter a guess: </label>
28
+ <input type="number" min="1" max="100" required id="guessField" class="guessField">
29
+ <input type="submit" value="Submit guess" class="guessSubmit">
30
+ </div>
31
+
32
+ <div class="resultParas">
33
+ <p class="guesses"></p>
34
+ <p class="lastResult"></p>
35
+ <p class="lowOrHi"></p>
36
+ <p class="message"></p>
37
+ </div>
38
+ </main>
39
+ </body>
40
+ </html>
number-game/script.js ADDED
@@ -0,0 +1,99 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Number guessing game */
2
+ /* First lesson in javascript with MDN */
3
+ /* https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash */
4
+
5
+ let randomNumber = Math.floor(Math.random() * 100) + 1;
6
+
7
+ /* Setup the constant field of HTML elements */
8
+ const guesses = document.querySelector(".guesses");
9
+ const lastResult = document.querySelector(".lastResult");
10
+ const lowOrHi = document.querySelector(".lowOrHi");
11
+ const message = document.querySelector(".message");
12
+ /* Input and button */
13
+ const guessSubmit = document.querySelector(".guessSubmit");
14
+ const guessField = document.querySelector(".guessField");
15
+
16
+ let guessCount = 1;
17
+ let resetButton;
18
+
19
+ /* Check the guesses */
20
+ function checkGuess() {
21
+ // The main part of the guessing game
22
+ const userGuess = Number(guessField.value);
23
+ // Check the input
24
+ // If the number is not within 1 and 100 (inclusive).
25
+ if (userGuess<1 || userGuess>100) {
26
+ message.textContent = `You have entered ${userGuess}. Enter a number between 1 and 100 (inclusive).`
27
+ }
28
+ else {
29
+ message.textContent = "";
30
+ }
31
+ // Write the previous guesses into the paragraph.
32
+ if (guessCount === 1) {
33
+ guesses.textContent = "Previous guesses: ";
34
+ }
35
+ // Append the current guesses.
36
+ guesses.textContent = `${guesses.textContent} ${userGuess}`;
37
+ // Check if the guess is the correct number.
38
+ if (userGuess === randomNumber) {
39
+ lastResult.textContent = "Congratulations! You got it right!";
40
+ lastResult.style.backgroundColor = "green";
41
+ lowOrHi.textContent = "";
42
+ setGameOver();
43
+ } else if (guessCount === 10) {
44
+ lastResult.textContent = "!!!GAME OVER!!!";
45
+ lowOrHi.textContent = "";
46
+ setGameOver();
47
+ } else {
48
+ lastResult.textContent = "Guess again!";
49
+ lastResult.style.backgroundColor = "red";
50
+ if (userGuess < randomNumber) {
51
+ lowOrHi.textContent = "Last guess was too low!";
52
+ } else if (userGuess > randomNumber) {
53
+ lowOrHi.textContent = "Last guess was too high!";
54
+ }
55
+ }
56
+
57
+ guessCount++;
58
+ guessField.value = "";
59
+ guessField.focus();
60
+ }
61
+
62
+ // Check for event
63
+ guessSubmit.addEventListener("click", checkGuess);
64
+
65
+ // Add the start new game button
66
+ function setGameOver() {
67
+ guessField.disabled = true;
68
+ guessSubmit.disabled = true;
69
+ resetButton = document.createElement("button");
70
+ resetButton.textContent = "Start new game";
71
+ // Place the button at the message
72
+ message.textContent = "";
73
+ document.body.append(resetButton);
74
+ // Add event listener to the start new game button
75
+ resetButton.addEventListener("click", resetGame);
76
+ }
77
+
78
+ // Reset the game
79
+ function resetGame() {
80
+ guessCount = 1;
81
+
82
+ const resetParas = document.querySelectorAll(".resultParas p");
83
+ for (const resetPara of resetParas) {
84
+ resetPara.textContent = "";
85
+ }
86
+
87
+ resetButton.parentNode.removeChild(resetButton);
88
+
89
+ guessField.disabled = false;
90
+ guessSubmit.disabled = false;
91
+ guessField.value = "";
92
+ guessField.focus();
93
+
94
+ lastResult.style.backgroundColor = "white";
95
+
96
+ randomNumber = Math.floor(Math.random() * 100) + 1;
97
+ }
98
+
99
+
number-game/style.css ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Stylesheet */
2
+
3
+ html {
4
+ font-family: Verdana, sans-serif;
5
+ font-size: medium;
6
+ }
7
+ /* Mobile first design */
8
+ body {
9
+ width: 95%;
10
+ max-width: 800px;
11
+ min-width: 300px;
12
+ margin: 0 auto;
13
+ }
14
+
15
+ .form input[type="number"] {
16
+ width: 200px;
17
+ }
18
+
19
+ .lastResult {
20
+ color: white;
21
+ padding: 3px;
22
+ }
23
+ /* Make the header h1 small for mobile screen */
24
+ header h1 {
25
+ font-size: medium;
26
+ }
27
+ /* Add a line above the footer */
28
+ #myicon {
29
+ float: left;
30
+ object-fit: cover;
31
+ margin-right: 0.1em;
32
+ }
33
+ footer {
34
+ font-size: 0.9em;
35
+ border-top: 1px solid lightgrey;
36
+ }
37
+ /* For larger screen */
38
+ @media (min-width: 600px) {
39
+ body {
40
+ width: 50%;
41
+ }
42
+ /* Make the header larger for wider screen */
43
+ header h1 {
44
+ font-size: 1.2em;
45
+ }
46
+ }