kunjgit · sasank-paria · Sep 13, 2023
diff --git a/Games/Word_Guessing/README.md b/Games/Word_Guessing/README.md
diff --git a/Games/Word_Guessing/assets/images/Word_Guessing.PNG b/Games/Word_Guessing/assets/images/Word_Guessing.PNG
diff --git a/Games/Word_Guessing/index.html b/Games/Word_Guessing/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Guessing Word</title>
+    <link rel="stylesheet" href="style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <div class="wrapper">
+      <h1>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">Hint: <span></span></p>
+          <p class="guess-left">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="words.js"></script>
+    <script src="script.js"></script>
+
+  </body>
+</html>
diff --git a/Games/Word_Guessing/script.js b/Games/Word_Guessing/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(`Congratulations! You got the word ${word.toUpperCase()}`);
+            return randomWord();
+        } else if(maxGuesses < 1) {
+            alert("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/Games/Word_Guessing/style.css b/Games/Word_Guessing/style.css
@@ -0,0 +1,108 @@
+/* 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: 0 10px;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  background: #ececec;
+}
+.wrapper{
+  width: 430px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+}
+.wrapper h1{
+  font-size: 25px;
+  font-weight: 500;
+  padding: 20px 25px;
+  border-bottom: 1px solid #ccc;
+  text-align: center;
+}
+.wrapper .content{
+  margin: 25px 25px 35px;
+}
+.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: #8d1ba9;
+  text-align: center;
+  border-radius: 5px;
+  background: none;
+  pointer-events: none;
+  text-transform: uppercase;
+  border: 1px solid #B5B5B5;
+}
+.typing-input {
+  opacity: 1;
+  z-index: -999;
+  position: absolute;
+  pointer-events: none;
+}
+.inputs input:first-child{
+  margin-left: 0px;
+}
+.content .details{
+  margin: 20px 0 25px;
+}
+.details p{
+  font-size: 19px;
+  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: #03201a;
+  transition: all 0.3s ease;
+}
+.content .reset-btn:hover{
+  background: #18a589;
+}
+
+@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: 17px;
+  }
+  .content .reset-btn{
+    padding: 14px 0;
+    font-size: 16px;
+  }
+}
diff --git a/Games/Word_Guessing/words.js b/Games/Word_Guessing/words.js
@@ -0,0 +1,194 @@
+let wordList = [
+    {
+        word: "banana",
+        hint: "a tropical fruit"
+    },
+    {
+        word: "giraffe",
+        hint: "a tall African animal"
+    },
+    {
+        word: "book",
+        hint: "a written work"
+    },
+    {
+        word: "moon",
+        hint: "Earth's natural satellite"
+    },
+    {
+        word: "diamond",
+        hint: "a precious gemstone"
+    },
+    {
+        word: "camera",
+        hint: "device for taking photos"
+    },
+    {
+        word: "piano",
+        hint: "a musical instrument"
+    },
+    {
+        word: "painting",
+        hint: "artistic creation on canvas"
+    },
+    {
+        word: "ocean",
+        hint: "vast body of saltwater"
+    },
+    {
+        word: "butterfly",
+        hint: "colorful flying insect"
+    },
+    {
+        word: "rainbow",
+        hint: "colorful meteorological phenomenon"
+    },
+    {
+        word: "computer",
+        hint: "electronic device for processing data"
+    },
+    {
+        word: "mountain",
+        hint: "elevated landform"
+    },
+    {
+        word: "beach",
+        hint: "sandy shore by the sea"
+    },
+    {
+        word: "football",
+        hint: "popular team sport"
+    },
+    {
+        word: "paintbrush",
+        hint: "tool for applying paint"
+    },
+    {
+        word: "bicycle",
+        hint: "two-wheeled transportation"
+    },
+    {
+        word: "telephone",
+        hint: "communication device"
+    },
+    {
+        word: "chocolate",
+        hint: "sweet confectionery"
+    },
+    {
+        word: "sunset",
+        hint: "evening natural event"
+    },
+    {
+        word: "garden",
+        hint: "cultivated outdoor space"
+    },
+    {
+        word: "internet",
+        hint: "global computer network"
+    },
+    {
+        word: "music",
+        hint: "art form of sound"
+    },
+    {
+        word: "fireplace",
+        hint: "hearth for a fire indoors"
+    },
+    {
+        word: "ballet",
+        hint: "elegant dance form"
+    },
+    {
+        word: "coffee",
+        hint: "caffeinated beverage"
+    },
+    {
+        word: "jungle",
+        hint: "dense tropical forest"
+    },
+    {
+        word: "whale",
+        hint: "gigantic marine mammal"
+    },
+    {
+        word: "safari",
+        hint: "wildlife adventure trip"
+    },
+    {
+        word: "bracelet",
+        hint: "ornamental wrist accessory"
+    },
+    {
+        word: "volcano",
+        hint: "mountain with eruptive potential"
+    },
+    {
+        word: "sunglasses",
+        hint: "eye protection from sun"
+    },
+    {
+        word: "adventure",
+        hint: "exciting journey or experience"
+    },
+    {
+        word: "globe",
+        hint: "model of the Earth"
+    },
+    {
+        word: "sunflower",
+        hint: "bright yellow flowering plant"
+    },
+    {
+        word: "breeze",
+        hint: "gentle wind"
+    },
+    {
+        word: "passport",
+        hint: "travel identification document"
+    },
+    {
+        word: "candle",
+        hint: "wax with a wick for lighting"
+    },
+    {
+        word: "fireworks",
+        hint: "pyrotechnic display"
+    },
+    {
+        word: "skyscraper",
+        hint: "tall urban building"
+    },
+    {
+        word: "dictionary",
+        hint: "language reference book"
+    },
+    {
+        word: "fountain",
+        hint: "water feature in a garden"
+    },
+    {
+        word: "tiger",
+        hint: "large striped carnivore"
+    },
+    {
+        word: "violin",
+        hint: "musical string instrument"
+    },
+    {
+        word: "umbrella",
+        hint: "rain protection device"
+    },
+    {
+        word: "flower",
+        hint: "blossoming plant"
+    },
+    {
+        word: "strawberry",
+        hint: "sweet red fruit"
+    },
+    {
+        word: "oxygen",
+        hint: "essential gas for life"
+    },
+];