Snake added.

index.css

@@ -115,6 +115,10 @@ body {
   object-fit: cover;
 }
 
+#snake-svg {
+  width: 40%;
+}
+
 .ending {
   margin-top: 1rem;
   margin-left: 1rem;

index.html

@@ -126,6 +126,24 @@ <h2>Chess</h2>
           </a>
         </div>
       </div>
+      <div class="grid JS">
+        <h2>Snake</h2>
+        <svg
+          id="snake-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+          <path
+            d="M0 112C0 85.5 21.5 64 48 64H160h80 46.5c36.8 0 71.2 18 92.1 48.2l113.5 164c13 18.7 19.9 41 19.9 63.8v12 16 48c0 17.7-14.3 32-32 32H384c-17.7 0-32-14.3-32-32V402.2L273.9 352H240 160 112c-26.5 0-48-21.5-48-48s21.5-48 48-48h48 80c26.5 0 48-21.5 48-48s-21.5-48-48-48H160 48c-26.5 0-48-21.5-48-48z"
+          />
+        </svg>
+        <div class="buttons">
+          <a href="./jsSnake/snake.html" target="_blank">
+            <button style="font-family: JetBrains Mono">Snake</button>
+          </a>
+        </div>
+      </div>
     </div>
     <span class="ending"
       >*This website is a work in progress and would be completed soon. While

jsChess/jsChess.css

@@ -29,6 +29,14 @@ body {
   background-color: green;
 }
 
+.color-gray {
+  background-color: gray;
+}
+
+.color-svg-white {
+  fill: white;
+}
+
 .piece {
   width: 100%;
   height: 100%;

jsChess/jsChess.js

@@ -20,36 +20,59 @@ for (let i = 0; i < chessPieces.length; i++) {
   square.classList.add('square');
   square.setAttribute('id', i);
   square.innerHTML = chessPieces[i];
+  const rowNumber = Math.floor((63 - i) / 8) + 1;
+  if (rowNumber % 2 == 0) {
+    i % 2 == 0
+      ? square.classList.add('color-gray')
+      : square.classList.add('color-green');
+  } else {
+    i % 2 == 0
+      ? square.classList.add('color-green')
+      : square.classList.add('color-gray');
+  }
+  // if (rowNumber % 2 == 0) {
+  //   square.classList.add('color-green');
+  // } else {
+  //   square.classList.add('color-gray');
+  // }
+
+  if (i >= 48) {
+    const svgElement = square.firstChild.firstChild;
+    svgElement.classList.add('color-svg-white');
+  }
   squares.push(square);
   chessBoard.appendChild(square);
 }
 
 // Now I want to add color black to every alternate square could be odd numbered or even numbered
-for (let i = 0; i < 8; i++) {
-  for (let j = 0; j < 8; j++) {
-    if ((i + j) % 2 === 0) {
-      squares[i * 8 + j].classList.add('color-green'); // Add color class for black squares
-    }
-  }
-}
+// for (let i = 0; i < 8; i++) {
+//   for (let j = 0; j < 8; j++) {
+//     if ((i + j) % 2 === 0) {
+//       squares[i * 8 + j].classList.add('color-green');
+//     } else {
+//       squares[i * 8 + j].classList.add('color-gray');
+//     }
+//   }
+// }
 
 // console.log({ squares });
 /* EVENT LISTENERS */
 squares.forEach((square) => {
   square.addEventListener('click', (e) => {
     // console.log(e.target.id);
-    console.log(e);
+    // console.log(e);
     switch (
       e.target.parentElement.id ||
       e.target.parentElement.parentElement.id
     ) {
       case 'pawn':
-        squares[Number(square.id) + 8].classList.toggle('highlighted');
-        squares[Number(square.id) + 16].classList.toggle('highlighted');
+        // squares[Number(square.id) + 8].classList.toggle('highlighted');
+        // squares[Number(square.id) + 16].classList.toggle('highlighted');
         break;
-
       default:
         break;
     }
   });
 });
+
+// console.log(squares);

jsSnake/snake.css

@@ -0,0 +1,54 @@
+html {
+  width: 100vw;
+  height: 100vh;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: 2rem;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+#canvas {
+  width: 320px;
+  height: 320px;
+  border: 5px solid black;
+  /* display: flex;
+  flex-wrap: wrap; */
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-rows: repeat(10, 1fr);
+}
+
+.canvas-cubes {
+  border: 1px solid blue;
+  /* width: calc(100% / 10); */
+  /* height: calc(100% / 10); */
+  box-sizing: border-box;
+}
+
+#controls-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 0.5rem;
+  /* border: 3px solid black; */
+}
+
+#controls-column #up,
+#down,
+#controls-row #left,
+#right {
+  width: 2rem;
+  aspect-ratio: 1/1;
+}
+
+#controls-row {
+  display: flex;
+  column-gap: 3rem;
+}

jsSnake/snake.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="../static/jsSnake_favicon.svg" />
+    <link rel="stylesheet" href="./snake.css" />
+    <title>Snake</title>
+  </head>
+  <body>
+    <h2 id="score-heading">Score</h2>
+    <span id="score-result">0</span>
+    <div id="canvas"></div>
+    <div id="controls">
+      <div id="controls-column">
+        <button id="up">↑</button>
+        <div id="controls-row">
+          <button id="left">←</button>
+          <button id="right">→</button>
+        </div>
+        <button id="down">↓</button>
+      </div>
+    </div>
+    <script src="./snake.js"></script>
+  </body>
+</html>

jsSnake/snake.js

@@ -0,0 +1,11 @@
+let canvas = document.getElementById('canvas');
+
+for (let i = 0; i < 100; i++) {
+  let canvasCube = document.createElement('div');
+  canvasCube.classList.add('canvas-cubes');
+  canvasCube.setAttribute('id', i);
+  canvasCube.textContent = i;
+  canvas.appendChild(canvasCube);
+}
+
+/* Now I am thinking to add a sprite class, which has a draw(),undraw(),add() methods */