diff --git a/JavaScriptLogicGames/Word Scrambler Game/index.js b/JavaScriptLogicGames/Word Scrambler Game/index.js new file mode 100644 index 0000000..8252cd7 --- /dev/null +++ b/JavaScriptLogicGames/Word Scrambler Game/index.js @@ -0,0 +1,100 @@ +const words = [ + { + "word": "pocket", + "hint": "A bag for carrying small things" + }, + { + "word": "needle", + "hint": "A thin & sharp metal pin" + }, + { + "word": "expert", + "hint": "Person with extensive knowledge" + }, + { + "word": "statement", + "hint": "A declaration of something" + }, + { + "word": "library", + "hint": "Place containing collection of books" + }, + { + "word": "second", + "hint": "It comes after first" + }, + { + "word": "mobile", + "hint": "They are also called as movable species" + }, + { + "word": "laptop", + "hint": "A device used to code program" + }, + { + "word": "addition", + "hint": "The process of adding numbers" + }, + { + "word": "number", + "hint": "Math symbols used for counting" + }, + { + "word": "apple", + "hint": "A fruit that is red or green and often used to make pies." + }, + { + "word": "banana", + "hint": "A long, curved fruit that is yellow when ripe." + }, + { + "word": "cherry", + "hint": "A small, round fruit that is typically red or black." + }, + { + "word": "orange", + "hint": "A citrus fruit that is orange in color." + }, + { + "word": "grape", + "hint": "A small, juicy fruit that can be green, red, or purple." + } +] + + +const wordText = document.querySelector(".word"), +hintText = document.querySelector(".hint span"), +inputField = document.querySelector("input"); +const refreshBtn = document.querySelector(".refresh-word"), +checkBtn = document.querySelector(".check-word"); +let correctWord; + +const initGame = () =>{ + 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); + console.log(randomObj); +} + +const checkword = ()=>{ + let userWord = inputField.value.toLocaleLowerCase(); + if (!userWord) return alert("Please enter a correct word."); + if(userWord !== correctWord) return alert(`Oops! ${userWord} is not a correct word.`); + else alert(`Congrats! ${userWord} is a correct word.`); + initGame(); +} + + +initGame(); + + +refreshBtn.addEventListener("click", initGame); +checkBtn.addEventListener("click", checkword); diff --git a/JavaScriptLogicGames/Word Scrambler Game/popup.html b/JavaScriptLogicGames/Word Scrambler Game/popup.html new file mode 100644 index 0000000..caa31cf --- /dev/null +++ b/JavaScriptLogicGames/Word Scrambler Game/popup.html @@ -0,0 +1,35 @@ + + + + + + + + Word Scramble Game + + + + + + + + + +
+

Word Scramble Game

+
+

+
+

Hint:

+ +
+ +
+ + +
+
+
+ + + diff --git a/JavaScriptLogicGames/Word Scrambler Game/readme.md b/JavaScriptLogicGames/Word Scrambler Game/readme.md new file mode 100644 index 0000000..74ddf24 --- /dev/null +++ b/JavaScriptLogicGames/Word Scrambler Game/readme.md @@ -0,0 +1,31 @@ +# Word Scrambler Game + +Word Scrambler is a simple words game developed in JS using frontend as HTML and CSS. + +## Features + +- **Effortless Unscrambling:** Highlight scrambled letters on any webpage, right-click, and let the extension decipher them within seconds. + +- **Comprehensive Word List:** Receive a list of possible words, sorted by complexity, to choose from. + +- **Built-in Dictionary:** Explore word definitions, synonyms, and antonyms effortlessly. + +- **Customization:** Tailor settings to your preferences, adjusting word length, complexity, and language. + + +## Feedback and Support + +If you encounter any issues or have suggestions for improvement, please [submit an issue](link-to-issue-tracker) on our GitHub repository. + +## Contributing + +We welcome contributions! If you'd like to contribute to this project, please check out our [contribution guidelines](link-to-contributing-guide). + +## Contributors + +- [Prasad Chavan](https://github.com/prasad-chavan1) - Developer + + +--- + +Thank you for choosing Word Scrambler Game! Enjoy unscrambling words like a pro. diff --git a/JavaScriptLogicGames/Word Scrambler Game/style.css b/JavaScriptLogicGames/Word Scrambler Game/style.css new file mode 100644 index 0000000..4435f55 --- /dev/null +++ b/JavaScriptLogicGames/Word Scrambler Game/style.css @@ -0,0 +1,75 @@ +*{ + font-family: poppins; + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #1bb295; +} +.wrapper{ + width: 450px; + border-radius: 7px; + background: #fff; +} +.wrapper h2{ + font-size: 25px; + font-weight: 600; + padding: 18px 25px; + border-bottom: 1px solid #ccc; +} +.wrapper .data{ + margin: 25px 20px 35px; +} +.data .word{ + font-size: 33px; + font-weight: 500; + text-align: center; + letter-spacing: 24px; + text-transform: uppercase; + margin-right: -24px; +} +.data .details{ + margin: 25px 0 20px; +} +.details p{ + font-size: 18px; + margin-bottom: 10px; +} +.details p b{ + font-weight: 600; +} +.data input{ + width: 100%; + height: 60px; + outline: none; + padding: 0 16px; + border: 1px solid #aaa; + border-radius: 5px; + font-size: 18px; +} +.data .buttons{ + display: flex; + margin-top: 20px; + justify-content: space-between; +} +.buttons button{ + border: none; + outline: none; + color: #fff; + cursor: pointer; + width: calc(100% / 2 - 8px); + padding: 15px 0; + font-size: 17px; + border-radius: 5px; +} +.buttons .refresh-word{ + background: #6c757d; +} +.buttons .check-word{ + background: #1bb295; +}