Table of Contents

Wordle

Logik

UI

Das einfachste ist es wohl, mit einer Tabelle zu arbeiten und dort mit CSS die Buchstaben schön zentrieren und die Zellen quadratisch machen.

Für die Färbung sollten Klassen verwendet werden:

td {
   color: white;
   // plus weitere Formatierungen für grösse, zentrierung, schatten etc.
}
.normal {
  background-color: black;
}
.gelb {
  background-color: darkyellow;
}
.gruen {
  background-color: darkgreen;
}

Im HTML-Code sieht das dann wie folgt aus

<td class="normal"></td>

In JavaScript können diese Klassen wie folgt manipuliert werden:

// Kopiert von https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript
document.getElementById("MyElement").classList.add('MyClass');
 
document.getElementById("MyElement").classList.remove('MyClass');
 
if ( document.getElementById("MyElement").classList.contains('MyClass') )
 
document.getElementById("MyElement").classList.toggle('MyClass');