Skip to content

JS movie seat booking #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
f3d0t wants to merge 1 commit into
base: main
Choose a base branch
from
Open

JS movie seat booking #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions submissions/f3d0t/js-cinema/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
const SEAT_PRICE = 2;
const ACTIVE_SEATS = [];

const FORM_BOOKING = document.querySelector(".form__booking");
const FORM_BUTTON = document.querySelector(".form__button");
const FORM_TICKETS_COUNT = document.querySelector(".form__tickets-count");
const FORM_TICKETS_COST = document.querySelector(".form__tickets-cost");
const TICKETS_CONTAINER = document.querySelector(".tickets_cont");
const MODAL_TICKETS_CONTAINER = document.querySelector(".modal__tickets_cont");
const MODAL_WRAPPER = document.querySelector(".modal_wrapper");
const MODAL_FORM = document.querySelector(".modal");
const MODAL_COUNT = document.querySelector(".modal__count");
const MODAL_COST = document.querySelector(".modal__cost");
const MODAL_CLOSE = document.querySelector(".modal__close");
const MODAL_BUTTON = document.querySelector(".modal__button");

const addSeat = (seatsArray, row, seat) => {
seatsArray.push(`${row}-${seat}`);
};

const deleteSeat = (seatsArray, row, seat) => {
seatsArray.splice(seatsArray.indexOf(`${row}-${seat}`), 1);
};

const updateForm = (formButton, formCount, formCost, seatsArray, seatPrice) => {
if (seatsArray.length > 0) {
formCount.textContent = seatsArray.length + " ticket";
if (seatsArray.length > 1) formCount.textContent += "s";
formCost.textContent = " for " + seatsArray.length * seatPrice + "$";
formButton.disabled = false;
} else {
formCount.textContent = "";
formCost.textContent = "Please, select seats";
formButton.disabled = true;
}
};

const getTicketHtml = ([row, seat], price) => `
<div class="booked_tickets__ticket">
<span class="ticket__row">Row: ${row}</span>
<span class="ticket__seat">Seat: ${seat}</span>
<span class="ticket__price">Price: ${price}$</span>
</div>`;

const getTicketsHtml = (seatsArray, seatPrice) => {
if (seatsArray.length > 0) {
return seatsArray.map((bookedSeat) => getTicketHtml(bookedSeat.split("-"), seatPrice)).join("");
}
return "<p>Select seats...=)</p>";
};

const updateTickets = (ticketsContainer, seatsArray, seatPrice) => {
ticketsContainer.innerHTML = getTicketsHtml(seatsArray, seatPrice);
};

const openModal = (modalWrapper, modalTicketsContainer, modalCount, modalCost, modalButton, seatsArray, seatPrice) => {
updateTickets(modalTicketsContainer, seatsArray, seatPrice);
modalCount.textContent = seatsArray.length + " ticket";
if (seatsArray.length > 1) modalCount.textContent += "s";
modalCost.textContent = " for " + seatsArray.length * seatPrice + "$";
modalWrapper.style.display = "flex";
modalButton.focus();
};

const closeModal = (modalWrapper) => {
modalWrapper.style.display = "none";
};

const initApp = () => {
bindEventListeners();
};

const bindEventListeners = () => {
FORM_BOOKING.addEventListener("input", ({ target }) => {
if (target.checked === true) {
addSeat(ACTIVE_SEATS, target.dataset.row, target.dataset.seat);
} else if (target.checked === false) {
deleteSeat(ACTIVE_SEATS, target.dataset.row, target.dataset.seat);
}
updateForm(FORM_BUTTON, FORM_TICKETS_COUNT, FORM_TICKETS_COST, ACTIVE_SEATS, SEAT_PRICE);
updateTickets(TICKETS_CONTAINER, ACTIVE_SEATS, SEAT_PRICE);
});
FORM_BOOKING.addEventListener("submit", (event) => {
event.preventDefault();
openModal(MODAL_WRAPPER, MODAL_TICKETS_CONTAINER, MODAL_COUNT, MODAL_COST, MODAL_BUTTON, ACTIVE_SEATS, SEAT_PRICE);
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
event.preventDefault();
closeModal(MODAL_WRAPPER);
}
});
MODAL_CLOSE.addEventListener("click", () => closeModal(MODAL_WRAPPER));
MODAL_FORM.addEventListener("submit", (event) => {
event.preventDefault();
alert("Sucsessfully booked!");
setTimeout(() => {
location.reload();
}, 1000);
});
};

document.addEventListener("DOMContentLoaded", () => {
initApp();
});
209 changes: 209 additions & 0 deletions submissions/f3d0t/js-cinema/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fight Club | Movie ticket booking</title>
<meta name="description" content="Here you can book Fight Club movie tickets" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Hind:wght@400;600&display=swap" rel="stylesheet" />
</head>

<body>
<header class="header">
<a class="header_logo" href="#"></a>
<nav>
<ul class="header_menu">
<li class="header_menu__item"><a href="#">Main</a></li>
<li class="header_menu__item"><a href="#">Ongoing</a></li>
<li class="header_menu__item header_menu__item--active"><a href="#">Booking</a></li>
<li class="header_menu__item"><a href="#">Bestsellers</a></li>
<li class="header_menu__item"><a href="#">Film rating</a></li>
</ul>
</nav>
</header>
<main class="main" id="main">
<nav>
<ol class="main_breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
<li class="main_breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a
itemscope
itemtype="https://schema.org/WebPage"
itemprop="item"
itemid="https://example.com/cinema/"
href="https://example.com/cinema/"
>
<span itemprop="name">Cinema</span></a
>
<meta itemprop="position" content="1" />
</li>
<li class="main_breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a
itemscope
itemtype="https://schema.org/WebPage"
itemprop="item"
itemid="https://example.com/cinema/booking"
href="https://example.com/books/sciencefiction"
>
<span itemprop="name">Booking</span></a
>
<meta itemprop="position" content="2" />
</li>
<li class="main_breadcrumbs__item" aria-current="page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name">Fight Club</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
<article class="movie">
<div class="movie__info">
<h1 class="movie__title">"Fight club" movie tickets booking</h1>
<h2 class="movie__time">Session time & date: <time datetime="2021-02-14 13:45">14.02.21 / 13:45</time></h2>
<p class="movie__rating">IMDB rating: <span>8.8 / 10</span></p>
<p class="movie__language">Language: <span>English</span></p>
<p class="movie__format">Film format: <span>2D</span></p>
<p class="movie__seat-price">Seat price: <span>2$</span></p>
</div>
<form class="form__booking">
<fieldset class="seats_booking">
<input id="1-1" type="checkbox" class="visually-hidden form__seat_input" data-seat="1" data-row="1" value="1-1" />
<label class="form__seat" for="1-1"></label>
<input id="1-2" type="checkbox" class="visually-hidden form__seat_input" data-seat="2" data-row="1" value="1-2" />
<label class="form__seat" for="1-2"></label>
<input id="1-3" type="checkbox" class="visually-hidden form__seat_input" data-seat="3" data-row="1" value="1-3" />
<label class="form__seat" for="1-3"></label>
<input id="1-4" type="checkbox" class="visually-hidden form__seat_input" data-seat="4" data-row="1" value="1-4" />
<label class="form__seat" for="1-4"></label>
<input id="1-5" type="checkbox" class="visually-hidden form__seat_input" data-seat="5" data-row="1" value="1-5" disabled />
<label class="form__seat" for="1-5"></label>
<input id="1-6" type="checkbox" class="visually-hidden form__seat_input" data-seat="6" data-row="1" value="1-6" disabled />
<label class="form__seat" for="1-6"></label>
<input id="1-7" type="checkbox" class="visually-hidden form__seat_input" data-seat="7" data-row="1" value="1-7" disabled />
<label class="form__seat" for="1-7"></label>
<input id="1-8" type="checkbox" class="visually-hidden form__seat_input" data-seat="8" data-row="1" value="1-8" />
<label class="form__seat" for="1-8"></label>
<input id="1-9" type="checkbox" class="visually-hidden form__seat_input" data-seat="9" data-row="1" value="1-9" />
<label class="form__seat" for="1-9"></label>
<input id="1-10" type="checkbox" class="visually-hidden form__seat_input" data-seat="10" data-row="1" value="1-10" />
<label class="form__seat" for="1-10"></label>
<input id="2-1" type="checkbox" class="visually-hidden form__seat_input" data-seat="1" data-row="2" value="2-1" />
<label class="form__seat" for="2-1"></label>
<input id="2-2" type="checkbox" class="visually-hidden form__seat_input" data-seat="2" data-row="2" value="2-2" />
<label class="form__seat" for="2-2"></label>
<input id="2-3" type="checkbox" class="visually-hidden form__seat_input" data-seat="3" data-row="2" value="2-3" />
<label class="form__seat" for="2-3"></label>
<input id="2-4" type="checkbox" class="visually-hidden form__seat_input" data-seat="4" data-row="2" value="2-4" />
<label class="form__seat" for="2-4"></label>
<input id="2-5" type="checkbox" class="visually-hidden form__seat_input" data-seat="5" data-row="2" value="2-5" disabled />
<label class="form__seat" for="2-5"></label>
<input id="2-6" type="checkbox" class="visually-hidden form__seat_input" data-seat="6" data-row="2" value="2-6" disabled />
<label class="form__seat" for="2-6"></label>
<input id="2-7" type="checkbox" class="visually-hidden form__seat_input" data-seat="7" data-row="2" value="2-7" disabled />
<label class="form__seat" for="2-7"></label>
<input id="2-8" type="checkbox" class="visually-hidden form__seat_input" data-seat="8" data-row="2" value="2-8" />
<label class="form__seat" for="2-8"></label>
<input id="3-1" type="checkbox" class="visually-hidden form__seat_input" data-seat="1" data-row="3" value="3-1" />
<label class="form__seat" for="3-1"></label>
<input id="3-2" type="checkbox" class="visually-hidden form__seat_input" data-seat="2" data-row="3" value="3-2" disabled />
<label class="form__seat" for="3-2"></label>
<input id="3-3" type="checkbox" class="visually-hidden form__seat_input" data-seat="3" data-row="3" value="3-3" disabled />
<label class="form__seat" for="3-3"></label>
<input id="3-4" type="checkbox" class="visually-hidden form__seat_input" data-seat="4" data-row="3" value="3-4" />
<label class="form__seat" for="3-4"></label>
<input id="3-5" type="checkbox" class="visually-hidden form__seat_input" data-seat="5" data-row="3" value="3-5" disabled />
<label class="form__seat" for="3-5"></label>
<input id="3-6" type="checkbox" class="visually-hidden form__seat_input" data-seat="6" data-row="3" value="3-6" />
<label class="form__seat" for="3-6"></label>
<input id="3-7" type="checkbox" class="visually-hidden form__seat_input" data-seat="7" data-row="3" value="3-7" />
<label class="form__seat" for="3-7"></label>
<input id="3-8" type="checkbox" class="visually-hidden form__seat_input" data-seat="8" data-row="3" value="3-8" />
<label class="form__seat" for="3-8"></label>
<input id="3-9" type="checkbox" class="visually-hidden form__seat_input" data-seat="9" data-row="3" value="3-9" />
<label class="form__seat" for="3-9"></label>
<input id="4-1" type="checkbox" class="visually-hidden form__seat_input" data-seat="1" data-row="4" value="4-1" />
<label class="form__seat" for="4-1"></label>
<input id="4-2" type="checkbox" class="visually-hidden form__seat_input" data-seat="2" data-row="4" value="4-2" />
<label class="form__seat" for="4-2"></label>
<input id="4-3" type="checkbox" class="visually-hidden form__seat_input" data-seat="3" data-row="4" value="4-3" />
<label class="form__seat" for="4-3"></label>
<input id="4-4" type="checkbox" class="visually-hidden form__seat_input" data-seat="4" data-row="4" value="4-4" />
<label class="form__seat" for="4-4"></label>
<input id="4-5" type="checkbox" class="visually-hidden form__seat_input" data-seat="5" data-row="4" value="4-5" disabled />
<label class="form__seat" for="4-5"></label>
<input id="4-6" type="checkbox" class="visually-hidden form__seat_input" data-seat="6" data-row="4" value="4-6" disabled />
<label class="form__seat" for="4-6"></label>
<input id="4-7" type="checkbox" class="visually-hidden form__seat_input" data-seat="7" data-row="4" value="4-7" disabled />
<label class="form__seat" for="4-7"></label>
<input id="4-8" type="checkbox" class="visually-hidden form__seat_input" data-seat="8" data-row="4" value="4-8" />
<label class="form__seat" for="4-8"></label>
<input id="4-9" type="checkbox" class="visually-hidden form__seat_input" data-seat="9" data-row="4" value="4-9" />
<label class="form__seat" for="4-9"></label>
<input id="5-1" type="checkbox" class="visually-hidden form__seat_input" data-seat="1" data-row="5" value="5-1" />
<label class="form__seat" for="5-1"></label>
<input id="5-2" type="checkbox" class="visually-hidden form__seat_input" data-seat="2" data-row="5" value="5-2" />
<label class="form__seat" for="5-2"></label>
<input id="5-3" type="checkbox" class="visually-hidden form__seat_input" data-seat="3" data-row="5" value="5-3" />
<label class="form__seat" for="5-3"></label>
<input id="5-4" type="checkbox" class="visually-hidden form__seat_input" data-seat="4" data-row="5" value="5-4" />
<label class="form__seat" for="5-4"></label>
<input id="5-5" type="checkbox" class="visually-hidden form__seat_input" data-seat="5" data-row="5" value="5-5" />
<label class="form__seat" for="5-5"></label>
<input id="5-6" type="checkbox" class="visually-hidden form__seat_input" data-seat="6" data-row="5" value="5-6" />
<label class="form__seat" for="5-6"></label>
<input id="5-7" type="checkbox" class="visually-hidden form__seat_input" data-seat="7" data-row="5" value="5-7" />
<label class="form__seat" for="5-7"></label>
<input id="5-8" type="checkbox" class="visually-hidden form__seat_input" data-seat="8" data-row="5" value="5-8" />
<label class="form__seat" for="5-8"></label>
<input id="5-9" type="checkbox" class="visually-hidden form__seat_input" data-seat="9" data-row="5" value="5-9" />
<label class="form__seat" for="5-9"></label>
<input id="5-10" type="checkbox" class="visually-hidden form__seat_input" data-seat="10" data-row="5" value="5-10" />
<label class="form__seat" for="5-10"></label>
<input id="5-11" type="checkbox" class="visually-hidden form__seat_input" data-seat="11" data-row="5" value="5-11" />
<label class="form__seat" for="5-11"></label>
</fieldset>
<p class="form__price">Ticket price: <span>2$</span></p>
<div class="form__button-container">
<span class="form__tickets-count"></span><span class="form__tickets-cost">Select seats</span>
<button class="form__button" disabled>Proceed</button>
</div>
<fieldset class="seats_labels">
<label class="form__seat form__seat--taken"></label><span class="seats_labels__span">Taken</span> <label class="form__seat"></label
><span class="seats_labels__span">Available</span> <label class="form__seat form__seat--selected"></label
><span class="seats_labels__span">Selected</span>
</fieldset>
</form>
<div class="booked_tickets">
<p class="booked_tickets__heading">Your booking:</p>
<div class="tickets_cont">
<p>Select seats</p>
</div>
</div>
</article>
</main>
<footer class="footer">
<address itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span>Cinema address:</span>
<strong>
<a href="https://goo.gl/maps/RmDcsY9GNsBvV5Zf7" target="_blank" itemprop="streetAddress" class="footer__link"
>50142, Italy, Via Annibal Caro, 71-1, Firenze FI</a
>
</strong>
</address>
</footer>
<div class="modal_wrapper">
<form class="modal">
<p class="modal__header">Your order:</p>
<div class="modal__tickets_cont">
<p>Select seats</p>
</div>
<div class="modal__text">
<span class="modal__count"></span>
<span class="modal__cost">Select seats</span> <button class="modal__button">Confirm</button>
</div>
<span class="modal__close">X</span>
</form>
</div>
<script src="./app.js"></script>
</body>
</html>
Loading