From ddeb82d584785c1f00a9df0872be6fae39b304e0 Mon Sep 17 00:00:00 2001
From: Linadel24 <91286572+Linadel24@users.noreply.github.com>
Date: Fri, 12 Nov 2021 02:43:04 +0500
Subject: [PATCH] =?UTF-8?q?=D0=90=D0=B4=D0=B5=D0=BB=D1=8C=D0=BC=D1=83?=
=?UTF-8?q?=D1=80=D0=B4=D0=B8=D0=BD=D0=B0=20=D0=AD=D0=BB=D0=B8=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 12 +++++
index.js | 133 +++++++++++++++++++++++++++++++++++++++++++++++++++++
styles.css | 96 +++++++++++++++++++++++++++++---------
3 files changed, 218 insertions(+), 23 deletions(-)
diff --git a/index.html b/index.html
index ddc8250..3ec77df 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,9 @@
+
+
+
+
+
diff --git a/index.js b/index.js
index e69de29..90d0b8f 100644
--- a/index.js
+++ b/index.js
@@ -0,0 +1,133 @@
+const form = document.getElementsByTagName('form')[0];
+const addButton = document.getElementById("add-button");
+const modalWindow = document.getElementById("modal-window");
+const modalWindowHeader = modalWindow.getElementsByTagName('h2')[0];
+const closeModalWindowBtn = modalWindow.getElementsByClassName("close-button")[0];
+const overlay = document.getElementById("overlay");
+
+let count = 2;
+
+addButton.addEventListener("click", (ev) => {
+ let beverages = document.getElementsByClassName("beverage");
+ let beverage = beverages[beverages.length - 1];
+ let newBeverage = beverage.cloneNode(true);
+
+ let inputs = newBeverage.querySelectorAll('input');
+ for (let input of inputs) {
+ input.name += (count - 1);
+ }
+
+ let beverageCount = newBeverage.getElementsByClassName("beverage-count")[0];
+ beverageCount.textContent = "Напиток №" + count++;
+
+ let closeButton = document.createElement("button");
+ closeButton.classList.add("close-button");
+ closeButton.textContent = 'X';
+ closeButton.addEventListener('click', ev => {
+ newBeverage.remove();
+ count--;
+ });
+
+ let header = newBeverage.getElementsByClassName('header')[0];
+ header.appendChild(closeButton);
+
+ beverage.after(newBeverage);
+});
+
+let bookCount;
+let table;
+
+form.addEventListener('submit', ev => {
+ ev.preventDefault();
+
+ console.log(ev);
+
+ bookCount = document.createElement("p");
+ bookCount.textContent = 'Вы заказали ' + (count - 1) + ' ' + getPhraseByNumber(count - 1);
+ modalWindowHeader.after(bookCount);
+
+ table = getBookItemsTable();
+
+ modalWindow.append(table);
+ modalWindow.classList.remove('hidden');
+ overlay.classList.remove('hidden');
+});
+
+closeModalWindowBtn.addEventListener('click', ev => {
+ modalWindow.classList.add('hidden');
+ bookCount.remove();
+ table.remove();
+ overlay.classList.add('hidden');
+});
+
+function getPhraseByNumber(number) {
+ if (number == 1) {
+ return 'напиток';
+ }
+
+ if (2 <= number <= 4) {
+ return 'напитка';
+ }
+
+ if (5 <= number <= 20) {
+ return 'напитков';
+ }
+
+ let numberStr = number.toString();
+ let lastSymbol = numberStr[numberStr.length - 1];
+
+ return getPhraseByNumber(parseInt(lastSymbol));
+}
+
+tableHeaders = ['Напиток','Молоко','Дополнительно'];
+
+function getBookItemsTable() {
+ const table = document.createElement('table');
+ const header = document.createElement('tr');
+
+ for (let columnName of tableHeaders) {
+ let cell = document.createElement('th');
+ cell.textContent = columnName;
+ header.append(cell);
+ }
+
+ table.append(header);
+
+ let beverages = document.getElementsByClassName('beverage');
+
+ for (let beverage of beverages) {
+ let datas = getBeverageData(beverage);
+
+ let row = document.createElement('tr');
+
+ for (let data of datas) {
+ let cell = document.createElement('td');
+ cell.textContent = data;
+ row.append(cell);
+ }
+ table.append(row);
+ }
+
+ return table;
+}
+
+function getBeverageData(beverage) {
+
+ let beverageNames = beverage.querySelectorAll('select option');
+ let beverageName = Array.from(beverageNames).find(c => c.selected).textContent;
+ console.log(beverageName);
+
+ let names = beverage.querySelectorAll('.field input');
+ let checkedNames = Array
+ .from(names)
+ .filter(c => c.checked)
+ .map(c => c.parentNode.querySelector('span').textContent);
+
+ let milkName = checkedNames.shift();
+ let other = checkedNames.join(',');
+
+ if (!other)
+ other = ' - ';
+
+ return [beverageName, milkName, other];
+}
diff --git a/styles.css b/styles.css
index 68f5581..4e9e380 100644
--- a/styles.css
+++ b/styles.css
@@ -1,47 +1,97 @@
.beverage {
- border: 1px solid #eee;
- margin: 15px 0;
- padding: 15px;
+ border: 1px solid #eee;
+ margin: 15px 0;
+ padding: 15px;
}
.beverage-count {
- margin: 0 0 15px;
+ margin: 0 0 15px;
}
.field {
- display: block;
- margin-bottom: 10px;
+ display: block;
+ margin-bottom: 10px;
}
.label-text {
- display: inline-block;
- width: 80px;
+ display: inline-block;
+ width: 80px;
}
.checkbox-label {
- margin-bottom: 5px;
- display: inline-block;
+ margin-bottom: 5px;
+ display: inline-block;
}
.checkbox-field {
- margin: 5px 0;
- display: block;
+ margin: 5px 0;
+ display: block;
}
.add-button {
- border: none;
- background: none;
- padding: 10px;
- color: rgba(0, 27, 255, 0.82);
- font-size: 14px;
- text-decoration: underline dashed;
- cursor: pointer;
+ border: none;
+ background: none;
+ padding: 10px;
+ color: rgba(0, 27, 255, 0.82);
+ font-size: 14px;
+ text-decoration: underline dashed;
+ cursor: pointer;
}
.submit-button {
- font-size: 16px;
- padding: 7px 15px;
- border: 2px solid orange;
- border-radius: 5px;
+ font-size: 16px;
+ padding: 7px 15px;
+ border: 2px solid orange;
+ border-radius: 5px;
}
+.close-button {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ padding: 5px;
+ border: 1px solid lightskyblue;
+ background-color: transparent;
+}
+
+.header {
+ position: relative;
+}
+
+.hidden {
+ display: none;
+}
+
+.modal-window {
+ position: absolute;
+ z-index: 3;
+ padding: 0 20px 20px;
+ top: 40%;
+ left: 30%;
+ width: 45%;
+ height: auto;
+ background-color: white;
+ border-radius: 10px;
+ border: 1px solid lightskyblue;
+}
+
+.modal-window table {
+ border-collapse: collapse;
+}
+
+.modal-window td {
+ padding: 10px 15px;
+ text-align: center;
+ min-width: 100px;
+ border: 1px solid skyblue;
+}
+
+.overlay {
+ z-index: 2;
+ position: fixed;
+ background-color: rgba(204, 204, 204, 0.5);
+ top: -15px;
+ left: -15px;
+ right: -15px;
+ bottom: -15px;
+}