DhanushNehru · khushminder270 · Oct 16, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 19, 2023
diff --git a/Countdown-Timer/CountDown.html b/Countdown-Timer/CountDown.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
+  <link rel="stylesheet" href="style.css">
+  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+  <script src="countdown.js" defer></script>
+</head>
+<body>
+
+<div class="container">
+  <div class="card-container">
+    <div class="card" id="minutesCard">
+      <div class="flip">
+        <div class="front" id="minutesFront">05</div>
+        <div class="back" id="minutesBack">04</div>
+      </div>
+      <div class="label">Hours</div>
+    </div>
+    <div class="seperator">:</div>
+
+    <div class="card" id="hoursCard">
+      <div class="flip">
+        <div class="front" id="hoursFront">02</div>
+        <div class="back" id="hoursBack">01</div>
+      </div>
+      <div class="label">Minutes</div>
+    </div>
+     <div class="seperator">:</div>
+
+    <div class="card" id="secondsCard">
+      <div class="flip">
+        <div class="front" id="secondsFront">30</div>
+        <div class="back" id="secondsBack">29</div>
+      </div>
+      <div class="label">Seconds</div>
+    </div>
+  </div>
+
+  <div class="button-container">
+    <button id="startButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+      Start
+    </button>
+    <button id="pauseButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+      Pause
+    </button>
+    <button id="resetButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+      Reset
+    </button>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/Countdown-Timer/countdown.js b/Countdown-Timer/countdown.js
@@ -0,0 +1,67 @@
+ let minutesTarget = 5;  // Change the target minutes as needed
+  let hoursTarget = 2;    // Change the target hours as needed
+  let secondsTarget = 30;  // Change the target seconds as needed
+
+  function updateCards() {
+    updateCard('minutes', minutesTarget);
+    updateCard('hours', hoursTarget);
+    updateCard('seconds', secondsTarget);
+  }
+
+  function updateCard(card, value) {
+    const front = document.getElementById(`${card}Front`);
+    const back = document.getElementById(`${card}Back`);
+    back.textContent = value < 10 ? `0${value}` : value;
+
+    const cardElement = document.getElementById(`${card}Card`);
+    cardElement.classList.add('flipped');
+    setTimeout(() => {
+      front.textContent = back.textContent;
+      cardElement.classList.remove('flipped');
+    }, 500);
+  }
+
+  function updateCountdown() {
+    if (secondsTarget > 0) {
+      secondsTarget--;
+      updateCard('seconds', secondsTarget);
+    } else {
+      if (minutesTarget > 0) {
+        minutesTarget--;
+        secondsTarget = 59;
+        updateCard('minutes', minutesTarget);
+        updateCard('seconds', secondsTarget);
+      } else {
+        if (hoursTarget > 0) {
+          hoursTarget--;
+          minutesTarget = 59;
+          secondsTarget = 59;
+          updateCard('hours', hoursTarget);
+          updateCard('minutes', minutesTarget);
+          updateCard('seconds', secondsTarget);
+        }
+      }
+    }
+  }
+
+  let countdownInterval;
+
+  document.getElementById('startButton').addEventListener('click', () => {
+    clearInterval(countdownInterval);
+    countdownInterval = setInterval(updateCountdown, 1000);
+  });
+
+  document.getElementById('pauseButton').addEventListener('click', () => {
+    clearInterval(countdownInterval);
+  });
+
+  document.getElementById('resetButton').addEventListener('click', () => {
+    clearInterval(countdownInterval);
+    minutesTarget = 5;  // Reset to the initial target minutes
+    hoursTarget = 2;    // Reset to the initial target hours
+    secondsTarget = 30;  // Reset to the initial target seconds
+    updateCards();
+  });
+
+  // Initial update
+  updateCards();
diff --git a/Countdown-Timer/style.css b/Countdown-Timer/style.css
@@ -0,0 +1,71 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #f3f3f3;
+  font-family: Arial, sans-serif;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 500px;
+  padding: 20px;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+.card-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.card {
+  width: 130px;
+  height: 150px;
+  margin: 0 10px;
+  background-color: #2196F3;
+  color: white;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2em;
+  font-weight: bold;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  position: relative;
+}
+.label {
+  margin-top: 90px;
+}
+.seperator{
+  font-size: 55px;
+}
+.card .flip {
+  transition: transform 0.5s;
+  transform-style: preserve-3d;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  backface-visibility: hidden;
+}
+.card .flip .front, .card .flip .back {
+  position: absolute;
+  backface-visibility: hidden;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2em;
+  font-weight: bold;
+}
+.card .flip .back {
+  transform: rotateY(180deg);
+}
diff --git a/Movie Seat Reservation/reservation.html b/Movie Seat Reservation/reservation.html
@@ -0,0 +1,101 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="movie-container">
+      <label for="movie">Pick a movie:</label>
+      <select name="movie" id="movie">
+        <option value="10">Rush Hour</option>
+        <option value="12">Titanic</option>
+        <option value="8">Big Brother</option>
+      </select>
+    </div>
+    <ul class="showcase">
+      <li>
+        <div class="seat"></div>
+        <small>N/A</small>
+      </li>
+      <li>
+        <div class="seat selected"></div>
+        <small>Selected</small>
+      </li>
+      <li>
+        <div class="seat occupied"></div>
+        <small>Occupied</small>
+      </li>
+    </ul>
+    <div class="container">
+      <div class="screen"></div>
+      <div class="row">
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+      </div>
+      <div class="row">
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat occupied"></div>
+        <div class="seat occupied"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+      </div>
+      <div class="row">
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat occupied"></div>
+        <div class="seat occupied"></div>
+      </div>
+      <div class="row">
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+      </div>
+      <div class="row">
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat occupied"></div>
+        <div class="seat occupied"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+      </div>
+      <div class="row">
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat"></div>
+        <div class="seat occupied"></div>
+        <div class="seat occupied"></div>
+        <div class="seat occupied"></div>
+        <div class="seat"></div>
+      </div>
+    </div>
+    <p class="text">
+      You have selected <span id="count">0</span> seats for a price of $<span
+        id="total"
+        >0</span
+      >
+    </p>
+</body>
+</html>
+
diff --git a/Movie Seat Reservation/reservation.js b/Movie Seat Reservation/reservation.js
@@ -0,0 +1,53 @@
+const container = document.querySelector(".container");
+const seats = document.querySelectorAll(".row .seat:not(.occupied)");
+const count = document.getElementById("count");
+const total = document.getElementById("total");
+const movieSelect = document.getElementById("movie");
+let ticketPrice = +movieSelect.value;
+
+// Note: localStorage is not enabled in CodePen for security reasons.
+function populateUI() {
+  const selectedSeats = JSON.parse(localStorage.getItem("selectedSeats"));
+  if (selectedSeats !== null && selectedSeats.length > 0) {
+    seats.forEach((seat, index) => {
+      if (selectedSeats.indexOf(index) > -1) seat.classList.add("selected");
+    });
+  }
+  const selectedMovieIndex = localStorage.getItem("selectedMovieIndex");
+  if (selectedMovieIndex !== null)
+    movieSelect.selectedIndex = selectedMovieIndex;
+}
+
+function setMovieData(movieIndex, moviePrice) {
+  localStorage.setItem("selectedMovieIndex", movieIndex);
+  localStorage.setItem("selectedMoviePrice", moviePrice);
+}
+
+function updateSelectedCount() {
+  const selectedSeats = document.querySelectorAll(".row .seat.selected");
+  // const seatsIndex = [...selectedSeats].map((seat) => [...seats].indexOf(seat));
+  // localStorage.setItem("selectedSeats", JSON.stringify(seatsIndex));
+  const selectedSeatsCount = selectedSeats.length;
+  count.innerText = selectedSeatsCount;
+  total.innerText = selectedSeatsCount * ticketPrice;
+}
+
+movieSelect.addEventListener("change", (e) => {
+  ticketPrice = +e.target.value;
+  // setMovieData(e.target.selectedIndex, e.target.value);
+  updateSelectedCount();
+});
+
+container.addEventListener("click", (e) => {
+  if (
+    e.target.classList.contains("seat") &&
+    !e.target.classList.contains("occupied")
+  ) {
+    e.target.classList.toggle("selected");
+    updateSelectedCount();
+  }
+});
+
+// Init
+// populateUI();
+// updateSelectedCount();