Unscramble the word:

\r\n

\r\n \r\n \r\n

\r\n

\r\n\r\n

\r\n

","css":"body {\r\n margin: 0;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n font-family: Arial, sans-serif;\r\n}\r\n\r\n.container {\r\n text-align: center;\r\n}\r\n\r\n\r\n.word-display {\r\n font-size: 2rem;\r\n font-weight: bold;\r\n margin: 20px 0;\r\n}\r\n\r\ninput[type=\"text\"] {\r\n padding: 10px;\r\n font-size: 1rem;\r\n}\r\n\r\nbutton {\r\n padding: 10px 20px;\r\n background-color: #3498db;\r\n color: #fff;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 1rem;\r\n}\r\n\r\n#message {\r\n margin-top: 20px;\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n color: #e74c3c;\r\n}\r\n\r\n\r\n.confetti {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n z-index: 1000;\r\n}\r\n\r\n.confetti-piece {\r\n position: absolute;\r\n width: 10px;\r\n height: 30px;\r\n background: #ffd300;\r\n top: 0;\r\n opacity: 0;\r\n}\r\n\r\n.confetti-piece:nth-child(1) {\r\n left: 7%;\r\n -webkit-transform: rotate(-40deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 182ms;\r\n -webkit-animation-duration: 1116ms;\r\n}\r\n\r\n.confetti-piece:nth-child(2) {\r\n left: 14%;\r\n -webkit-transform: rotate(4deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 161ms;\r\n -webkit-animation-duration: 1076ms;\r\n}\r\n\r\n.confetti-piece:nth-child(3) {\r\n left: 21%;\r\n -webkit-transform: rotate(-51deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 481ms;\r\n -webkit-animation-duration: 1103ms;\r\n}\r\n\r\n.confetti-piece:nth-child(4) {\r\n left: 28%;\r\n -webkit-transform: rotate(61deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 334ms;\r\n -webkit-animation-duration: 708ms;\r\n}\r\n\r\n.confetti-piece:nth-child(5) {\r\n left: 35%;\r\n -webkit-transform: rotate(-52deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 302ms;\r\n -webkit-animation-duration: 776ms;\r\n}\r\n\r\n.confetti-piece:nth-child(6) {\r\n left: 42%;\r\n -webkit-transform: rotate(38deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 180ms;\r\n -webkit-animation-duration: 1168ms;\r\n}\r\n\r\n.confetti-piece:nth-child(7) {\r\n left: 49%;\r\n -webkit-transform: rotate(11deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 395ms;\r\n -webkit-animation-duration: 1200ms;\r\n}\r\n\r\n.confetti-piece:nth-child(8) {\r\n left: 56%;\r\n -webkit-transform: rotate(49deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 14ms;\r\n -webkit-animation-duration: 887ms;\r\n}\r\n\r\n.confetti-piece:nth-child(9) {\r\n left: 63%;\r\n -webkit-transform: rotate(-72deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 149ms;\r\n -webkit-animation-duration: 805ms;\r\n}\r\n\r\n.confetti-piece:nth-child(10) {\r\n left: 70%;\r\n -webkit-transform: rotate(10deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 351ms;\r\n -webkit-animation-duration: 1059ms;\r\n}\r\n\r\n.confetti-piece:nth-child(11) {\r\n left: 77%;\r\n -webkit-transform: rotate(4deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 307ms;\r\n -webkit-animation-duration: 1132ms;\r\n}\r\n\r\n.confetti-piece:nth-child(12) {\r\n left: 84%;\r\n -webkit-transform: rotate(42deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 464ms;\r\n -webkit-animation-duration: 776ms;\r\n}\r\n\r\n.confetti-piece:nth-child(13) {\r\n left: 91%;\r\n -webkit-transform: rotate(-72deg);\r\n -webkit-animation: makeItRain 1000ms infinite ease-out;\r\n -webkit-animation-delay: 429ms;\r\n -webkit-animation-duration: 818ms;\r\n}\r\n\r\n.confetti-piece:nth-child(odd) {\r\n background: #7431e8;\r\n}\r\n\r\n.confetti-piece:nth-child(even) {\r\n z-index: 1;\r\n}\r\n\r\n.confetti-piece:nth-child(4n) {\r\n width: 5px;\r\n height: 12px;\r\n -webkit-animation-duration: 2000ms;\r\n}\r\n\r\n.confetti-piece:nth-child(3n) {\r\n width: 3px;\r\n height: 10px;\r\n -webkit-animation-duration: 2500ms;\r\n -webkit-animation-delay: 1000ms;\r\n}\r\n\r\n.confetti-piece:nth-child(4n-7) {\r\n background: red;\r\n}\r\n\r\n@-webkit-keyframes makeItRain {\r\n from {\r\n opacity: 0;\r\n }\r\n\r\n 50% {\r\n opacity: 1;\r\n }\r\n\r\n to {\r\n -webkit-transform: translateY(350px);\r\n }\r\n}\r\n\r\n.hidden {\r\n display: none;\r\n}","js":"const programmingWords = [\r\n \"algorithm\",\r\n \"array\",\r\n \"boolean\",\r\n \"function\",\r\n \"variable\",\r\n \"loop\",\r\n \"conditional\",\r\n \"string\",\r\n \"integer\",\r\n \"object\",\r\n \"method\",\r\n \"class\",\r\n \"interface\",\r\n \"inheritance\",\r\n \"polymorphism\",\r\n \"database\",\r\n \"API\",\r\n \"debugging\",\r\n \"framework\",\r\n \"repository\",\r\n \"frontend\",\r\n \"backend\",\r\n \"compiler\",\r\n \"syntax\",\r\n \"variable\",\r\n \"iteration\",\r\n \"recursion\",\r\n \"library\",\r\n \"scripting\",\r\n \"asynchronous\",\r\n \"callback\",\r\n \"middleware\",\r\n \"authentication\",\r\n \"encryption\",\r\n \"deployment\",\r\n \"versioning\",\r\n \"integration\",\r\n \"testing\",\r\n \"agile\",\r\n \"responsive\",\r\n \"dependency\",\r\n \"continuous\",\r\n \"variable\",\r\n \"function\",\r\n \"interface\",\r\n \"parameter\",\r\n \"framework\",\r\n \"debugger\",\r\n \"exception\",\r\n \"documentation\",\r\n \"repository\",\r\n \"implementation\",\r\n \"optimization\",\r\n \"algorithm\",\r\n \"architecture\",\r\n \"refactoring\",\r\n];\r\n\r\nconst coffeti = document.getElementById('celebrate')\r\nfunction getRandomProgrammingWord(words) {\r\n const randomIndex = Math.floor(Math.random() * programmingWords.length);\r\n return words[randomIndex];\r\n}\r\n\r\n\r\nconst word = getRandomProgrammingWord(programmingWords)\r\nlet scrambledWord = scrambleWord(word);\r\n\r\nconst wordDisplay = document.querySelector(\".word-display\");\r\nconst guessInput = document.getElementById(\"guess\");\r\nconst message = document.getElementById(\"message\");\r\n\r\nwordDisplay.textContent = scrambledWord;\r\n\r\nfunction scrambleWord(word) {\r\n const wordArray = word.split(\"\");\r\n for (let i = wordArray.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [wordArray[i], wordArray[j]] = [wordArray[j], wordArray[i]];\r\n }\r\n return wordArray.join(\"\");\r\n}\r\n\r\nfunction checkGuess() {\r\n const userGuess = guessInput.value.toUpperCase();\r\n if (userGuess === word.toUpperCase()) {\r\n coffeti.classList.toggle('hidden')\r\n message.textContent = \"Congratulations! You guessed it correctly!\";\r\n message.style.color = \"#2ecc71\";\r\n } else {\r\n message.textContent = \"Try again. The word is not correct.\";\r\n message.style.color = \"#e74c3c\";\r\n }\r\n}\r\n\r\nguessInput.addEventListener(\"keydown\", function (event) {\r\n if (event.key === \"Enter\") {\r\n checkGuess();\r\n }\r\n});\r\n\r\nconsole.log(word, scrambledWord)\r\n","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"wCxIeA","description":"Unscramble The Word: Game With HTML/CSS/JS","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":true,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"framermotion":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":367}],"profiles":{"username":"devcanvas"}}]