Welcome to Weirdle!

\n \n \n

Result:

\n \n

\n\n\n\n\n// CSS (styles.css)\nbody {\n font-family: 'Comic Sans MS', cursive;\n background: linear-gradient(to right, #ff758c, #ff7eb3);\n text-align: center;\n}\n.game {\n max-width: 600px;\n margin: 50px auto;\n padding: 20px;\n border: 2px solid black;\n background-color: rgba(255, 255, 255, 0.8);\n border-radius: 10px;\n}\nh1 {\n color: purple;\n}\n.word-box {\n display: flex;\n justify-content: center;\n}\n.letter {\n font-size: 2em;\n margin: 10px;\n width: 40px;\n height: 40px;\n border: 2px solid black;\n border-radius: 50%;\n text-align: center;\n line-height: 40px;\n color: white;\n background-color: purple;\n}\n.guess-box {\n margin-top: 20px;\n}\n.guess-input {\n padding: 10px;\n font-size: 1.2em;\n}\n.submit-btn {\n padding: 10px 20px;\n font-size: 1.2em;\n background-color: purple;\n color: white;\n border: none;\n cursor: pointer;\n margin-left: 10px;\n}\n.result {\n margin-top: 20px;\n}\n.play-again {\n margin-top: 20px;\n padding: 10px 20px;\n font-size: 1.2em;\n background-color: purple;\n color: white;\n border: none;\n cursor: pointer;\n}\n\n// JavaScript (script.js)\nconst word = \"WEIRD\";\nlet attempts = 0;\n\ndocument.querySelector(\".submit-btn\").addEventListener(\"click\", () => {\n const guess = document.querySelector(\".guess-input\").value.toUpperCase();\n if (guess.length !== 5 || !/^[A-Z]+$/.test(guess)) {\n alert(\"Please enter a 5-letter word using only letters from A-Z.\");\n return;\n }\n attempts++;\n let resultText = \"\";\n for (let i = 0; i < 5; i++) {\n if (word.includes(guess[i])) {\n if (word[i] === guess[i]) {\n resultText += \"\" + guess[i] + \"\";\n } else {\n resultText += \"\" + guess[i] + \"\";\n }\n } else {\n resultText += \"\" + guess[i] + \"\";\n }\n }\n if (word === guess) {\n document.querySelector(\".result-text\").innerHTML = resultText + \" - Congratulations! You've guessed the word in \" + attempts + \" attempts.\";\n document.querySelector(\".submit-btn\").setAttribute(\"disabled\", true);\n } else {\n document.querySelector(\".result-text\").innerHTML = resultText;\n }\n});\n\ndocument.querySelector(\".play-again\").addEventListener(\"click\", () => {\n document.querySelector(\".result-text\").innerHTML = \"\";\n document.querySelector(\".submit-btn\").removeAttribute(\"disabled\");\n document.querySelector(\".guess-input\").value = \"\";\n attempts = 0;\n});\n","deleted","label",[98],"permalink","https://www.val.town/x/janpaul123/valle_tmp_84995905331198962373155279224348/code/main.tsx","extension","actionData","errors"]