new game Word Guessing Game #284 (#294)

* added word giessing game * style update
Spandan-Bhattacharya · Feb 21, 2024 · f076285 · f076285
1 parent 18e9923
commit f076285
Show file tree

Hide file tree

Showing 5 changed files with 427 additions and 0 deletions.
diff --git a/Word/index.html b/Word/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Coding By CodingNepal - youtube.com/codingnepal -->
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Word Guessing Game JavaScript | CodingNepal</title>
+    <link rel="stylesheet" href="style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <div class="wrapper">
+      <h1> <span style="margin-left: 60px;"></span>Guess the Word</h1>
+      <div class="content">
+        <input type="text" class="typing-input" maxlength="1">
+        <div class="inputs"></div>
+        <div class="details">
+          <p class="hint" style="color: red;">Hint: <span></span></p>
+          <p class="guess-left" style="font-weight: bold;">Remaining guesses: <span></span></p>
+          <p class="wrong-letter">Wrong letters: <span></span></p>
+        </div>
+        <button class="reset-btn">Reset Game</button>
+      </div>
+    </div>
+
+    <script src="word.js"></script>
+    <script src="script.js"></script>
+
+  </body>
+</html>
diff --git a/Word/script.js b/Word/script.js
@@ -0,0 +1,62 @@
+const inputs = document.querySelector(".inputs"),
+hintTag = document.querySelector(".hint span"),
+guessLeft = document.querySelector(".guess-left span"),
+wrongLetter = document.querySelector(".wrong-letter span"),
+resetBtn = document.querySelector(".reset-btn"),
+typingInput = document.querySelector(".typing-input");
+
+let word, maxGuesses, incorrectLetters = [], correctLetters = [];
+
+function randomWord() {
+    let ranItem = wordList[Math.floor(Math.random() * wordList.length)];
+    word = ranItem.word;
+    maxGuesses = word.length >= 5 ? 8 : 6;
+    correctLetters = []; incorrectLetters = [];
+    hintTag.innerText = ranItem.hint;
+    guessLeft.innerText = maxGuesses;
+    wrongLetter.innerText = incorrectLetters;
+
+    let html = "";
+    for (let i = 0; i < word.length; i++) {
+        html += `<input type="text" disabled>`;
+        inputs.innerHTML = html;
+    }
+}
+randomWord();
+
+function initGame(e) {
+    let key = e.target.value.toLowerCase();
+    if(key.match(/^[A-Za-z]+$/) && !incorrectLetters.includes(` ${key}`) && !correctLetters.includes(key)) {
+        if(word.includes(key)) {
+            for (let i = 0; i < word.length; i++) {
+                if(word[i] == key) {
+                    correctLetters += key;
+                    inputs.querySelectorAll("input")[i].value = key;
+                }
+            }
+        } else {
+            maxGuesses--;
+            incorrectLetters.push(` ${key}`);
+        }
+        guessLeft.innerText = maxGuesses;
+        wrongLetter.innerText = incorrectLetters;
+    }
+    typingInput.value = "";
+
+    setTimeout(() => {
+        if(correctLetters.length === word.length) {
+            alert(`Congrats! You found the word ${word.toUpperCase()}`);
+            return randomWord();
+        } else if(maxGuesses < 1) {
+            alert("Game over! You don't have remaining guesses");
+            for(let i = 0; i < word.length; i++) {
+                inputs.querySelectorAll("input")[i].value = word[i];
+            }
+        }
+    }, 100);
+}
+
+resetBtn.addEventListener("click", randomWord);
+typingInput.addEventListener("input", initGame);
+inputs.addEventListener("click", () => typingInput.focus());
+document.addEventListener("keydown", () => typingInput.focus());
diff --git a/Word/style.css b/Word/style.css
@@ -0,0 +1,126 @@
+/* Import Google font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+
+body {
+  display: flex;
+  padding: 20px;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(to right, #3498db, #2ecc36); /* Updated gradient background */
+}
+
+.wrapper {
+  width: 430px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+.wrapper h1 {
+  font-size: 30px;
+  font-weight: 600; /* Adjusted font weight */
+  padding: 20px 25px;
+  border-bottom: 1px solid #ccc;
+  color: #2ecc71; /* Updated font color */
+}
+
+.wrapper .content {
+  margin: 25px;
+}
+
+.content .inputs {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.inputs input {
+  height: 57px;
+  width: 56px;
+  margin: 4px;
+  font-size: 24px;
+  font-weight: 500;
+  color: #3498db; /* Updated font color */
+  text-align: center;
+  border-radius: 5px;
+  background: #fff; /* Updated background color */
+  border: 2px solid #3498db; /* Updated border color */
+  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
+}
+
+.inputs input:hover {
+  background: #3498db; /* Updated background color on hover */
+  color: #fff; /* Updated text color on hover */
+  border: 2px solid #fff; /* Updated border color on hover */
+}
+
+.typing-input {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.content .details {
+  margin: 20px 0 25px;
+}
+
+.details p {
+  font-size: 18px; /* Adjusted font size */
+  margin-bottom: 10px;
+}
+
+.content .reset-btn {
+  width: 100%;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  outline: none;
+  padding: 15px 0;
+  font-size: 17px;
+  border-radius: 5px;
+  background: #3498db; /* Updated background color */
+  transition: background 0.3s ease;
+}
+
+.content .reset-btn:hover {
+  background: #2ecc71; /* Updated background color on hover */
+}
+
+@media screen and (max-width: 460px) {
+  .wrapper {
+    width: 100%;
+  }
+
+  .wrapper h1 {
+    font-size: 22px;
+    padding: 16px 20px;
+  }
+
+  .wrapper .content {
+    margin: 25px 20px 35px;
+  }
+
+  .inputs input {
+    height: 51px;
+    width: 50px;
+    margin: 3px;
+    font-size: 22px;
+  }
+
+  .details p {
+    font-size: 16px; /* Adjusted font size */
+  }
+
+  .content .reset-btn {
+    padding: 14px 0;
+    font-size: 16px;
+  }
+}