.da-wordle { font-family: Arial, sans-serif; text-align: center; padding: 20px 10px; max-width: 500px; margin: 0 auto; } .da-wordle h3 { margin: 0 0 4px; font-size: 28px; font-weight: 500; } .da-wordle-subtitle { margin: 0 0 18px; font-size: 16px; } .da-wordle-grid { display: flex; flex-direction: column; align-items: center; gap: 5px; } .da-wordle-row { display: flex; gap: 5px; } .da-wordle-tile { width: 42px; height: 42px; border: 2px solid #d3d6da; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: bold; text-transform: uppercase; box-sizing: border-box; background: #fff; } .da-wordle-tile.correct { background: #6aaa64; border-color: #6aaa64; color: white; } .da-wordle-tile.present { background: #c9b458; border-color: #c9b458; color: white; } .da-wordle-tile.absent { background: #787c7e; border-color: #787c7e; color: white; } .da-wordle-input-row { display: flex; justify-content: center; gap: 5px; margin-top: 18px; } .da-wordle-input { width: 42px; height: 42px; border: 2px solid #ccc; text-align: center; font-size: 22px; font-weight: bold; text-transform: uppercase; box-sizing: border-box; outline: none; } .da-wordle-input:focus { border-color: #777; } .da-wordle-button { margin-top: 12px; padding: 9px 18px; border: none; background: #f1f1f1; font-size: 16px; cursor: pointer; } .da-wordle-button:hover { background: #e5e5e5; } .da-wordle-message { min-height: 24px; margin-top: 12px; font-size: 15px; } .da-wordle-result { font-weight: bold; } @media (max-width: 480px) { .da-wordle-tile, .da-wordle-input { width: 36px; height: 36px; font-size: 19px; } .da-wordle-row, .da-wordle-input-row { gap: 3px; } .da-wordle h3 { font-size: 24px; } } (function () { /* ========================================== HERE YOU CAN ENTER THE WORDS IMPORTANT: All words must have exactly 6 letters! ========================================== */ const words = [ "HEINER", "LILIEN", "BEMBEL", "HESSEN", "WOOGEN", "LOUISE", "MERCKS", "ENTEGA", "CAMPUS", "KULTUR", "GARTEN", "SCHWAN", "BERGIG" ]; /* ========================================== SETTINGS ========================================== */ const maxTries = 6; /* ========================================== DETERMINE THE WORD OF THE DAY ========================================== */ function getDayNumber() { const today = new Date(); const start = new Date( today.getFullYear(), 0, 0 ); const diff = today - start; const oneDay = 1000 * 60 * 60 * 24; return Math.floor(diff / oneDay); } const dayNumber = getDayNumber(); const solution = words[dayNumber % words.length].toUpperCase(); const wordLength = solution.length; /* =========================================== ELEMENTS ========================================== */ const grid = document.getElementById("da-wordle-grid"); const inputRow = document.getElementById("da-wordle-input-row"); const button = document.getElementById("da-wordle-button"); const message = document.getElementById("da-wordle-message"); const lengthDisplay = document.getElementById("da-wordle-length"); lengthDisplay.textContent = wordLength; let tries = 0; let gameOver = false; const rows = []; const inputFields = []; /* =========================================== CREATE PLAYFIELD ========================================== */ for (let i = 0; i < maxTries; i++) { const row = document.createElement("div"); row.className = "da-wordle-row"; for (let j = 0; j < wordLength; j++) { const tile = document.createElement("div"); tile.className = "da-wordle-tile"; row.appendChild(tile); } grid.appendChild(row); rows.push(row); } /* ========================================== INPUT FIELDS ========================================= */ for (let i = 0; i < wordLength; i++) { const input = document.createElement("input"); input.type = "text"; input.maxLength = 1; input.className = "da-wordle-input"; input.autocomplete = "off"; input.autocapitalize = "characters"; input.addEventListener("input", function () { this.value = this.value .replace(/[^a-zA-ZÄÖÜäöü]/g, "") .toUpperCase(); if ( this.value && i 0 ) { inputFields[i - 1].focus(); } if (event.key === "Enter") { submitGuess(); } }); inputRow.appendChild(input); inputFields.push(input); } /* ========================================== EVALUATE LETTERS ========================================== */ function evaluateGuess(guess) { const result = new Array(wordLength).fill("absent"); const remaining = solution.split(""); /* Exactly correct letters first */ for (let i = 0; i < wordLength; i++) { if (guess[i] === solution[i]) { result[i] = "correct"; remaining[i] = null; } } /* Then correct letters in wrong position */ for (let i = 0; i input.value) .join("") .toUpperCase(); if (guess.length !== wordLength) { message.textContent = "Please fill in all " + wordLength + " letters."; return; } const row = rows[tries]; const result = evaluateGuess(guess); for (let i = 0; i < wordLength; i++) { const tile = row.children[i]; tile.textContent = guess[i]; tile.classList.add( result[i] ); } tries++; /* ========================================== WON ========================================== */ if (guess === solution) { gameOver = true; message.innerHTML = '🎉 Congratulations! Guessed in ' + tries + (tries === 1 ? " Attempt." : " Attempts.") + ''; disableInputs(); return; } /* ========================================== LOST ========================================== */ if (tries >= maxTries) { gameOver = true; message.innerHTML = '' + 'Unfortunately, I didn't manage it! The word was: ' + solution + ''; disableInputs(); return; } message.textContent = "Tries: " + tries + " / " + maxTries; /* Clear input */ inputFields.forEach(function (input) { input.value = ""; }); inputFields[0].focus(); } /* =========================================== END GAME ========================================== */ function disableInputs() { inputFields.forEach(function (input) { input.disabled = true }); button.disabled = true; } /* ========================================== BUTTON ============================================ */ button.addEventListener( "click", submitGuess ); /* Activate first field */ inputFields[0].focus(); })();