diff --git a/Movie Booking/asset/c1.png b/Movie Booking/asset/c1.png new file mode 100644 index 00000000..aec53350 Binary files /dev/null and b/Movie Booking/asset/c1.png differ diff --git a/Movie Booking/asset/pop.png b/Movie Booking/asset/pop.png new file mode 100644 index 00000000..d4d40639 Binary files /dev/null and b/Movie Booking/asset/pop.png differ diff --git a/Movie Booking/index.html b/Movie Booking/index.html new file mode 100644 index 00000000..396816c2 --- /dev/null +++ b/Movie Booking/index.html @@ -0,0 +1,191 @@ + + + + + + + Movie Booking + + + + +
+
+ +
+
+
+
    +
  • +
    + Available +
    • +
  • +
    + Selected +
    • +
  • +
    + Occupied +
    • +
+
+ +
+
+ SCREEN +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + +
+
+ +
+
+

MOVIE NAME

+

Tom and Jerry

+
+
+

MOVIE PRICE

+

$ 7

+
+
+

Date

+

Wed , 31th march

+ +
+
+
+
+
+

SELECTED SEATS

+
+ No Seat Selected +
+
+ + +
+
+

0 Seats(s)

+
+
+

$ 0

+
+
+ + +
+
+ +
+
+ +
+
+
+
+
+
+
+ + + diff --git a/Movie Booking/script.js b/Movie Booking/script.js new file mode 100644 index 00000000..f2891b54 --- /dev/null +++ b/Movie Booking/script.js @@ -0,0 +1,197 @@ +const moviesList = [ + { movieName: "Tom and Jerry 2021", price: 7 }, + { movieName: "Master", price: 5 }, + { movieName: "Justice League", price: 4 }, +]; + +const selectMovieEl = document.getElementById("selectMovie"); + +const allSeatCont = document.querySelectorAll("#seatCont .seat"); + +const selectedSeatsHolderEl = document.getElementById("selectedSeatsHolder"); + +const moviePriceEl = document.getElementById("moviePrice"); + +const cancelBtnEL = document.getElementById("cancelBtn"); + +const proceedBtnEl = document.getElementById("proceedBtn"); + +moviesList.forEach((movie) => { + const optionEl = document.createElement("option"); + optionEl.innerHTML = `${movie.movieName} $${movie.price}`; + selectMovieEl.appendChild(optionEl); +}); + +let moviePrice = 7; +let currentMovieName = `Tom and Jerry 2021`; + +selectMovieEl.addEventListener("input", (e) => { + let movieName = e.target.value.split(""); + let dollarIndex = movieName.indexOf("$"); + let movie = movieName.splice(0, dollarIndex - 1).join(""); + currentMovieName = movie; + moviePrice = JSON.parse(movieName.splice(2, dollarIndex).join("")); + + updatMovieName(movie, moviePrice); + updatePrice(moviePrice, takenSeats.length); +}); + +let initialSeatValue = 0; +allSeatCont.forEach((seat) => { + const attr = document.createAttribute("data-seatid"); + attr.value = ++initialSeatValue; + seat.setAttributeNode(attr); +}); + +const seatContEl = document.querySelectorAll("#seatCont .seat:not(.occupied)"); + +let takenSeats = []; + +seatContEl.forEach((seat) => { + seat.addEventListener("click", (e) => { + let isSelected = seat.classList.contains("selected"); + + let seatId = JSON.parse(seat.dataset.seatid); + + if (!isSelected) { + seat.classList.add("selected"); + takenSeats.push(seatId); + takenSeats = [...new Set(takenSeats)]; + } else if (isSelected) { + seat.classList.remove("selected"); + + takenSeats = takenSeats.filter((seat) => { + if (seat !== seatId) { + return seat; + } + }); + } + updateSeats(); + updatePrice(moviePrice, takenSeats.length); + }); +}); + +function updateSeats() { + selectedSeatsHolderEl.innerHTML = ``; + + takenSeats.forEach((seat) => { + const seatHolder = document.createElement("div"); + seatHolder.classList.add("selectedSeat"); + selectedSeatsHolderEl.appendChild(seatHolder); + + seatHolder.innerHTML = seat; + }); + + if (!takenSeats.length) { + const spanEl = document.createElement("span"); + spanEl.classList.add("noSelected"); + spanEl.innerHTML = `NO SEAT SELECTED`; + selectedSeatsHolderEl.appendChild(spanEl); + } + + seatCount(); +} + +function seatCount() { + const numberOfSeatEl = document.getElementById("numberOfSeat"); + numberOfSeatEl.innerHTML = takenSeats.length; +} + +function updatMovieName(movieName, price) { + const movieNameEl = document.getElementById("movieName"); + const moviePriceEl = document.getElementById("moviePrice"); + movieNameEl.innerHTML = movieName; + moviePriceEl.innerHTML = `$ ${price}`; +} + +function updatePrice(price, seats) { + const totalPriceEl = document.getElementById("totalPrice"); + let total = seats * price; + totalPriceEl.innerHTML = `$ ${total}`; +} + +cancelBtn.addEventListener("click", (e) => { + cancelSeats(); +}); + +function cancelSeats() { + takenSeats = []; + seatContEl.forEach((seat) => { + seat.classList.remove("selected"); + }); + updatePrice(0, 0); + updateSeats(); +} + +function successModal(movieNameIn, totalPrice, successTrue) { + const bodyEl = document.querySelector("body"); + + const sectionEl = document.getElementById("section"); + + const overlay = document.createElement("div"); + + overlay.classList.add("overlay"); + + sectionEl.appendChild(overlay); + + const successModal = document.createElement("div"); + successModal.classList.add("successModal"); + const modalTop = document.createElement("div"); + modalTop.classList.add("modalTop"); + const popImg = document.createElement("img"); + popImg.src = "./asset/pop.png"; + modalTop.appendChild(popImg); + + successModal.appendChild(modalTop); + + // Modal Center + + const modalCenter = document.createElement("div"); + const modalHeading = document.createElement("h1"); + modalCenter.classList.add("modalCenter"); + modalHeading.innerHTML = `Ticked Booked Successfully`; + modalCenter.appendChild(modalHeading); + const modalPara = document.createElement("p"); + modalCenter.appendChild(modalPara); + modalPara.innerHTML = `${movieNameIn} movie ticket have been booked successfully.`; + successModal.appendChild(modalCenter); + + // modal Bottom + + const modalBottom = document.createElement("div"); + modalBottom.classList.add("modalBottom"); + const successBtn = document.createElement("button"); + + successBtn.innerHTML = `Ok Got It!`; + modalBottom.appendChild(successBtn); + successModal.appendChild(modalBottom); + + successBtn.addEventListener("click", (e) => { + removeModal(); + }); + + window.addEventListener("click", (e) => { + if (e.target.classList.contains("overlay")) { + removeModal(); + } + }); + + function removeModal() { + overlay.remove(); + successModal.remove(); + bodyEl.classList.remove("modal-active"); + cancelSeats(); + } + + sectionEl.appendChild(successModal); +} + +proceedBtnEl.addEventListener("click", (e) => { + if (takenSeats.length) { + const bodyEl = document.querySelector("body"); + bodyEl.classList.add("modal-active"); + successModal(currentMovieName, moviePrice * takenSeats.length); + } else { + alert("Oops no seat Selected"); + } +}); diff --git a/Movie Booking/style.css b/Movie Booking/style.css new file mode 100644 index 00000000..ee866ad6 --- /dev/null +++ b/Movie Booking/style.css @@ -0,0 +1,422 @@ +* { + padding: 0%; + margin: 0%; + box-sizing: border-box; + font-family: sans-serif; +} +.leftCont { + width: 100%; + background-color: aliceblue; +} + +.leftMainCont { + width: 100%; +} +body { + background-color: #f1f1f1; +} +.container .legendContainer { + background-color: #f1f1f1; + display: flex; + padding: 1rem; + width: 100%; +} + +.container .legendContainer ul { + width: 100%; + display: flex; + align-items: center; + justify-content: space-evenly; + list-style: none; + max-width: 600px; + margin: 0 auto; + user-select: none; +} +.container .legendContainer ul li { + display: flex; + align-items: center; + justify-content: center; +} +.container .legendContainer ul li small { + color: #bdbdbd; + font-size: 12px; + letter-spacing: 1px; + margin-bottom: 4px; +} + +.container .leftMainCont .seat { + height: 25px; + width: 30px; + border: 1px solid #bdbdbd; + border-radius: 2px 2px 4px 4px; + margin: 10px; + margin-bottom: 0.8rem; + position: relative; + cursor: pointer; + background-color: #fff; + transition: 0.3s ease background-color; +} +.container .leftMainCont .seat::after { + content: ""; + height: 23px; + width: 20px; + border: 1px solid #bdbdbd; + position: absolute; + left: 50%; + top: 29%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 2px 2px; + transition: 0.3s ease background-color; +} + +.container .leftMainCont .seat:hover, +.container .leftMainCont .seat:hover::after { + background-color: #e6e6e6; +} + +.container .legendContainer .seat { + cursor: default; + margin-bottom: 10px; +} +.container .legendContainer .seat:hover, +.container .legendContainer .seat:hover::after { + background-color: #fff; +} +.container .leftMainCont .seat.occupied, +.container .leftMainCont .seat.occupied::after { + background-color: lightgray; +} +.container .leftMainCont .seat.selected, +.container .leftMainCont .seat.selected::after { + background-color: rgb(168, 245, 168); + border-color: rgba(0, 190, 0, 0.336); +} + +.container .mainSeatCont { + background-color: aliceblue; + height: 100%; + padding: 3rem 1rem; + position: relative; + min-width: 100%; + overflow-x: auto; + margin: 0% auto; +} + +.container .mainSeatCont .seatCont { + display: flex; + align-items: center; + justify-content: center; +} +.container .mainSeatCont .seatCont .seatRowCont { + display: flex; +} +.container .mainSeatCont .seatCont .seatRowCont2 { + margin: 0 1.5rem; +} +.container .leftMainCont .screen { + height: 15px; + width: 65%; + background-color: #686868; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + justify-content: center; + border-radius: 0 0 8px 8px; + max-width: 460px; + user-select: none; + margin: 0 auto; +} +.container .leftMainCont .screen small { + color: #bdbdbd; + font-size: 11px; + letter-spacing: 0.3rem; +} +/* */ +.container .confirmCont { + background-color: #f1f1f1; + display: flex; + flex-direction: column; + padding: 2rem; +} +.container .confirmCont .rightTopCont { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + border-bottom: 1px solid #c4c4c4; +} +.container .confirmCont .movieInfo div { + margin-bottom: 0.8rem; +} +.container .confirmCont .movieInfo p { + color: #bdbdbd; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 12px; + margin-bottom: 0.2rem; +} +.container .confirmCont .movieInfo .dateOn { + color: #414141; + font-size: 14px; + margin-top: 0.4rem; +} +.container .confirmCont .selectMovie select { + padding: 0.375rem 0.75rem; + border: 1px solid #c4c4c4; + outline: none; + border-radius: 3px; + color: #686868; + font-family: inherit; + margin-top: 0.4rem; + background-color: transparent; +} +.container .confirmCont .movieInfo h1 { + color: #414141; + margin-top: 0.2rem; +} + +.container .confirmCont .rightBottomCont .selectedSeatCont { + border-bottom: 1px solid #c4c4c4; + padding: 1rem 0; +} +.container .confirmCont .rightBottomCont .selectedSeatCont p { + font-size: 12px; + color: #bdbdbd; +} +.container .rightBottomCont .noSelected { + text-align: center; + color: crimson; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 12px; + color: #bdbdbd; + text-transform: uppercase; + width: 200px; +} +.container .confirmCont .rightBottomCont .selectedSeatCont .selectedSeat { + border: 1px solid lightgreen; + color: lightgreen; + padding: 0.375rem 1.8rem; + border-radius: 3px; + user-select: none; + min-width: 77.3px; + max-width: 77.3px; + display: flex; + align-items: center; + justify-content: center; + float: left; +} +.container .confirmCont .rightBottomCont .selectedSeatCont .selectedSeat:hover { + background-color: rgba(144, 238, 144, 0.151); + transition: 0.3s ease background-color; +} +.container + .confirmCont + .rightBottomCont + .selectedSeatCont + .selectedSeatsHolder { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(67.3px, 67px)); + grid-column-gap: 1rem; + grid-row-gap: 0.5rem; + margin-top: 0.8rem; + grid-auto-columns: auto; + position: relative; +} +.container .confirmCont .rightBottomCont .numberOfSeatsCont { + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; + padding: 1.5rem 1rem; + user-select: none; +} +.container .confirmCont .rightBottomCont .numberOfSeatsCont .numberOfSeat p { + color: #414141; + font-size: 13px; +} +.container .confirmCont .rightBottomCont .numberOfSeatsCont .priceCont { + color: crimson; +} +.container .confirmCont .rightBottomCont .buttonCont { + display: flex; + justify-content: space-between; + padding: 1rem; +} +.container .confirmCont .rightBottomCont .buttonCont button { + padding: 0.75rem 2rem; + cursor: pointer; + border: none; + outline: none; + background-color: transparent; + color: #fff; + border-radius: 4px; +} +.container .confirmCont .rightBottomCont .buttonCont .cancelBtn button { + background-color: crimson; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; +} +.container .confirmCont .rightBottomCont .buttonCont .cancelBtn button:hover { + background-color: rgb(204, 0, 41); + transition: 0.3s ease background-color; +} +.container .confirmCont .rightBottomCont .buttonCont .proceedBtnEl button { + background-color: lightgreen; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; + transition: 0.3s ease background-color; +} +.container + .confirmCont + .rightBottomCont + .buttonCont + .proceedBtnEl + button:hover { + background-color: rgba(84, 216, 84, 0.808); +} + +/* Success Modal */ +body.modal-active { + overflow: hidden; + padding-right: 17px; +} +.overlay { + position: fixed; + height: 100vh; + width: 100%; + background-color: #000; + top: 0%; + left: 0%; + opacity: 0.3; + display: none; +} +body.modal-active .overlay { + display: block; +} + +.successModal { + width: 80%; + max-width: 450px; + background-color: #fff; + position: fixed; + top: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + border-radius: 0.4rem; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + padding: 1rem; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-image: url(./asset/c1.png); + background-size: 140%; + background-position: top center; + user-select: none; + z-index: 11; + animation: 1s ease modalAnimation; +} +.successModal .modalTop { + padding: 1rem; +} +.successModal .modalTop img { + width: 100px; +} +.successModal .modalCenter { + padding: 0.5rem 2.5rem; +} +.successModal .modalCenter h1 { + color: #414141; +} +.successModal .modalCenter p { + color: #686868; + margin-top: 0.5rem; +} +.successModal .modalBottom { + margin-top: 1rem; +} +.successModal .modalBottom button { + background-color: lightgreen; + border: none; + outline: none; + padding: 0.75rem 1.3rem; + border-radius: 0.2rem; + cursor: pointer; + color: #fff; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; + transition: 0.3s ease background-color; +} +.successModal .modalBottom button:hover { + background-color: rgba(84, 216, 84, 0.808); +} +/* Desktop */ + +@media (min-width: 800px) { + .container { + display: flex; + } + .container .confirmCont { + min-width: 300px; + max-width: 300px; + float: right; + padding: 2rem; + min-height: 100vh; + } + .container .legendContainer { + justify-content: start; + align-items: flex-start; + } + .container .legendContainer ul { + margin: unset; + } + .container .confirmCont .rightBottomCont .buttonCont { + flex-direction: column-reverse; + } + .container .confirmCont .rightBottomCont .buttonCont button { + width: 100%; + padding: 0.8rem 0.75rem; + margin-bottom: 0.8rem; + } +} + +@media (max-width: 430px) { + .container .mainSeatCont { + padding-left: 0; + } + .container .mainSeatCont .seatCont { + display: flex; + min-width: 500px; + align-items: center; + } + .container .mainSeatCont .screen { + min-width: 400px; + transform: translateX(-30%); + } + .successModal .modalCenter { + padding: 0.4rem; + } + .successModal .modalCenter h1 { + font-size: 17px; + } + .successModal .modalCenter p { + margin-top: 0.3rem; + } + body.modal-active { + padding-right: 0px; + } +} + +@keyframes modalAnimation { + 0% { + margin-top: -5px; + } + 100% { + margin-top: 0px; + } +}