changed code -> Pieces now get set and drawn (currently X and O)

changed style -> changed em to rem, changed font in .game to 2rem

code.js

@@ -1,9 +1,34 @@
-let fieldId = 0;
+let fieldId;
+let field;
 let somethingIsSelected = false;
 
 for(let i = 0; i < 64; i++){
     fieldId = i.toString();
-    document.getElementById("field"+fieldId).selected = 0;
+    document.getElementById("field"+fieldId).selected = 0;                                                              //Sorgt dafür dass alle Felder die selected variable haben und diese 0 ist
+    document.getElementById("field"+fieldId).piece = 0;                                                                 //Sorgt dafür dass alle Felder die piece variable haben und diese 0 ist
+}
+for(let i = 0; i < 8; i++){
+    fieldId = i.toString();
+    document.getElementById("field"+fieldId).piece = 1;                                                                 //Setzt die piece Variable von Feld 0 bis 8 auf 1 -> Diese Felder haben einen Spielstein von Spieler 1
+}
+for(let i = 56; i < 64; i++){
+    fieldId = i.toString();
+    document.getElementById("field"+fieldId).piece = 2;                                                                 //Setzt die piece Variable von Feld 0 bis 8 auf 1 -> Diese Felder haben einen Spielstein von Spieler 1
+}
+drawPieces();
+
+function drawPieces() {
+    for (let i = 0; i < 64; i++) {
+        fieldId = i.toString();
+        field = document.getElementById("field" + fieldId);
+        if (field.piece === 0) {
+            field.innerText = "";
+        } else if (field.piece === 1) {
+            field.innerText = "X";
+        } else if (field.piece === 2) {
+            field.innerText = "O";
+        }
+    }
 }
 function selectField(field){
     console.log(field.id);

style.css

@@ -42,12 +42,13 @@ li a:hover:not(.active) {
     background-color: #ffffff;
 }
 .game{
-    border: solid black 0.1em;
+    border: solid black 0.1rem;
     border-collapse: collapse;
+    font-size: 2rem;
 }
 .fields{
-    width: 3em;
+    width: 3rem;
-    height: 3em;
+    height: 3rem;
 }
 body{
     text-align: center;