diff --git a/Unscramble mania/Js/script.js b/Unscramble mania/Js/script.js new file mode 100644 index 0000000..b79a486 --- /dev/null +++ b/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); +}); diff --git a/Unscramble mania/Js/word.js b/Unscramble mania/Js/word.js new file mode 100644 index 0000000..f352226 --- /dev/null +++ b/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" + }, +] \ No newline at end of file diff --git a/Unscramble mania/LICENSE b/Unscramble mania/LICENSE new file mode 100644 index 0000000..ce941f0 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/Unscramble mania/Screenshot 2023-12-14 174549.png b/Unscramble mania/Screenshot 2023-12-14 174549.png new file mode 100644 index 0000000..8c5379b Binary files /dev/null and b/Unscramble mania/Screenshot 2023-12-14 174549.png differ diff --git a/Unscramble mania/Screenshot 2023-12-14 174604.png b/Unscramble mania/Screenshot 2023-12-14 174604.png new file mode 100644 index 0000000..7ec37d5 Binary files /dev/null and b/Unscramble mania/Screenshot 2023-12-14 174604.png differ diff --git a/Unscramble mania/Screenshot 2023-12-14 174624.png b/Unscramble mania/Screenshot 2023-12-14 174624.png new file mode 100644 index 0000000..a46a688 Binary files /dev/null and b/Unscramble mania/Screenshot 2023-12-14 174624.png differ diff --git a/Unscramble mania/img/Screenshot 2023-12-14 174549.png b/Unscramble mania/img/Screenshot 2023-12-14 174549.png new file mode 100644 index 0000000..8c5379b Binary files /dev/null and b/Unscramble mania/img/Screenshot 2023-12-14 174549.png differ diff --git a/Unscramble mania/img/Screenshot 2023-12-14 174604.png b/Unscramble mania/img/Screenshot 2023-12-14 174604.png new file mode 100644 index 0000000..7ec37d5 Binary files /dev/null and b/Unscramble mania/img/Screenshot 2023-12-14 174604.png differ diff --git a/Unscramble mania/img/Screenshot 2023-12-14 174624.png b/Unscramble mania/img/Screenshot 2023-12-14 174624.png new file mode 100644 index 0000000..a46a688 Binary files /dev/null and b/Unscramble mania/img/Screenshot 2023-12-14 174624.png differ diff --git a/Unscramble mania/index.html b/Unscramble mania/index.html new file mode 100644 index 0000000..b8666f2 --- /dev/null +++ b/Unscramble mania/index.html @@ -0,0 +1,28 @@ + + + + + Unscramble Mania + + + + + + +
+

Unscramble Mania

+
+

+
+

Hint:

+

Time Left: 30s

+
+ +
+ + +
+
+
+ + \ No newline at end of file diff --git a/Unscramble mania/readme.md b/Unscramble mania/readme.md new file mode 100644 index 0000000..4b58691 --- /dev/null +++ b/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]() +![Game image]() +![Game image]() + +## 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 - souvik13109@example.com diff --git a/Unscramble mania/style.css b/Unscramble mania/style.css new file mode 100644 index 0000000..43a9621 --- /dev/null +++ b/Unscramble mania/style.css @@ -0,0 +1,193 @@ + +@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; + align-items: center; + justify-content: center; + min-height: 100vh; + background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); +} +.container{ + width: 440px; + border-radius: 7px; + background: #fff; + box-shadow: 0 20px 40px rgba(0,0,0,0.08); +} +.container h2{ + font-size: 25px; + font-weight: 500; + padding: 16px 25px; + color:#e82aaf; + border-bottom: 1px solid #ccc; +} +.container .content{ + margin: 25px 20px 35px; +} +.content .word{ + user-select: none; + font-size: 33px; + font-weight: 500; + text-align: center; + letter-spacing: 24px; + margin-right: -24px; + word-break: break-all; + text-transform: uppercase; +} +.content .details{ + margin: 25px 0 20px; +} +.time +{ + color: #f1054f; + font-weight: bolder; +} +.details p{ + font-size: 18px; + margin-bottom: 10px; +} +.details p b{ + font-weight: 500; +} +.content input{ + width: 100%; + height: 60px; + outline: none; + padding: 0 16px; + font-size: 18px; + border-radius: 5px; + border: 1px solid #bfbfbf; +} +.content input:focus{ + box-shadow: 0px 2px 4px rgba(0,0,0,0.08); +} +.content input::placeholder{ + color: #aaa; +} +.content input:focus::placeholder{ + color: #bfbfbf; +} +.content .button{ + display: flex; + margin-top: 20px; + justify-content: space-between; +} +.button button{ + border: none; + outline: none; + color: #fff; + cursor: pointer; + padding: 15px 0; + font-size: 17px; + border-radius: 5px; + width: calc(100% / 2 - 8px); + /* background-color: #7d2ae8; */ + transition: all 0.3s ease; +} +.button button:active{ + transform: scale(0.97); +} +.button .refresh-word{ + background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); +} +.button .refresh-word:hover{ + background:#e82aaf; +} +.button .check-word{ + background-image: linear-gradient(120deg, #75a8fa 0%, #aae3fe 100%); +} +.button .check-word:hover{ + background: #1c389c; +} + +.button.animate::before.animate::before { + top: -70%; + background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%); + background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, + 10% 10%, 18% 18%; + animation: greentopBubbles ease-in-out 0.6s forwards infinite; + } + @keyframes greentopBubbles { + 0% { + background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, + 40% 90%, 55% 90%, 70% 90%; + } + 50% { + background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, + 50% 50%, 65% 20%, 90% 30%; + } + 100% { + background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, + 50% 40%, 65% 10%, 90% 20%; + background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; + } + } + .button.animate::after.animate::after { + bottom: -70%; + background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%); + background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%; + animation: greenbottomBubbles ease-in-out 0.6s forwards infinite; + } + @keyframes greenbottomBubbles { + 0% { + background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, + 70% -10%, 70% 0%; + } + 50% { + background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, + 105% 0%; + } + 100% { + background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, + 110% 10%; + background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; + } + } + +@media screen and (max-width: 470px) { + .container h2{ + font-size: 22px; + padding: 13px 20px; + } + .content .word{ + font-size: 30px; + letter-spacing: 20px; + margin-right: -20px; + } + .container .content{ + margin: 20px 20px 30px; + } + .details p{ + font-size: 16px; + margin-bottom: 8px; + } + .content input{ + height: 55px; + font-size: 17px; + } + .button button{ + padding: 14px 0; + font-size: 16px; + width: calc(100% / 2 - 7px); + } +} \ No newline at end of file