From 3acdfb2c14ea014df72d4c9edecc085f0f1c187f Mon Sep 17 00:00:00 2001 From: Anna Krivopusk Date: Sun, 21 Feb 2021 12:49:41 +0300 Subject: [PATCH] The second task: cinema booking with js --- .../lalalilulu/js-task-cinema/index.html | 240 +++++++++++ .../lalalilulu/js-task-cinema/script.js | 59 +++ .../lalalilulu/js-task-cinema/styles.css | 381 ++++++++++++++++++ 3 files changed, 680 insertions(+) create mode 100644 submissions/lalalilulu/js-task-cinema/index.html create mode 100644 submissions/lalalilulu/js-task-cinema/script.js create mode 100644 submissions/lalalilulu/js-task-cinema/styles.css diff --git a/submissions/lalalilulu/js-task-cinema/index.html b/submissions/lalalilulu/js-task-cinema/index.html new file mode 100644 index 0000000..3d47204 --- /dev/null +++ b/submissions/lalalilulu/js-task-cinema/index.html @@ -0,0 +1,240 @@ + + + + The second task: booking movie tickets + + + + +
+
+ +
+
+
    +
    • +
    • +
+
+
+
+
+
+
+
Shot from the movie Tenet(2020)
+
Shot from the movie Tenet(2020)
+
Shot from the movie Tenet(2020)
+
Shot from the movie Tenet(2020)
+
+
+

Premiere: + +

+

Country, year: UK, USA, 2020

+

Director: Christopher Nolan

+

Starring: John David Washington, Robert Pattinson, Michael Caine

+
+
+
+

Tenet

+ +

Temporal and, as always, mind-blowing thriller by Christopher Nolan. + After the war epic "Dunkirk", Christopher Nolan decided to return to his usual mind games and the strictest secrecy. + In a twilight world of international espionage, an unnamed CIA operative, known as The Protagonist, + is recruited by a mysterious organization called Tenet to participate in a global assignment that unfolds beyond real time. + The mission: prevent Andrei Sator, a renegade Russian oligarch with precognition abilities, from starting World War III. + The Protagonist will soon master the art of "time inversion" as a way of countering the threat that is to come.

+
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
123456789101112
1
2
3
4
5
6
7
8
9
+
+
+
+

Select seats to book tickets

+
+
+
+ + + diff --git a/submissions/lalalilulu/js-task-cinema/script.js b/submissions/lalalilulu/js-task-cinema/script.js new file mode 100644 index 0000000..3a1f34b --- /dev/null +++ b/submissions/lalalilulu/js-task-cinema/script.js @@ -0,0 +1,59 @@ +const selectedSeats = []; + +document.querySelector('.seatsBlock').addEventListener('click', ({target}) => { + const orderElement = document.querySelector('.order'); + + if (target.checked === true) { + selectedSeats.push(target.value); + } else { + const index = selectedSeats.indexOf(target.value); + if (index > -1) { + selectedSeats.splice(index, 1); + } + } + + selectedSeats.length > 0 ? renderOrderElementWithTickets(orderElement, stringifyArray(selectedSeats.sort())) + : renderOrderElementWithText(orderElement, 'Select seats to book tickets'); + +}); + +const renderOrderElementWithTickets = (orderElement, places) => { + orderElement.innerHTML = ` +
+

Your order:

+
+
+

Movie:

+

Tenet

+
+
+

Session:

+

5 February, 22:30

+
+
+

Selected seats:

+

${places}

+
+
+ +
+ `; + orderElement.style.border = '2px solid #024fff'; +}; + +const renderOrderElementWithText = (orderElement, text) => { + orderElement.innerHTML = ` +

${text}

+ `; + orderElement.style.border = 'none'; +}; + +const stringifyArray = (selectedSeats) => { + const result = []; + selectedSeats.forEach(place => { + const rowPlace = place.split("-"); + result.push(`${rowPlace[0]} row ${rowPlace[1]} seat`); + }); + + return result.join(";
"); +}; diff --git a/submissions/lalalilulu/js-task-cinema/styles.css b/submissions/lalalilulu/js-task-cinema/styles.css new file mode 100644 index 0000000..7bb110d --- /dev/null +++ b/submissions/lalalilulu/js-task-cinema/styles.css @@ -0,0 +1,381 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +.header { + display: flex; + width: 100%; + height: 120px; + justify-content: space-between; + align-items: center; +} + +.logo-img { + width: 50%; + height: 50%; + padding-top: 36px; + align-self: center; + justify-self: flex-start; + cursor: pointer; +} + +.right-header-part { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; +} + +.right-header-part ul { + display: flex; + list-style: none; +} + +.settings-links { + display: block; + height: 120px; + width: 120px; + background-size: 25% 25%; + background-position: center; + background-repeat: no-repeat; + transition: .5s; + border: 2px solid #ffffff; +} + +.newsletter { + background-image: url("assets/message.png"); +} + +.setting { + background-image: url("assets/settings.png"); +} + +.settings-links:hover, .settings-links:focus { + border: 2px solid #024fff; +} + +.main { + display: flex; + flex-direction: row; + width: 90%; + margin: 5% 3% 0; + overflow-y: hidden; +} + +.movie-container { + display: flex; + flex-direction: column; + width: 35%; +} + +.left-mv-container { + width: 100%; +} + +.movie-images { + display: inline-flex; + flex-direction: row; + flex-wrap: wrap; +} + +.image-card img { + display: block; + width: 215px; + height: 130px; + margin: 8px; + border-radius: 4px; + box-shadow: 5px 5px 2px #024fff; + transition: .5s; +} + +.image-card img:hover, .image-card img:focus { + transform: scale(1.05); + cursor: pointer; +} + +.key-info { + display: inline-flex; + flex-direction: column; + font-size: 15px; + line-height: 1.7; + margin-left: 10px; +} + +.right-mv-container { + width: 90%; + margin-left: 12px; +} + +.right-mv-container h1 { + font-size: 36px; + color: #024fff; + margin-top: 28px; +} + +.movie-sub-info ul { + display: flex; + align-items: center; + height: 25px; + list-style: none; + margin: 28px 6px 28px 0; +} + +.sub-info { + font-size: 12px; + margin-right: 12px; +} + +.movie-sub-info ul li:not(:first-child):before { + content: ""; + display: block; + position: relative; + width: 1px; + height: 7px; + background: #024fff; + top: 12px; + right: 4px; +} + +.movie-sub-info ul li:first-child:before { + content: ""; + display: block; + position: relative; + width: 1px; + height: 7px; + background: #fff; + top: 12px; + right: 4px; +} + +.movie-description { + font-size: 15px; + line-height: 1.7; +} + +.movie-session { + display: flex; + flex-direction: column; + margin-left: 10%; + width: 60%; +} + +.movie-choose { + width: 100%; +} + +.date-time { + font-size: 24px; + color: #024fff; + margin-left: 12px; +} + +.seatsBlock { + text-align:center; + margin-top: 26px; +} + +.seatGap { + width: 60px; +} + +.seats { + width:0; + margin-right: 32px; + margin-bottom: 20px; +} + +.seats:before { + content: ""; + width: 25px; + height: 25px; + display: inline-block; + vertical-align:middle; + text-align: center; + box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, .5), 0 0 0 0 rgba(255, 255, 255, .8); + background-color:#ccc; + transition: background-color .7s ease-in-out; +} + +.seats:checked:before { + background-color: #024fff; + font-size: 15px; +} + +.seats:disabled:before { + background-color: #413f40; + font-size: 15px; +} + +.order { + width: 48%; + display: flex; + flex-direction: column; + border-radius: 5px; + align-items: center; + justify-content: center; + margin: 5% 6px 0; +} + +.before-order { + color: #024fff; + font-size: 20px; +} + +.order-info { + width: 70%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: space-between; + margin-bottom: 18px; +} + +.order-info-big { + width: 70%; + display: flex; + justify-content: center; + margin: 24px 0; +} + +.order-title-big { + font-size: 24px; + color: #024fff; + font-weight: bolder; +} + +.order-title { + font-size: 18px; + font-weight: bolder; +} + +.order-description { + font-size: 18px; +} + +.order-form { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.pay { + width: 71%; + height: 40px; + appearance: none; + border: 0; + border-radius: 5px; + padding: 8px 16px; + text-align: center; + font-size: 18px; + text-transform: uppercase; + background: #ccc; + color: #ffffff; + margin: 24px 0; + transition: background-color 1s ease; +} + +.pay:focus, .pay:hover { + background-color: #024fff; +} + +@media screen and (max-width:1024px) { + .header { + height: 70px; + } + .main { + flex-direction: column; + max-width: 1000px; + margin: 5% auto 2%; + } + .left-header-part{ + width: 40%; + } + .right-header-part { + overflow-x: hidden; + } + .logo-img { + width: 100%; + height: 80%; + } + .settings-links { + height: 70px; + width: 70px; + background-size: 35% 35%; + } + .movie-container { + width: 100%; + flex-direction: row; + flex-wrap: wrap; + margin-top: 18px; + } + .movie-session { + width: 100%; + flex-direction: row; + flex-wrap: wrap; + margin-left: 0; + } + .left-mv-container { + width: 100%; + } + .image-card img { + max-width: 150px; + height: 85px; + } + .right-mv-container { + width: 100%; + margin: 24px 6px; + } + .key-info { + font-size: 12px; + } + .right-mv-container h1 { + margin-top: 2%; + font-size: 24px; + } + .movie-sub-info ul { + margin: 18px 0; + } + .movie-description { + width: 90%; + font-size: 12px; + line-height: 1.4; + } + .movie-choose { + width: 100%; + } + .date-time { + font-size: 24px; + margin-left: 6px; + } + .seatsBlock { + margin-top: 18px; + } + .seats { + margin-right: 22px; + margin-bottom: 15px; + } + .seatGap { + width: 0; + } + .seats:before { + width: 20px; + height: 20px; + } + .order { + width: 100%; + border: none; + border-radius: 0; + border-top: 2px solid #024fff; + padding: 12px; + margin-top: 18px; + } + .order-title, .order-description { + font-size: 15px; + } +}