Merge pull request #28 from Gavinduachintha/main

Tic Tac Toe
2025-02-22 12:16:17 +05:30
parent 48f917b33f 78f1253dc9
commit 0746c6c99e
10 changed files with 391 additions and 0 deletions
--- a/Toe/app.js
+++ b/Toe/app.js
@@ -0,0 +1,81 @@
+const boardState = Array(9).fill(null); // Initialize board state with null values
+const cells = document.querySelectorAll(".cell"); // Get all cell elements
+let currentPlayer = "X"; // Start with player X
+let message = document.getElementById("winner-message"); // Get the winner message element
+let reset = document.getElementById("reset-button"); // Get the reset button element
+
+// Define all possible winning combinations
+const winningCombinations = [
+  [0, 1, 2], // Top row
+  [3, 4, 5], // Middle row
+  [6, 7, 8], // Bottom row
+  [0, 3, 6], // Left column
+  [1, 4, 7], // Middle column
+  [2, 5, 8], // Right column
+  [0, 4, 8], // Diagonal top-left to bottom-right
+  [2, 4, 6], // Diagonal top-right to bottom-left
+];
+
+// Add event listener to the reset button
+reset.addEventListener("click", function () {
+  // Reset the board state
+  boardState.fill(null);
+
+  // Clear the text content of all cells
+  cells.forEach(function (cell) {
+    cell.textContent = "";
+  });
+
+  // Reset the current player to X
+  currentPlayer = "X";
+
+  // Clear the winner message
+  message.textContent = "";
+
+  // Re-enable pointer events for all cells
+  cells.forEach((cell) => (cell.style.pointerEvents = "auto"));
+});
+
+// Function to check if the current player has won
+function checkWins(boardState, player) {
+  return winningCombinations.some((combination) => {
+    return combination.every((index) => boardState[index] === player);
+  });
+}
+
+// Add event listeners to all cells
+cells.forEach(function (cell) {
+  cell.addEventListener("click", function () {
+    const cellId = parseInt(cell.id) - 1; // Get the cell index (0-8)
+
+    // Check if the cell is empty
+    if (!boardState[cellId]) {
+      // Update the board state and cell text
+      boardState[cellId] = currentPlayer;
+      cell.textContent = currentPlayer;
+
+      // Check if the current player has won
+      if (checkWins(boardState, currentPlayer)) {
+        message.textContent = `${currentPlayer} wins!`; // Display winner message
+        alert(`${currentPlayer} wins!`);
+
+        // Disable further moves after the game ends
+        cells.forEach((cell) => (cell.style.pointerEvents = "none"));
+        return;
+      }
+
+      // Check if the game is a draw
+      if (!boardState.includes(null)) {
+        message.textContent = "It's a draw!"; // Display draw message
+        alert("It's a draw!");
+
+        // Disable further moves after the game ends
+        cells.forEach((cell) => (cell.style.pointerEvents = "none"));
+        return;
+      }
+
+      // Switch to the other player
+      currentPlayer = currentPlayer === "X" ? "O" : "X";
+    }
+  });
+});
--- a/Toe/index.html
+++ b/Toe/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tic Tac Toe</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="heading">
+      <p>Tic Tac Toe</p>
+      <p id="winner-message"></p>
+    </div>
+    <div class="main-box">
+      <div class="cell" id="1"><p></p></div>
+      <div class="cell" id="2"><p></p></div>
+      <div class="cell" id="3"><p></p></div>
+      <div class="cell" id="4"><p></p></div>
+      <div class="cell" id="5"><p></p></div>
+      <div class="cell" id="6"><p></p></div>
+      <div class="cell" id="7"><p></p></div>
+      <div class="cell" id="8"><p></p></div>
+      <div class="cell" id="9"><p></p></div>
+    </div>
+    <div class="reset-btn">
+      <button class="reset" id="reset-button">Reset</button>
+    </div>
+  </body>
+  <script src="app.js"></script>
+</html>
--- a/Toe/styles.css
+++ b/Toe/styles.css
@@ -0,0 +1,106 @@
+@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500&family=Roboto:wght@400;500&display=swap");
+
+body {
+  font-family: "Kanit", sans-serif;
+  background-image: linear-gradient(
+    to right bottom,
+    #000b58,
+    #002960,
+    #05295f,
+    #161b59,
+    #240750
+  );
+  display: flex;
+  flex-direction: column;
+  font-size: 30px;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+  color: #ffffff;
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+p {
+  font-size: 14px;
+  margin: 5px 0;
+  color: #ffffff;
+}
+
+.main-box {
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  gap: 10px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.cell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #a888b5;
+  color: #ffffff;
+  border: none;
+  height: 100%;
+  width: 100%;
+  border-radius: 10px;
+  font-size: 40px;
+  font-weight: 500;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+  transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.1);
+}
+.cell:hover {
+  background-color: #8174a0;
+  transform: scale(1.05);
+  box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.15);
+}
+
+p {
+  font-size: 50px;
+}
+
+.reset-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Centers the button horizontally */
+  justify-content: center;
+  width: 100%; /* Ensures flexibility */
+  margin: 10px 0;
+}
+
+button.reset {
+  font-family: "Roboto", sans-serif;
+  padding: 10px 20px;
+  width: 100%; /* Makes button flexible */
+  max-width: 200px; /* Caps the maximum width */
+  border-radius: 15px;
+  font-size: 18px;
+  font-weight: 500;
+  text-align: center;
+  border: none;
+  color: #ffffff;
+  background-color: #8174a0;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+button.reset:hover {
+  background-color: #a692d5;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
+}
--- a/Timer/app.js
+++ b/Timer/app.js
@@ -0,0 +1,49 @@
+const timer = document.getElementById("timer");
+const quote = document.getElementById("quote");
+
+let time = 1500;
+let interval = null;
+let running = false;
+
+function updateTime(time) {
+  const minutes = String(Math.floor(time / 60)).padStart(2, "0");
+  const seconds = String(time % 60).padStart(2, "0");
+  timer.textContent = `${minutes}:${seconds}`;
+}
+
+function pauseTimer() {
+  if (!running) return;
+  clearInterval(interval);
+  running = false;
+  quote.textContent = "paused";
+}
+
+function startTimer() {
+  if (running) return; //Prevent multiple intervals
+  running = true;
+  quote.textContent = "Keep Going !";
+  interval = setInterval(function () {
+    if (time > 0) {
+      time--;
+      updateTime(time);
+    } else {
+      clearInterval(interval);
+      running = false;
+      quote.textContent = "Time's Up!";
+    }
+  }, 1000);
+}
+
+function resetTime() {
+  clearInterval(interval);
+  running = false;
+  time = 1500;
+  quote.textContent = "Hi !";
+
+  updateTime(time);
+}
+
+document.getElementById("start").addEventListener("click", startTimer);
+document.getElementById("pause").addEventListener("click", pauseTimer);
+document.getElementById("reset").addEventListener("click", resetTime);
+updateTime(time);
--- a/Timer/assets/background.png
+++ b/Timer/assets/background.png
--- a/Timer/assets/pause.png
+++ b/Timer/assets/pause.png
--- a/Timer/assets/play-button-arrowhead.png
+++ b/Timer/assets/play-button-arrowhead.png
--- a/Timer/assets/redo.png
+++ b/Timer/assets/redo.png
--- a/Timer/index.html
+++ b/Timer/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pomodoro Timer</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="main-container">
+      <div class="quote" id="quote">Hi</div>
+      <div class="timer" id="timer">25:00</div>
+
+      <div class="buttons">
+        <button type="submit" class="selector" id="start"><img src="assets/play-button-arrowhead.png" alt="" class="icons"></button>
+        <button type="submit" class="selector" id="pause"><img src="assets/pause.png" alt=""class="icons"></button>
+        <button type="submit" class="selector" id="reset"><img src="assets/redo.png" alt=""class="icons"></button>
+      </div>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
--- a/Timer/styles.css
+++ b/Timer/styles.css
@@ -0,0 +1,102 @@
+@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playwrite+AU+SA:wght@100..400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+* {
+  justify-content: center;
+  align-items: center;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: "Host Grotesk", serif;
+  overflow: hidden;
+  background-image: url("assets/background.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  backdrop-filter: blur(10px);
+}
+
+.main-container {
+  display: flex;
+  margin: 50px;
+  padding: 20px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  height: 600px;
+  width: 1000px;
+  box-shadow: 5px 5px 5px 1px rgba(29, 28, 28, 0.5);
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  border: none;
+  border-radius: 20px;
+  gap: 50px;
+}
+
+.timer {
+  display: flex;
+  padding: 20px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 150px;
+  width: 90%;
+  border-radius: 20px;
+  font-size: 300px;
+  color: #fff;
+}
+
+.quote {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  width: 90%;
+  border-radius: 20px;
+  font-size: 70px;
+  color: #fff;
+}
+
+.selector {
+  display: flex;
+  gap: 10px;
+  outline: none;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+
+.buttons {
+  display: flex;
+  width: 200px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+}
+
+.icons{
+  width: 15px;
+}
+
+button {
+  width: 50px;
+  border-radius: 50%;
+  border: none;
+  height: 50px;
+  font-size: 25px;
+  font-weight: 0;
+  background-color: rgb(249, 249, 249);
+  color: white;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
+}
+
+button:hover {
+  background-color: #c7bdbd;
+  transform: scale(1.05);
+}