add finished movie seat booking

Author: solygambas

60-movie seat booking/script.js

@@ -0,0 +1,52 @@
+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;
+
+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();

README.md

@@ -65,7 +65,7 @@
 | 57  | [Parallax Background with SVG](https://github.com/solygambas/html-css-fifty-projects/tree/master/57-parallax%20background%20svg)      | [Live Demo](https://codepen.io/solygambas/full/vYyjjbz)  |
 | 58  | [3D Product Card](https://github.com/solygambas/html-css-fifty-projects/tree/master/58-3D%20product%20card)                           | [Live Demo](https://codepen.io/solygambas/full/wvoXWPq)  |
 | 59  | [Form Validator](https://github.com/solygambas/html-css-fifty-projects/tree/master/59-form%20validator)                               | [Live Demo](https://codepen.io/solygambas/full/MWbPJjb)  |
-| 60  | [Movie Seat Booking](https://github.com/solygambas/html-css-fifty-projects/tree/master/60-movie%20seat%20booking)                     | [Live Demo]()                                            |
+| 60  | [Movie Seat Booking](https://github.com/solygambas/html-css-fifty-projects/tree/master/60-movie%20seat%20booking)                     | [Live Demo](https://codepen.io/solygambas/full/xxRQEOy)  |
 
 Mainly based on 2 courses by Brad Traversy (2020):