Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
12e936c
·
verified ·
1 Parent(s): 1a3ec04

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +51 -7
index.html CHANGED
@@ -3,19 +3,63 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Guess the Number Game</title>
7
  <link rel="stylesheet" href="styles.css">
8
  </head>
9
  <body>
10
  <div class="game-container">
11
- <h1>Guess the Number Game</h1>
12
- <p>Try to guess the number between 1 and 100!</p>
13
- <input type="number" id="guess" placeholder="Enter a number">
14
- <button id="submit">Submit Guess</button>
 
 
 
 
15
  <p id="result"></p>
16
- <p id="attempts"></p>
17
  </div>
 
 
 
 
18
 
19
- <script src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  </body>
21
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Guess the Color Game</title>
7
  <link rel="stylesheet" href="styles.css">
8
  </head>
9
  <body>
10
  <div class="game-container">
11
+ <h1>Guess the Color Game</h1>
12
+ <p>Try to guess the background color!</p>
13
+ <div class="color-options">
14
+ <div class="color-box" id="color1"></div>
15
+ <div class="color-box" id="color2"></div>
16
+ <div class="color-box" id="color3"></div>
17
+ <div class="color-box" id="color4"></div>
18
+ </div>
19
  <p id="result"></p>
20
+ <button onclick="resetGame()">Play Again</button>
21
  </div>
22
+
23
+ <script>
24
+ const colors = ["red", "blue", "green", "yellow"];
25
+ let selectedColor;
26
 
27
+ function randomizeColors() {
28
+ selectedColor = colors[Math.floor(Math.random() * colors.length)];
29
+ document.body.style.backgroundColor = selectedColor;
30
+
31
+ // Randomize the color options
32
+ const shuffledColors = [...colors].sort(() => Math.random() - 0.5);
33
+ document.getElementById("color1").style.backgroundColor = shuffledColors[0];
34
+ document.getElementById("color2").style.backgroundColor = shuffledColors[1];
35
+ document.getElementById("color3").style.backgroundColor = shuffledColors[2];
36
+ document.getElementById("color4").style.backgroundColor = shuffledColors[3];
37
+ }
38
+
39
+ function checkGuess(selected) {
40
+ const result = document.getElementById("result");
41
+ if (selected === selectedColor) {
42
+ result.textContent = "Correct! You guessed the color!";
43
+ result.style.color = "green";
44
+ } else {
45
+ result.textContent = "Wrong guess! Try again.";
46
+ result.style.color = "red";
47
+ }
48
+ }
49
+
50
+ function resetGame() {
51
+ document.getElementById("result").textContent = "";
52
+ randomizeColors();
53
+ }
54
+
55
+ // Event listeners for color options
56
+ document.getElementById("color1").onclick = () => checkGuess(document.getElementById("color1").style.backgroundColor);
57
+ document.getElementById("color2").onclick = () => checkGuess(document.getElementById("color2").style.backgroundColor);
58
+ document.getElementById("color3").onclick = () => checkGuess(document.getElementById("color3").style.backgroundColor);
59
+ document.getElementById("color4").onclick = () => checkGuess(document.getElementById("color4").style.backgroundColor);
60
+
61
+ // Start game
62
+ randomizeColors();
63
+ </script>
64
  </body>
65
  </html>