diff --git a/submissions/m-ruslan/dom-movie-seat-booking/app.css b/submissions/m-ruslan/dom-movie-seat-booking/app.css
new file mode 100644
index 0000000..f3f0564
--- /dev/null
+++ b/submissions/m-ruslan/dom-movie-seat-booking/app.css
@@ -0,0 +1,279 @@
+html {
+ background-color: rgb(249, 250, 250);
+}
+
+body {
+ max-width: 700px;
+ margin: auto;
+ background-color: rgb(211, 228, 228);
+}
+
+header {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 40px;
+ background-color: rgb(157, 200, 175);
+}
+
+.header__logoImg {
+ width: 30px;
+ height: 30px;
+ margin: 0px 10px;
+}
+
+.movie {
+ width: 90%;
+ height: 170px;
+ margin: auto;
+ background-color: rgb(226, 224, 192);
+}
+
+.movieName {
+ margin: 0px;
+ padding: 0px 10px;
+ line-height: 40px;
+}
+
+.movieInfo {
+ display: flex;
+}
+
+.movieInfo__poster {
+ height: 120px;
+ margin: 0px 10px;
+}
+
+.movieInfo__sessionDescr {
+ padding: 0px;
+ margin: 0px;
+ list-style-type: none;
+ line-height: 25px;
+}
+
+.hall {
+ width: 90%;
+ margin: 20px auto;
+}
+
+.hall__screenImg {
+ display: block;
+ width: 80%;
+ margin: 0px auto;
+}
+
+.hall__screenText {
+ margin: 0px auto;
+ text-align: center;
+ color: rgb(112, 112, 112);
+}
+
+.seats {
+ display: grid;
+ width: 80%;
+ margin: 70px auto;
+ margin-bottom: 0px;
+ grid-template-columns: repeat(12, 1fr);
+ grid-template-rows: repeat(6, 1fr) 0.5fr 1fr;
+ column-gap: 7px;
+ row-gap: 15px;
+ padding: 0px;
+}
+
+.seats__row {
+ text-align: center;
+ line-height: 40px;
+ color: rgb(112, 112, 112);
+}
+
+.seats__legend {
+ grid-column: span 3;
+ line-height: 40px;
+}
+
+.seats__emptyRow {
+ grid-column: 1 / span 12;
+}
+
+.seats__emptySpace_left-2 {
+ grid-column: 2 / span 2;
+}
+
+.seats__emptySpace_right-2 {
+ grid-column: 10 / span 2;
+}
+
+.seats__label {
+ box-sizing: border-box;
+ border-radius: 20%;
+ border-top-left-radius: 40%;
+ border-top-right-radius: 40%;
+}
+
+.seats__label_free,
+.seats__label_legendFree {
+ background-color: rgb(89, 172, 127);
+}
+
+.seats__label_booked,
+.seats__label_legendBooked {
+ background-color: rgb(100, 29, 20);
+}
+
+.seats__input_hidden {
+ position: absolute;
+ left: -9999px;
+}
+
+.seats__input_booked {
+ display: none;
+}
+
+.basket_hidden {
+ display: none;
+}
+
+.basket {
+ margin: 20px auto;
+ width: 90%;
+ background-color: rgb(226, 224, 192);
+}
+
+.basket__header,
+.basket__total-amount {
+ margin: 0;
+ padding: 10px;
+}
+
+.basket__list {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ margin: 0px;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0px 5px;
+ list-style-type: none;
+}
+
+.basket__list-element {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-around;
+ margin: 5px;
+ height: 50px;
+ border-radius: 10px;
+ padding: 5px;
+ background-color: rgb(105, 167, 179);
+}
+
+.basket__list-element-info,
+.basket__list-element-number {
+ margin: 0;
+ width: 100%;
+ padding: 0;
+ text-align: center;
+ font-size: 16px;
+}
+
+.basket__list-element-number {
+ font-size: 12px;
+}
+
+.basket__submit-button {
+ margin-left: 10px;
+ margin-bottom: 10px;
+ width: 110px;
+ height: 40px;
+ border-radius: 10px;
+ border: none;
+ background-color: rgb(89, 172, 127);
+ font-size: 18px;
+}
+
+footer {
+ width: 100%;
+ height: 80px;
+ background-color: rgb(105, 117, 84);
+}
+
+.footer__header {
+ padding: 15px 10px;
+ margin: 0px;
+ font-size: 16px;
+}
+
+.footer__list {
+ display: flex;
+ justify-content: space-between;
+ margin: 0px;
+ padding: 0px 10px;
+ list-style-type: none;
+}
+
+.seats__label_free:hover,
+.basket__submit-button:hover {
+ cursor: pointer;
+ background-color: rgb(236, 242, 243);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.seats__input:focus + .seats__label_free,
+.seats__label_free:focus {
+ background-color: rgb(236, 242, 243);
+}
+
+.basket__submit-button:focus {
+ outline: none;
+ background-color: rgb(236, 242, 243);
+}
+
+.seats__label_legendSelected,
+.seats__input:checked + .seats__label_free {
+ background-color: rgb(105, 167, 179);
+}
+
+@media screen and (max-width: 550px) {
+ .footer__list {
+ display: block;
+ }
+ footer {
+ height: 120px;
+ }
+ .movie,
+ .basket {
+ width: 100%;
+ }
+ .seats {
+ margin: 50px auto;
+ column-gap: 5px;
+ row-gap: 10px;
+ margin-bottom: 0px;
+ }
+ .seats__row,
+ .seats__legend {
+ line-height: 30px;
+ }
+}
+
+@media screen and (max-width: 450px) {
+ .hall {
+ width: 100%;
+ }
+ .seats {
+ margin: 30px auto;
+ margin-bottom: 0px;
+ }
+ .seats__row,
+ .seats__legend {
+ line-height: 20px;
+ }
+
+ .basket__list-element {
+ height: 40px;
+ }
+
+ .basket__list-element-info {
+ font-size: 12px;
+ }
+}
diff --git a/submissions/m-ruslan/dom-movie-seat-booking/index.html b/submissions/m-ruslan/dom-movie-seat-booking/index.html
new file mode 100644
index 0000000..854c5d4
--- /dev/null
+++ b/submissions/m-ruslan/dom-movie-seat-booking/index.html
@@ -0,0 +1,184 @@
+
+
+
+
+
+
+
+
+ Kottans Movie-Seat-Booking
+
+
+
+
+
+
+ Super Mega Movie
+
+
+
+ - 20:00-22:00
+
+ - Format: 3D
+ - Hall: Main
+ - Price: $10
+
+
+ SCREEN
+
+
+
+
+
+
+
+
+
diff --git a/submissions/m-ruslan/dom-movie-seat-booking/index.js b/submissions/m-ruslan/dom-movie-seat-booking/index.js
new file mode 100644
index 0000000..15bba86
--- /dev/null
+++ b/submissions/m-ruslan/dom-movie-seat-booking/index.js
@@ -0,0 +1,131 @@
+const selectedSeats = [];
+let isBasketHidden = true;
+
+document.addEventListener("DOMContentLoaded", () => {
+ console.log("DOM is loaded");
+
+ document.querySelector("#seats").addEventListener("change", (event) => {
+ const inputElement = event.target.closest(".seats__input");
+ if (!inputElement) return;
+
+ const labelElement = getLabelForInput(inputElement.id);
+ handleSeatSelecting(labelElement, inputElement);
+ drawBasket();
+ addAdditionalEventListeners();
+ });
+});
+
+const getLabelForInput = (inputID) => {
+ var labels = document.getElementsByTagName("LABEL");
+ for (var i = 0; i < labels.length; i++) {
+ if (labels[i].htmlFor === inputID) return labels[i];
+ }
+};
+
+const handleSeatSelecting = (seatLabel, seatInput) => {
+ const seatClasses = Array.from(seatLabel.classList);
+ const isSeatBooked = seatClasses.includes("seats__label_booked");
+ if (isSeatBooked) return;
+
+ const seatID = seatLabel.htmlFor;
+ const wasSeatSelectedBefore = !seatInput.checked;
+ if (wasSeatSelectedBefore) {
+ selectedSeats.splice(selectedSeats.indexOf(seatID), 1);
+ } else {
+ selectedSeats.push(seatID);
+ }
+};
+
+const showOrHideBasket = (basket) => {
+ const basketClasses = basket.classList;
+ isBasketHidden = Array.from(basketClasses).includes("basket_hidden");
+ if (selectedSeats.length === 0 && !isBasketHidden) {
+ basketClasses.add("basket_hidden");
+ }
+ if (selectedSeats.length > 0 && isBasketHidden) {
+ basketClasses.remove("basket_hidden");
+ }
+};
+
+const drawBasket = () => {
+ const basket = document.querySelector("#basket");
+ showOrHideBasket(basket);
+ if (selectedSeats.length === 0) return;
+
+ const basketElements = createBasketElements();
+ basket.innerHTML = "";
+ basket.append(...basketElements);
+};
+
+const addAdditionalEventListeners = () => {
+ document
+ .querySelector("#basket__submit-button")
+ .addEventListener("click", () => {
+ alert("Sorry, this feature has not been added yet");
+ });
+};
+
+const createBasketElements = () => {
+ const basketHeaderElement = createBasketHeaderElement();
+ const listOfSelectedSeatsElement = createListOfSelectedSeats();
+ const totalAmountElement = createTotalAmountElement();
+ const submitButtonElement = createSubmitButtonElement();
+
+ return [
+ basketHeaderElement,
+ listOfSelectedSeatsElement,
+ totalAmountElement,
+ submitButtonElement,
+ ];
+};
+
+const createBasketHeaderElement = () => {
+ const header = document.createElement("h2");
+ header.setAttribute("class", "basket__header");
+ header.innerHTML = `Your tickets:`;
+ return header;
+};
+
+const createListOfSelectedSeats = () => {
+ const list = document.createElement("ul");
+ list.setAttribute("class", "basket__list");
+ const selectedSeatsElements = selectedSeats.map((seat, index, arr) => {
+ const seatRow = seat.slice(5, 6);
+ const seatNumber = seat.slice(7);
+ const seatElement = document.createElement("li");
+ seatElement.setAttribute("class", "basket__list-element");
+ seatElement.innerHTML = `
+ Row ${seatRow} - Seat ${seatNumber}
+ Ticket ${index + 1} of ${
+ arr.length
+ }
+ `;
+ return seatElement;
+ });
+
+ list.append(...selectedSeatsElements);
+
+ return list;
+};
+
+const createTotalAmountElement = () => {
+ const totalContainer = document.createElement("h2");
+ totalContainer.setAttribute("class", "basket__total-amount");
+ const priceForOneSeatFieldText = document.querySelector("#price").innerHTML;
+ const priceForOneSeat = priceForOneSeatFieldText.slice(
+ priceForOneSeatFieldText.indexOf("$") + 1
+ );
+ totalContainer.innerHTML = `Total: $${
+ priceForOneSeat * selectedSeats.length
+ }`;
+
+ return totalContainer;
+};
+
+const createSubmitButtonElement = () => {
+ const submitButton = document.createElement("button");
+ submitButton.setAttribute("id", "basket__submit-button");
+ submitButton.setAttribute("class", "basket__submit-button");
+ submitButton.innerHTML = `Buy`;
+ return submitButton;
+};
+