diff --git a/code/connect4.html b/code/connect4.html
index b631947..71d50cd 100644
--- a/code/connect4.html
+++ b/code/connect4.html
@@ -20,7 +20,7 @@
       border: 1px solid black;
       width: 12vw;
       height: 12vw;
-      display: none;
+      float: left;
     }
 
     .board .field:first-child {
@@ -42,26 +42,90 @@
 
   </style>
 
+  <script>
+      const elt = function (type, attrs, ...children) { 
+      let node = document.createElement(type) 
+      for (a in attrs) { 
+        node.setAttribute(a, attrs[a]) 
+      } 
+      for (let child of children) { 
+        if (typeof child != "string") node.appendChild(child) 
+        else node.appendChild(document.createTextNode(child)) 
+      } 
+      return node 
+    }
+
+    const columns = 7
+    const rows = 6
+    let nextColor = "red"
+
+    let state = Array(rows).fill('').map(el => Array(columns).fill(''))
+
+    const showBoard = function() {
+      document.querySelector(".board").innerHTML = ''
+      for(row = 0; row < rows; row++) {
+        for(column = 0; column < columns; column++) {
+          let attributes = {"class": "field", "onclick": "setColumn(" + column + ")"}
+          let children = elt("div", {"class": state[row][column] + " piece"})
+          document.querySelector(".board").append(elt("div", attributes, children))
+        }
+      }
+    }
+    
+  </script>
+
 
 </head>
 <body>
 
-  <div class="board">
+  <div class="board"></div>
 
-    <div class="field"><div class="blue piece"></div></div>
-    <div class="field"></div>
-    <div class="field"></div>
-    <div class="field"></div>
-    <div class="field"></div>
-    <div class="field"></div>
-    <div class="field"><div class="red piece"></div></div>
-    <div class="field"></div>
-    <div class="field"></div>
-    <div class="field"></div>
-    <div class="field"></div>
-    <div class="field"></div>
-
-  </div>
+  <script> 
+    showBoard() 
+  </script> 
 
 </body>
+
+<script>
+    const switchNextColor = function() {
+      if(nextColor === "red") {
+        nextColor = "blue"
+      } else if(nextColor === "blue") {
+        nextColor = "red"
+      }
+    }
+
+    const setField = function(row, column) {
+      state[row][column] = nextColor
+      console.log(state)
+      switchNextColor()
+      showBoard()
+    }
+
+    const setColumn = function(column) {
+      let row = rows - 1
+      const column_number = column
+      while(row >= 0){
+        if(state[row][column_number] !== ''){
+          row--
+        } else {
+          console.log("setting", row, column)
+          setField(row, column_number)
+          break
+        }
+      }
+    }
+
+
+    // const interval = setInterval(function() { 
+    //   let color = ""
+    //   let action = Math.floor(Math.random() * 3)
+    //   if(action == 1) {
+    //     color = "red"
+    //   } else if(action == 2) {
+    //     color = "blue"
+    //   }
+    //   setField(Math.floor(Math.random() * rows), Math.floor(Math.random() * columns), color)
+    // }, 1000);
+</script>
 </html>
