Sahel

Puissance4.css

@@ -0,0 +1,56 @@
+header
+{
+    display: flex;
+    justify-content: center;
+    background-color: white;
+    padding: 1em;
+    margin: 0 -5px;
+}
+body
+{
+    display: flex;
+    flex-direction: column;
+    background-color: #17a2b8;
+    margin: 0%;
+    padding: 0%;
+    min-height: 100vh;
+}
+a
+{
+    text-decoration: none;
+    color: grey;
+    font-size: 1.2em;
+    margin: 0 5px;
+}
+section
+{
+    padding-top: 3em;
+    padding-bottom: 3em;
+    background-color: white;
+    margin: 20em;
+    margin-top : 5em;
+    margin-bottom: 5em;
+    border-radius: 0.5em;
+}
+footer{
+    margin-top: auto;
+}
+td {
+    color: #000088;
+    text-align: center;
+    margin-top: 14px;
+    height: 6em;
+    letter-spacing: 1px;
+    border: 3px #17a2b8 inset;
+    background-color: white;
+    width: 6em;
+    border-radius: 100%;
+  }
+  #Board{
+    border: 3px #17a2b8 outset;
+    border-radius: 2%;
+    background-color: #17a2b8;
+    margin: auto;
+    padding: 0.5em;
+  }
+

Puissance4.js

@@ -0,0 +1,8 @@
+
+const tbody = document.querySelector('#Board');
+tbody.addEventListener('click', function (e) {
+  const cell = e.target.closest('td');
+  if (!cell) {return;} // Quit, not clicked on a cell
+  const row = cell.parentElement;
+  console.log(cell.innerHTML, row.rowIndex, cell.cellIndex);
+});