Unscramble Mania

Unscramble mania/Js/script.js

@@ -0,0 +1,57 @@
+const wordText = document.querySelector(".word"),
+hintText = document.querySelector(".hint span"),
+timeText = document.querySelector(".time b"),
+inputField = document.querySelector("input"),
+refreshBtn = document.querySelector(".refresh-word"),
+checkBtn = document.querySelector(".check-word");
+
+let correctWord, timer;
+
+const initTimer = maxTime => {
+    clearInterval(timer);
+    timer = setInterval(() => {
+        if(maxTime > 0) {
+            maxTime--;
+            return timeText.innerText = maxTime;
+        }
+        alert(`Time off! ${correctWord.toUpperCase()} was the correct word`);
+        initGame();
+    }, 1000);
+}
+
+const initGame = () => {
+    initTimer(30);
+    let randomObj = words[Math.floor(Math.random() * words.length)];
+    let wordArray = randomObj.word.split("");
+    for (let i = wordArray.length - 1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i + 1));
+        [wordArray[i], wordArray[j]] = [wordArray[j], wordArray[i]];
+    }
+    wordText.innerText = wordArray.join("");
+    hintText.innerText = randomObj.hint;
+    correctWord = randomObj.word.toLowerCase();;
+    inputField.value = "";
+    inputField.setAttribute("maxlength", correctWord.length);
+}
+initGame();
+
+const checkWord = () => {
+    let userWord = inputField.value.toLowerCase();
+    if(!userWord) return alert("Please enter the word to check!");
+    if(userWord !== correctWord) return alert(`Oops! ${userWord} is not a correct word`);
+    alert(`Congrats! ${correctWord.toUpperCase()} is the correct word`);
+    initGame();
+}
+
+refreshBtn.addEventListener("click", initGame);
+checkBtn.addEventListener("click", checkWord);
+
+
+const button = document.querySelector(".button");
+button.addEventListener("click", (e) => {
+  e.preventDefault;
+  button.classList.add("animate");
+  setTimeout(() => {
+    button.classList.remove("animate");
+  }, 600);
+});

Unscramble mania/Js/word.js

@@ -0,0 +1,94 @@
+let words = [
+    {
+        word: "addition",
+        hint: "The process of adding numbers"
+    },
+    {
+        word: "meeting",
+        hint: "Event in which people come together"
+    },
+    {
+        word: "number",
+        hint: "Math symbol used for counting"
+    },
+    {
+        word: "exchange",
+        hint: "The act of trading"
+    },
+    {
+        word: "canvas",
+        hint: "Piece of fabric for oil painting"
+    },
+    {
+        word: "garden",
+        hint: "Space for planting flower and plant"
+    },
+    {
+        word: "position",
+        hint: "Location of someone or something"
+    },
+    {
+        word: "feather",
+        hint: "Hair like outer covering of bird"
+    },
+    {
+        word: "comfort",
+        hint: "A pleasant feeling of relaxation"
+    },
+    {
+        word: "tongue",
+        hint: "The muscular organ of mouth"
+    },
+    {
+        word: "expansion",
+        hint: "The process of increase or grow"
+    },
+    {
+        word: "country",
+        hint: "A politically identified region"
+    },
+    {
+        word: "group",
+        hint: "A number of objects or persons"
+    },
+    {
+        word: "taste",
+        hint: "Ability of tongue to detect flavour"
+    },
+    {
+        word: "store",
+        hint: "Large shop where goods are traded"
+    },
+    {
+        word: "field",
+        hint: "Area of land for farming activities"
+    },
+    {
+        word: "friend",
+        hint: "Person other than a family member"
+    },
+    {
+        word: "pocket",
+        hint: "A bag for carrying small items"
+    },
+    {
+        word: "needle",
+        hint: "A thin and sharp metal pin"
+    },
+    {
+        word: "expert",
+        hint: "Person with extensive knowledge"
+    },
+    {
+        word: "statement",
+        hint: "A declaration of something"
+    },
+    {
+        word: "second",
+        hint: "One-sixtieth of a minute"
+    },
+    {
+        word: "library",
+        hint: "Place containing collection of books"
+    },
+]

Unscramble mania/LICENSE

@@ -0,0 +1,11 @@
+The Unscramble Mania project is licensed under the MIT License.
+
+MIT License
+
+Copyright (c) [2023] [Souvik Sural]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Unscramble mania/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Unscramble Mania</title>
+    <link rel="stylesheet" href="style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="Js/word.js" defer></script>
+    <script src="Js/script.js" defer></script>
+  </head>
+  <body>
+    <div class="container">
+        <h2>Unscramble Mania</h2>
+        <div class="content">
+            <p class="word"></p>
+            <div class="details">
+                <p class="hint">Hint: <span></span></p>
+                <p class="time">Time Left: <span><b>30</b>s</span></p>
+            </div>
+            <input type="text" spellcheck="false" placeholder="Enter a valid word">
+            <div class="button">
+                <button class="refresh-word">Refresh Word</button>
+                <button class="check-word">Check Word</button>
+            </div>
+        </div>
+    </div>
+  </body>
+</html>

Unscramble mania/readme.md

@@ -0,0 +1,36 @@
+# Unscramble Mania
+A word unscrambling game where you need to find a valid word from the scrambled letters within 30 seconds. The hint provided helps in identifying the starting letter of the word.
+
+
+
+## Built With
+HTML
+CSS
+JavaScript
+
+![Game image](<Screenshot 2023-12-14 174549.png>)
+![Game image](<Screenshot 2023-12-14 174624.png>) 
+![Game image](<Screenshot 2023-12-14 174604.png>)
+
+## Getting Started
+Just click on the link and you will be able play the game in your browser
+
+## How to Play
+
+Click on the Enter a valid word input field and try to unscramble the letters using the provided hint.
+
+Enter the valid word in the input field and click on the Check Word button.
+
+If the word is correct, the game will display a message indicating the correct word and will refresh the scrambled word.
+
+Repeat steps 1-3 until you have unscrambled all the words within 30 seconds.
+
+To reset the scrambled word, click on the Refresh Word button.
+
+
+
+## License
+Distributed under the MIT License. See [LICENSE](LICENSE) for more information.
+
+## Contact
+Your Name - Souvik Sural - [email protected]