.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;
}
}
DA.news – wer waaßes?
Gesucht ist ein Wort mit Buchstaben
(function () {
/* ==========================================
HIER KÖNNT IHR DIE WÖRTER EINTRAGEN
WICHTIG:
Alle Wörter müssen genau 6 Buchstaben haben!
========================================== */
const words = [
"HEINER",
"LILIEN",
"BEMBEL",
"HESSEN",
"WOOGEN",
"LOUISE",
"MERCKS",
"ENTEGA",
"CAMPUS",
"KULTUR",
"GARTEN",
"SCHWAN",
"BERGIG"
];
/* ==========================================
EINSTELLUNGEN
========================================== */
const maxTries = 6;
/* ==========================================
TAGESWORT BESTIMMEN
========================================== */
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;
/* ==========================================
ELEMENTE
========================================== */
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 = [];
/* ==========================================
SPIELFELD ERSTELLEN
========================================== */
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);
}
/* ==========================================
EINGABEFELDER
========================================== */
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);
}
/* ==========================================
BUCHSTABEN AUSWERTEN
========================================== */
function evaluateGuess(guess) {
const result =
new Array(wordLength).fill("absent");
const remaining =
solution.split("");
/* Zuerst exakt richtige Buchstaben */
for (let i = 0; i < wordLength; i++) {
if (guess[i] === solution[i]) {
result[i] = "correct";
remaining[i] = null;
}
}
/* Danach richtige Buchstaben
an falscher Position */
for (let i = 0; i input.value)
.join("")
.toUpperCase();
if (guess.length !== wordLength) {
message.textContent =
"Bitte alle " +
wordLength +
" Buchstaben ausfüllen.";
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++;
/* ==========================================
GEWONNEN
========================================== */
if (guess === solution) {
gameOver = true;
message.innerHTML =
'
' +
'🎉 Glückwunsch! Erraten in ' +
tries +
(tries === 1 ? " Versuch." : " Versuchen.") +
'';
disableInputs();
return;
}
/* ==========================================
VERLOREN
========================================== */
if (tries >= maxTries) {
gameOver = true;
message.innerHTML =
'
' +
'Leider nicht geschafft! Das Wort war: ' +
solution +
'';
disableInputs();
return;
}
message.textContent =
"Versuche: " +
tries +
" / " +
maxTries;
/* Eingabe löschen */
inputFields.forEach(function (input) {
input.value = "";
});
inputFields[0].focus();
}
/* ==========================================
SPIEL BEENDEN
========================================== */
function disableInputs() {
inputFields.forEach(function (input) {
input.disabled = true;
});
button.disabled = true;
}
/* ==========================================
BUTTON
========================================== */
button.addEventListener(
"click",
submitGuess
);
/* Erstes Feld aktivieren */
inputFields[0].focus();
})();
