Tried to add Wordle to my page

Author: BeaEllieFionaMichelle

2024/BeaBergst/index.html

@@ -22,13 +22,21 @@ <h2>Hi </h2>
       <img src="/2024/BeaBergst/IMG_5308.jpg"/>
       <p></p>
     </section>
-  </main>
-
+  </main> 
+  <div id="wordle">
+  <h1>Wordle Game</h1>
+  <div id="game-container">
+      <div id="board"></div>
+      <input type="text" id="guess-input" maxlength="5" placeholder="Enter a 5-letter word" />
+      <button id="submit-button">Submit</button>
+      <div id="message"></div>
+  </div>
+</div>
+  
   <footer>
     <!-- Your footer content goes here -->
     <p>&copy; 2024 Bea All rights reserved.</p>
   </footer>
+  <script src="/2024/BeaBergst/script.js"></script>
 </body>
 </html>
-
-}

2024/BeaBergst/script.js

@@ -0,0 +1,60 @@
+const wordList = ['apple', 'grape', 'mango', 'berry', 'peach', 'lemon', 'cherry', 'melon', 'plum', 'pear'];
+const word = wordList[Math.floor(Math.random() * wordList.length)];
+const maxAttempts = 6;
+let attempts = 0;
+
+function createBoard() {
+    const board = document.getElementById('board');
+    for (let i = 0; i < maxAttempts; i++) {
+        const row = document.createElement('div');
+        row.className = 'row';
+        for (let j = 0; j < 5; j++) {
+            const cell = document.createElement('div');
+            cell.className = 'cell';
+            row.appendChild(cell);
+        }
+        board.appendChild(row);
+    }
+}
+
+function makeGuess() {
+    const guessInput = document.getElementById('guessInput');
+    const guess = guessInput.value.toLowerCase();
+    guessInput.value = '';
+
+    if (guess.length !== 5) {
+        document.getElementById('message').textContent = 'Please enter a 5-letter word.';
+        return;
+    }
+
+    if (attempts >= maxAttempts) {
+        document.getElementById('message').textContent = `Sorry, you've run out of attempts. The word was: ${word}`;
+        return;
+    }
+
+    const row = document.querySelectorAll('.row')[attempts];
+    const cells = row.querySelectorAll('.cell');
+
+    for (let i = 0; i < 5; i++) {
+        cells[i].textContent = guess[i];
+        if (guess[i] === word[i]) {
+            cells[i].classList.add('correct');
+        } else if (word.includes(guess[i])) {
+            cells[i].classList.add('present');
+        } else {
+            cells[i].classList.add('absent');
+        }
+    }
+
+    if (guess === word) {
+        document.getElementById('message').textContent = 'Congratulations! You guessed the word correctly!';
+        return;
+    }
+
+    attempts++;
+    if (attempts === maxAttempts) {
+        document.getElementById('message').textContent = `Sorry, you've run out of attempts. The word was: ${word}`;
+    }
+}
+
+createBoard();

2024/BeaBergst/styles.css

@@ -28,4 +28,31 @@ body, h1, h2, p, ul, li {
     padding: 20px;
     text-align: center;
   }
-  
+  #wordle {
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+}
+
+#game-container {
+    text-align: center;
+}
+
+#board {
+    display: grid;
+    grid-template-columns: repeat(5, 40px);
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.cell {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #ccc;
+   
+}