script.js done

form-validator/index.html

@@ -40,5 +40,6 @@ <h2>Register With Us</h2>
     </div>
 
     <script src="script.js"></script>
+
   </body>
 </html>

index.html

@@ -137,8 +137,8 @@
         </label>
     </div>
     <div class="container">
-        <h1>Welcome to WebVanillaProjects</h1>
-        <p>Explore our collection of vanilla JavaScript projects. Click on a project to get started!</p>
+        <h1>Welcome to Web Vanilla Projects</h1>
+        <p>Explore a collection of vanilla frontend JavaScript projects. Click on a project to get started!</p>
         <div class="project-list">
             <a href="form-validator/index.html" class="project-button">Form Validator Project</a>
             <a href="movie-seat-booking/index.html" class="project-button">Movie Seat Booking Project</a>

movie-seat-booking/README.md

@@ -0,0 +1,14 @@
+## Movie Seat Booking
+
+Display movie choices and seats in a theater to select from in order to purchase tickets
+
+## Project Specifications
+
+- Display UI with movie select, screen, seats, legend & seat info
+- User can select a movie/price
+- User can select/deselect seats
+- User can not select occupied seats
+- Number of seats and price will update
+- Save seats, movie and price to local storage so that UI is still populated on refresh
+
+Design inspiration from [Dribbble](https://dribbble.com/shots/3628370-Movie-Seat-Booking)

movie-seat-booking/script.js

@@ -0,0 +1,73 @@
+const container = document.querySelector('.container'); //<div class="container">
+const seats = document.querySelectorAll('.row .seat:not(.occupied)'); //grab all the seats in a row that are not occupied
+const count = document.getElementById('count');
+const total = document.getElementById('total');
+const movieSelect = document.getElementById('movie');
+
+populateUI();
+
+//Initial selected ticket price 
+let ticketPrice = +movieSelect.value;
+
+//Save selected movie index and price
+function setMovieData(movieIndex, moviePrice){
+    localStorage.setItem('selectedMovieIndex', movieIndex);
+    localStorage.setItem('selectedMoviePrice', moviePrice);
+}
+
+//Copy selected seats into an array
+//Map through array and return a new array indexes
+function updateSelectedCount() {
+    const selectedSeats = document.querySelectorAll('.row .seat.selected');
+
+    //... copy the elements of an array
+    const seatsIndex = [...selectedSeats].map((seat)=>[...seats].indexOf(seat)); //return the index of the seats that are selected
+
+    localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex));
+
+    //get the lentgh of the node list
+    const selectedSeatsCount = selectedSeats.length;
+
+    count.innerText = selectedSeatsCount;
+    total.innerText = selectedSeatsCount * ticketPrice;
+}
+
+//Get data from localstorage and populate UI
+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;
+    }
+}
+
+//Movie select event
+movieSelect.addEventListener('change', e=> {
+    ticketPrice = +e.target.value;
+    setMovieData(e.target.selectedIndex, e.target.value);
+    updateSelectedCount();
+})
+
+//Seat click event
+//When I click on a seat I wanna change the class to selected
+//Note: function(e) is the same as (e)=>
+container.addEventListener('click', (e)=>{
+    if(e.target.classList.contains('seat') && !e.target.classList.contains('occupied')){
+        e.target.classList.toggle('selected');
+
+        updateSelectedCount();
+    }
+});
+
+//Initial count and total set
+updateSelectedCount();