diff --git a/131 - Othello Game/index.html b/131 - Othello Game/index.html
new file mode 100644
index 00000000..aa2692be
--- /dev/null
+++ b/131 - Othello Game/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Othello</title>
+ <link rel="stylesheet" href="style.css" />
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+ <div class="container">
+ <div id="blackScore">Black Score: 2</div>
+ <div id="othelloBoard">
+ <!--8th Rank-->
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <!--7th Rank-->
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <!--6th Rank-->
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <!--5th Rank-->
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <!--4th Rank-->
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <!--3th Rank-->
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <!--2nd Rank-->
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <!--1st Rank-->
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ <div class="square"></div>
+ </div>
+ <div id="whiteScore">White Score: 2</div>
+ </div>
+ <div id="controls">
+ <button id="restartButton">Restart Game</button>
+</div>
+ <div id="alert"></div>
+ <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/131 - Othello Game/script.js b/131 - Othello Game/script.js
new file mode 100644
index 00000000..a44e058e
--- /dev/null
+++ b/131 - Othello Game/script.js
@@ -0,0 +1,331 @@
+const whiteScore = document.getElementById("whiteScore");
+const blackScore = document.getElementById("blackScore");
+const othelloBoard = document.getElementById("othelloBoard");
+const restartButton = document.getElementById("restartButton");
+restartButton.addEventListener("click", restartGame);
+let squares = document.getElementsByClassName("square");
+let squaresToFlip = [];
+let isWhiteTurn = true;
+let whiteCount = 2;
+let blackCount = 2;
+let noLegalMove = false;
+
+setupBoard();
+
+function setupBoard() {
+ for (let i = 0; i < squares.length; i++) {
+ let row = 8 - Math.floor(i / 8);
+ let col = (i % 8) + 1;
+ let id = row * 10 + col;
+ squares[i].setAttribute("id", id);
+ squares[i].addEventListener("click", onSquareClick);
+ }
+
+ placeInitialPieces();
+
+ let legalSquares = getLegalSquares("white");
+ highlightLegalSquares(legalSquares);
+ whiteScore.classList.add("active");
+}
+
+function placeInitialPieces() {
+ const initialPieces = [
+ { id: "44", color: "white" },
+ { id: "55", color: "white" },
+ { id: "45", color: "black" },
+ { id: "54", color: "black" }
+ ];
+
+ initialPieces.forEach(piece => {
+ let square = document.getElementById(piece.id);
+ let pieceElement = createPiece(piece.color);
+ square.appendChild(pieceElement);
+ });
+}
+
+function createPiece(color) {
+ let piece = document.createElement("div");
+ piece.setAttribute("class", "piece " + color);
+ piece.setAttribute("color", color);
+ return piece;
+}
+
+
+function getLegalSquares(pieceColor) {
+ let legalSquares = [];
+ for (let i = 0; i < squares.length; i++) {
+ let row = 8 - Math.floor(i / 8);
+ let col = (i % 8) + 1;
+ let id = (row * 10 + col).toString();
+ let square = document.getElementById(id);
+ if (isSquareOccupied(square) != "blank") continue;
+
+ let directions = [
+ moveToEighthRow,
+ moveToFirstRow,
+ moveToEighthColumn,
+ moveToFirstColumn,
+ moveToEighthRowEighthColumn,
+ moveToEighthRowFirstColumn,
+ moveToFirstRowEighthColumn,
+ moveToFirstRowFirstColumn
+ ];
+
+ for (let direction of directions) {
+ let stopSquareContent = direction(id, pieceColor);
+ if (stopSquareContent != "blank" && squaresToFlip.length > 0) {
+ legalSquares.push(id);
+ break;
+ }
+ squaresToFlip.length = 0;
+ }
+ }
+ return legalSquares;
+}
+
+function isSquareOccupied(square) {
+ if (square.querySelector(".piece")) {
+ return square.querySelector(".piece").getAttribute("color");
+ } else {
+ return "blank";
+ }
+}
+
+function moveToDirection(startingSquareId, pieceColor, rowChange, colChange) {
+ const row = parseInt(startingSquareId.charAt(0));
+ const column = parseInt(startingSquareId.charAt(1));
+ let currentRow = row + rowChange;
+ let currentCol = column + colChange;
+ let squaresToFlipTemp = [];
+
+ while (currentRow >= 1 && currentRow <= 8 && currentCol >= 1 && currentCol <= 8) {
+ let currentSquareId = currentRow + "" + currentCol;
+ let currentSquare = document.getElementById(currentSquareId);
+ let squareContent = isSquareOccupied(currentSquare);
+ if (squareContent == pieceColor) {
+ squaresToFlip.push(...squaresToFlipTemp);
+ return squareContent;
+ }
+ if (squareContent == "blank") return squareContent;
+ squaresToFlipTemp.push(currentSquareId);
+ currentRow += rowChange;
+ currentCol += colChange;
+ }
+ return "blank";
+}
+
+function moveToEighthRow(startingSquareId, pieceColor) {
+ return moveToDirection(startingSquareId, pieceColor, 1, 0);
+ }
+function moveToFirstRow(startingSquareId, pieceColor) {
+ return moveToDirection(startingSquareId, pieceColor, -1, 0);
+ }
+function moveToEighthColumn(startingSquareId, pieceColor) {
+ return moveToDirection(startingSquareId, pieceColor, 0, 1);
+ }
+function moveToFirstColumn(startingSquareId, pieceColor) {
+ return moveToDirection(startingSquareId, pieceColor, 0, -1);
+ }
+function moveToEighthRowEighthColumn(startingSquareId, pieceColor) {
+ return moveToDirection(startingSquareId, pieceColor, 1, 1);
+ }
+function moveToEighthRowFirstColumn(startingSquareId, pieceColor) {
+ return moveToDirection(startingSquareId, pieceColor, 1, -1);
+ }
+function moveToFirstRowEighthColumn(startingSquareId, pieceColor) {
+ return moveToDirection(startingSquareId, pieceColor, -1, 1);
+ }
+function moveToFirstRowFirstColumn(startingSquareId, pieceColor) {
+ return moveToDirection(startingSquareId, pieceColor, -1, -1);
+ }
+
+function onSquareClick(e) {
+ let clickedSquare = e.target;
+ let pieceColor = isWhiteTurn ? "white" : "black";
+ let availableSquares = getLegalSquares(pieceColor);
+
+ if (!availableSquares.includes(clickedSquare.id)) return;
+
+ let piece = createPiece(pieceColor);
+ clickedSquare.appendChild(piece);
+ pieceColor == "white" ? whiteCount++ : blackCount++;
+ checkAndFlip(clickedSquare.id, pieceColor);
+ switchTurn();
+ checkEndGame();
+}
+
+function checkAndFlip(clickedSquareId, pieceColor) {
+ let directions = [
+ moveToEighthColumn,
+ moveToEighthRow,
+ moveToEighthRowEighthColumn,
+ moveToEighthRowFirstColumn,
+ moveToFirstColumn,
+ moveToFirstRow,
+ moveToFirstRowEighthColumn,
+ moveToFirstRowFirstColumn
+ ];
+ directions.forEach(direction => direction(clickedSquareId, pieceColor));
+ reversePieces(pieceColor);
+ squaresToFlip.length = 0;
+}
+
+function reversePieces(color) {
+ squaresToFlip.forEach((squareId) => {
+ let square = document.getElementById(squareId);
+ while (square.firstChild) {
+ square.firstChild.remove();
+ }
+ let piece = createPiece(color);
+ square.appendChild(piece);
+ piece.classList.add("flip");
+ color == "white" ? whiteCount++ && blackCount-- : whiteCount-- && blackCount++;
+ whiteScore.innerHTML = "White Score: " + whiteCount;
+ blackScore.innerHTML = "Black Score: " + blackCount;
+ });
+ squaresToFlip.length = 0;
+}
+
+function switchTurn() {
+ isWhiteTurn = !isWhiteTurn;
+ whiteScore.classList.toggle("active", isWhiteTurn);
+ blackScore.classList.toggle("active", !isWhiteTurn);
+ let pieceColor = isWhiteTurn ? "white" : "black";
+ let availableSquares = getLegalSquares(pieceColor);
+ highlightLegalSquares(availableSquares);
+ if (availableSquares.length == 0) {
+ isWhiteTurn = !isWhiteTurn;
+ whiteScore.classList.toggle("active", isWhiteTurn);
+ blackScore.classList.toggle("active", !isWhiteTurn);
+ pieceColor = isWhiteTurn ? "white" : "black";
+ availableSquares = getLegalSquares(pieceColor);
+ highlightLegalSquares(availableSquares);
+ if (availableSquares.length === 0) noLegalMove = true;
+ } else {
+ noLegalMove = false;
+ }
+}
+
+function highlightLegalSquares(legalSquares) {
+ clearLegalSquares();
+ legalSquares.forEach((square) => {
+ const squareElement = document.getElementById(square);
+ squareElement.classList.add("legal-square");
+ });
+}
+
+function clearLegalSquares() {
+ const legalSquares = document.querySelectorAll(".legal-square");
+ for (const square of legalSquares) {
+ square.classList.remove("legal-square");
+ }
+}
+
+function checkAndFlip(clickedSquareId, pieceColor) {
+ let directions = [
+ moveToEighthColumn,
+ moveToEighthRow,
+ moveToEighthRowEighthColumn,
+ moveToEighthRowFirstColumn,
+ moveToFirstColumn,
+ moveToFirstRow,
+ moveToFirstRowEighthColumn,
+ moveToFirstRowFirstColumn
+ ];
+ directions.forEach(direction => direction(clickedSquareId, pieceColor));
+ reversePieces(pieceColor);
+ squaresToFlip.length = 0;
+}
+
+
+function reversePieces(color) {
+ squaresToFlip.forEach(squareId => {
+ let square = document.getElementById(squareId);
+ while (square.firstChild) {
+ square.removeChild(square.firstChild);
+ }
+ let piece = createPiece(color);
+ square.appendChild(piece);
+ piece.classList.add("flip");
+ if (color === "white") {
+ whiteCount++;
+ blackCount--;
+ } else {
+ whiteCount--;
+ blackCount++;
+ }
+ });
+ whiteScore.innerHTML = "White Score: " + whiteCount;
+ blackScore.innerHTML = "Black Score: " + blackCount;
+}
+
+function switchTurn() {
+ isWhiteTurn = !isWhiteTurn;
+ whiteScore.classList.toggle("active",isWhiteTurn);
+ blackScore.classList.toggle("active",!isWhiteTurn);
+ pieceColor = isWhiteTurn ? "white" : "black";
+ availableSquares = getLegalSquares(pieceColor);
+ highlightLegalSquares(availableSquares);
+ if(availableSquares.length == 0) {
+ isWhiteTurn = !isWhiteTurn;
+ whiteScore.classList.toggle("active",isWhiteTurn);
+ blackScore.classList.toggle("active",!isWhiteTurn);
+ pieceColor = isWhiteTurn ? "white" : "black";
+ availableSquares = getLegalSquares(pieceColor);
+ highlightLegalSquares(availableSquares);
+ if(availableSquares.length===0) noLegalMove = true;
+ }
+}
+
+function checkEndGame() {
+ let message = "";
+ if(
+ !(
+ whiteCount+blackCount ==64 ||
+ whiteCount ==0 ||
+ blackCount ==0 ||
+ noLegalMove
+ )
+ )
+ return;
+ if(whiteCount>blackCount)message = "White Wins!";
+ if(whiteCount<blackCount)message = "Black Wins!";
+ if(whiteCount==blackCount)message = "Draw!";
+ showEndGameMessage(message);
+}
+
+function showEndGameMessage(message) {
+ const alert = document.getElementById("alert");
+ alert.style.display = "block";
+ othelloBoard.style.opacity = 0.5;
+ alert.innerHTML = message;
+}
+
+function restartGame() {
+
+ whiteCount = 2;
+ blackCount = 2;
+ isWhiteTurn = true;
+ noLegalMove = false;
+
+ whiteScore.innerHTML = "White Score: " + whiteCount;
+ blackScore.innerHTML = "Black Score: " + blackCount;
+
+ for (let i = 0; i < squares.length; i++) {
+ let square = squares[i];
+ while (square.firstChild) {
+ square.removeChild(square.firstChild);
+ }
+ }
+
+ placeInitialPieces();
+
+ let pieceColor = isWhiteTurn ? "white" : "black";
+ let legalSquares = getLegalSquares(pieceColor);
+ highlightLegalSquares(legalSquares);
+
+ const alert = document.getElementById("alert");
+ alert.style.display = "none";
+
+ othelloBoard.style.opacity = 1;
+}
diff --git a/131 - Othello Game/style.css b/131 - Othello Game/style.css
new file mode 100644
index 00000000..b401c976
--- /dev/null
+++ b/131 - Othello Game/style.css
@@ -0,0 +1,201 @@
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ margin: 0 auto;
+ background: linear-gradient(to bottom right, rgba(47,47,47,1) 20%, rgba(0,0,0,1) 70%);
+ flex-direction: column;
+ box-sizing: border-box;
+}
+
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 90vw;
+ height: 90vw;
+ max-width: 600px;
+ max-height: 600px;
+ flex-direction: column;
+ box-sizing: border-box;
+}
+
+#othelloBoard {
+ width: 90%;
+ height: 90%;
+ display: flex;
+ flex-wrap: wrap;
+ border: 10px solid transparent;
+ box-sizing: border-box;
+ border-color: #000000;
+}
+
+.square {
+ width: 12.5%;
+ height: 12.5%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ background-color: #0D776D;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ box-sizing: border-box;
+ border: 1px solid rgba(96, 149, 159, 0.739);
+}
+
+.piece {
+ width: 80%;
+ height: 80%;
+ border-radius: 50%;
+ position: relative;
+ overflow: hidden;
+ background-color: transparent;
+ cursor: pointer;
+}
+
+.piece.black {
+ background-color: #000000;
+}
+
+.piece.white {
+ background-color: #ffffff;
+}
+
+.legal-square {
+ position: relative;
+ cursor: pointer;
+}
+
+.legal-square::before {
+ content: "";
+ display: block;
+ width: 60%;
+ height: 60%;
+ border: 4px solid #e8c0edb3;
+ background-color: transparent;
+ border-radius: 50%;
+ top: 40%;
+ left: 40%;
+}
+
+.legal-square:hover {
+ opacity: 0.7;
+}
+
+@keyframes flip {
+ from {
+ transform: rotateY(0deg);
+ }
+ to {
+ transform: rotateY(180deg);
+ }
+}
+
+.flip {
+ animation: flip 0.5s linear;
+}
+
+#whiteScore, #blackScore {
+ display: flex;
+ width: 90%;
+ background-color: rgb(42, 42, 42);
+ color: white;
+ text-align: center;
+ height: 10%;
+ align-items: center;
+ justify-content: center;
+ border: 4px solid black;
+ box-sizing: border-box;
+ position: relative;
+ font-size: 25px;
+}
+
+#blackScore {
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+#whiteScore {
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+
+#whiteScore::after, #blackScore::after {
+ font-family: "FontAwesome";
+ content: "\f111";
+ color: #c3c3c3;
+ margin-left: 10px;
+ font-size: 15px;
+}
+
+#whiteScore.active::after, #blackScore.active::after {
+ font-family: "FontAwesome";
+ content: "\f111";
+ color: #3dff24;
+ margin-left: 10px;
+ font-size: 15px;
+}
+
+#alert {
+ position: fixed;
+ top: 44%;
+ left: 50%;
+ right: 50%;
+ bottom: 50%;
+ transform: translate(-50%, -50%);
+ color: #EAAC48;
+ width: 45vw;
+ text-align: center;
+ align-content: center;
+ justify-content: center;
+ font-size: 3em;
+ font-weight: bold;
+ z-index: 1000;
+ display: none;
+}
+
+#restartButton {
+ background-color: #41da49;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin-top: 20px;
+ cursor: pointer;
+ border: none;
+ border-radius: 5px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ transition: background-color 0.3s ease;
+}
+
+#restartButton:hover {
+ background-color: #4CAF50;
+}
+
+
+@media (min-width: 600px) {
+ .container {
+ width: 500px;
+ height: 500px;
+ }
+ #alert {
+ width: 200px;
+ font-size: 2em;
+ }
+}
+
+@media (min-width: 800px) {
+ .container {
+ width: 600px;
+ height: 600px;
+ }
+ #alert {
+ width: 500px;
+ font-size: 3em;
+ }
+}
diff --git a/30DaysOfJavaScript/assets/Taash Game.png b/30DaysOfJavaScript/assets/121 - Taash Game.png
similarity index 100%
rename from 30DaysOfJavaScript/assets/Taash Game.png
rename to 30DaysOfJavaScript/assets/121 - Taash Game.png
diff --git a/30DaysOfJavaScript/assets/131 - Othello.png b/30DaysOfJavaScript/assets/131 - Othello.png
new file mode 100644
index 00000000..144b0941
Binary files /dev/null and b/30DaysOfJavaScript/assets/131 - Othello.png differ
diff --git a/30DaysOfJavaScript/script.js b/30DaysOfJavaScript/script.js
index 3671f93b..13d1a5b8 100644
--- a/30DaysOfJavaScript/script.js
+++ b/30DaysOfJavaScript/script.js
@@ -191,7 +191,9 @@ function search_project() {
{ name: "Guess the Country", url: "./115 - Guess The Country/index.html"},
{ name: "2048 Game", url: "./124 - 2048 Game/index.html"},
{ name: "Flappy Bird Game", url: "./125 - Flappy Bird/index.html"},
- { name: "Largest EigenValue and EigenVector Calculator", url: "./128 - Eigen Value and Vector Calculator/index.html"}
+ { name: "Largest EigenValue and EigenVector Calculator", url: "./128 - Eigen Value and Vector Calculator/index.html"},
+ { name: "Othello Game", url: "./131 - Othello Game/index.html"},
+
];
// Filter suggestions based on input
diff --git a/README.md b/README.md
index a8bb40d8..23f348a1 100644
--- a/README.md
+++ b/README.md
@@ -169,9 +169,10 @@ Repo containing all the projects made in 30 Days while completing the <b>30 Days
| 114 | [Movie Guessing Game](https://30daysofjs.netlify.app/114%20-%20Movie%20-%20Guessing%20Game/) |
| 116 | [Shell Game](https://30daysofjs.netlify.app/116%20-%20Shell%20-%20Game/) |
| 124 | [2048 Game](https://30daysofjs.netlify.app/124%20-%202048%20Game/) |
-| 125 | [Flappy Bird Game](https://30daysofjs.netlify.app/125%20-%20Flappy%20-%20Bird%20Game/) |
+| 125 | [Flappy Bird Game](https://30daysofjs.netlify.app/125%20-%20flappy%20bird/) |
| 126 | [Arcade Game](https://30daysofjs.netlify.app/124%20-%Arcade48%20Game/) |
| 128 | [Largest EigenValue and EigenVector Calculator](https://30daysofjs.netlify.app/128%20-%20Eigen%20Value%20and%20Vector%20Calculator/) |
+| 131 | [Othello Game]() |
</td><td>
</td></tr></table>
diff --git a/index.html b/index.html
index d7bd00fd..992719f4 100644
--- a/index.html
+++ b/index.html
@@ -1883,21 +1883,19 @@ <h4>2048 Game</h4>
</p>
</div>
</div>
- <div class="maincard">
- <div class="card1">
- <img src="30DaysOfJavaScript/assets/catch-the-ball.png" alt="Project Image">
- </div>
- <div class="card">
- <h4>Catch The Ball</h4>
+
+ <div class="item">
+ <img src="30DaysOfJavaScript/assets/catch-the-ball.png" alt="Project Image">
+ <h4>Catch The Ball</h4>
+ <a target="_blank"
+ href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/117-CatchTheBall">
+ <i class="fa-brands fa-square-github"></i>
+ <a target="_blank" href="117-CatchTheBall/index.html"><i class="fa-solid fa-link"></i> </a>
+ </a>
+ <div class="description">
<p>Catch the ball on the rolling pad and beat your own highscore!</p>
- <a href="117-CatchTheBall"><button class="button">Live</button></a>
- <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/117-CatchTheBall" target="_blank"><button class="button">Github</button></a>
+ </div>
</div>
-</div>
- <div class="maincard">
- <div class="card1">
- <img src="30DaysOfJavaScript/assets/121 - Taash Game.png" alt="Taash Game">
-
<div class="item">
<img src="30DaysOfJavaScript/assets/125-Flappy Bird.png" alt="Flappy Bird Game">
@@ -1924,7 +1922,6 @@ <h4>Taash Game</h4>
<div class="description">
<p> Play a classic game of Taash (cards) against the computer.
</p>
-
</div>
</div>
@@ -1951,6 +1948,7 @@ <h4>Lights Out</h4>
<a target="_blank" href="122 - Lights Out/index.html"><i class="fa-solid fa-link"></i> </a>
</a>
</div>
+
<div class="item">
<img src="30DaysOfJavaScript\assets\128.png" alt="Largest EigenValue and EigenVector Calculator">
<h4>Largest EigenValue and EigenVector Calculator</h4>
@@ -1964,13 +1962,12 @@ <h4>Largest EigenValue and EigenVector Calculator</h4>
</p>
</div>
</div>
-</div>
<div class="item">
<img src="30DaysOfJavaScript/assets/125- Arcade Game.png" alt="Arcade Game">
<h4>Arcade Game</h4>
<a target="_blank"
- href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/111%20-%20Arcade%20Game%20">
+ href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/125-%20Arcade%20Game">
<i class="fa-brands fa-square-github"></i>
<a target="_blank" href="125- Arcade Game\index.html"><i class="fa-solid fa-link"></i> </a>
</a>
@@ -1979,20 +1976,38 @@ <h4>Arcade Game</h4>
A pure CSS game where the user controls a stack of blocks by clicking and dragging the mouse.
</p>
</div>
+ </div>
- <div class="maincard">
- <div class="card1">
- <img src="30DaysOfJavaScript/assets/123-Reverse Memory Game.png" alt="Reverse Memory Game">
+ <div class="item">
+ <img src="30DaysOfJavaScript/assets/131 - Othello.png" alt="Othello Game">
+ <h4>Othello Game</h4>
+ <a target="_blank"
+ href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/131%20-%20Othello%20Game">
+ <i class="fa-brands fa-square-github"></i>
+ <a target="_blank" href="131 - Othello Game/index.html"><i class="fa-solid fa-link"></i> </a>
+ </a>
+ <div class="description">
+ <p>
+ Othello is a strategic board game where players aim to flip their opponent's discs to their color.
+ </p>
</div>
- <div class="card">
+ </div>
+
+ <div class="item">
+ <img src="30DaysOfJavaScript/assets/123-Reverse Memory Game.png" alt="Reverse Memory Game">
<h4>Reverse Memory Game</h4>
+ <a target="_blank"
+ href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/123-Reverse%20Memory%20Game">
+ <i class="fa-brands fa-square-github"></i>
+ <a target="_blank" href="123-Reverse Memory Game/index.html"><i class="fa-solid fa-link"></i> </a>
+ </a>
+ <div class="description">
<p>
A fun and challenging memory game where you must recall a sequence of colors in reverse order.
</p>
- <a href="123-Reverse Memory Game/index.html" target="_blank"><button class="button">Live</button></a>
- <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/123-Reverse%20Memory%20Game" target="_blank"><button class="button">Github</button></a>
</div>
</div>
+
</div>
@@ -2007,7 +2022,7 @@ <h4>Reverse Memory Game</h4>
<button onclick="goToPage(2)">2</button>
<button onclick="goToPage(3)">3</button>
<button onclick="goToPage(4)">4</button>
- <!-- <button onclick="goToPage(5)">5</button> -->
+ <button onclick="goToPage(5)">5</button>
<!-- <button onclick="goToPage(6)">6</button> -->
<!-- <button onclick="goToPage(7)">7</button> -->
<button onclick="goToNextPage()" class="next_btn">Next →</button>