init,add the grid elements, add the matrix of Cell

modouaicha023 · Nov 15, 2023 · a94d445 · a94d445
commit a94d445
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Game Of Life</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Game of Life</h1>
+    <div class="grid"></div>
+
+    <div class="">
+        <button id="play"><img src="https://cdn-icons-png.flaticon.com/512/0/375.png" alt="play button"></button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,28 @@
+const rows = 100;
+const cols = 100;
+
+let cellsMatrix = createEmptyMatrix();
+
+
+createCellsElements();
+
+
+function createEmptyMatrix() {
+    return Array.from({ length: rows }, () => Array(cols).fill(false));
+}
+
+console.log(createEmptyMatrix())
+
+
+function createCellsElements() {
+    const gridContainer = document.querySelector('.grid');
+
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+            const cell = document.createElement('div');
+            cell.className = 'cell';
+            gridContainer.appendChild(cell);
+        }
+    }
+}
+
diff --git a/style.css b/style.css
@@ -0,0 +1,67 @@
+@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    flex-direction: column;
+    gap: 20px;
+    background: -webkit-linear-gradient(#e2e79b, #948fbe);
+    background-clip: border-box;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+h1 {
+    font-size: clamp(32px, 4vw, 48px);
+    font-family: 'Black Ops One', sans-serif;
+    background: -webkit-linear-gradient(#c96b6b, #5c4edb);
+    background-clip: border-box;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.grid {
+    padding: 5px;
+    display: grid;
+    grid-template-columns: repeat(100, 20px);
+    overflow: scroll;
+    width: 90%;
+    height: 50%;
+    background-color: white;
+}
+
+.cell {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #ccc;
+}
+
+.alive {
+    background-color: yellow;
+}
+
+#play {
+    background-color: transparent;
+    color: transparent;
+    border: none;
+}
+
+#play img {
+    width: 64px;
+    height: 64px;
+}
+
+
+#play img:hover {
+    cursor: pointer;
+    opacity: 80%;
+}