diff --git a/index.html b/index.html index ddc8250..ef14aa6 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@
+

Напиток №1

- +
- +
- + + + + diff --git a/index.js b/index.js index e69de29..1f5f2f1 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,134 @@ +document.getElementById('addbutton').onclick = addList; +document.getElementById('movebutton').onclick = moveList; +document.getElementById('sb').onclick = shwModl; +document.getElementById('modalclose').onclick = moveModl; + +function addList() +{ + let elem = document.querySelectorAll ('fieldset'); + // Получаем копию первого меню + let clone = elem[0].cloneNode(true); + // Привязываем событие к крестику + clone.children[0].onclick = moveList; + // Изменяем номер меню + let countmenu = elem.length; + clone.children[1].innerHTML = 'Напиток №' + (countmenu + 1); + // Изменяем имена радиокнопок, чтобы они не зависели от прототипа + radios = clone.querySelectorAll('input[type="radio"]'); + for (let radio of radios) radio.name = 'milk' + countmenu; + // Вставляем меню в документ + elem[countmenu - 1].after(clone); +} + +function moveList() +{ + let elem = document.querySelectorAll ('fieldset'); + let moveelem = this.parentNode; + if (elem.length > 1) + { + moveelem.remove(); + elem = document.querySelectorAll ('fieldset'); + // Изменяем (упорядочиваем) имена радиокнопок и номера меню + for (let i = 0; i < elem.length; i++) + { + radios = elem[i].querySelectorAll('input[type="radio"]'); + for (let radio of radios) radio.name = 'milk' + i; + elem[i].children[1].innerHTML = 'Напиток №' + (i + 1); + } + + }; +} + +function shwModl() +{ + let elem = document.querySelectorAll ('fieldset'); + let countmenu = elem.length; + let modl = document.getElementById('imodal'); + let overlay = document.getElementById('modaloverlay'); + // Формируем заголовок модального окна + let h4 = document.getElementById('modaltop'); + h4.textContent = Grammatika(countmenu); + // Формируем таблицу модального окна + let table = document.querySelector('.tableM'); + for (let menu of elem) + { + let tr = document.createElement('tr'); + // Напиток + let td = document.createElement('td'); + td.textContent = Translate(document.querySelector('select').value); + tr.appendChild(td); + // Молоко + td = document.createElement('td'); + let radios = menu.querySelectorAll('input[type="radio"]'); + for (let radio of radios) + if (radio.checked) + { + td.textContent = Translate(radio.value); + break; + } + tr.appendChild(td); + // Дополнительно + td = document.createElement('td'); + let opt = menu.querySelectorAll('input[type="checkbox"]'); + for (let op of opt) + if (op.checked) + if (td.textContent === '') td.textContent = Translate(op.value); + else td.textContent += ', ' + Translate(op.value); + tr.appendChild(td); + // Добавляем строку к таблице + table.appendChild(tr); + } + // Отображаем модальное окно и оверлей в документе + modl.classList.toggle('mhide'); + overlay.classList.toggle('mhide'); + + return false; // чтобы не было перезагрузки страницы +} + +function moveModl() +{ + let modl = document.getElementById('imodal'); + let overlay = document.getElementById('modaloverlay'); + // Скрываем модальное окно и оверлей из документа + modl.classList.toggle('mhide'); + overlay.classList.toggle('mhide'); + // Очищение таблицы + let table = document.querySelectorAll('tr'); + for (let i = 1; i < table.length; i++) table[i].remove(); +} + +function Grammatika(value) +{ let text = 'Вы заказали ' + value; + let v = String(value); + let end = v[v.length - 1]; + let dec = v[v.length -2]; + if (dec === '1') return text + ' напитков'; + else + switch(end) + { + case '1': return text + ' напитoк'; + case '2': + case '3': + case '4': return text + ' напитка'; + default: return text + ' напитков'; + } +} + +function Translate(value) +{ + switch (value) + { + case 'usual': return 'обычное'; + case 'no-fat': return 'обезжиренное'; + case 'soy': return 'соевое'; + case 'coconut': return 'кокосовое'; + case 'espresso': return 'Эспрессо'; + case 'capuccino': return 'Капучино'; + case 'cacao': return 'Какао'; + case 'whipped cream': return 'взбитые сливки'; + case 'marshmallow': return 'зефирки'; + case 'chocolate': return 'шоколадки'; + case 'cinnamon': return 'корица'; + default: return ''; + } +} \ No newline at end of file diff --git a/styles.css b/styles.css index 68f5581..eb57621 100644 --- a/styles.css +++ b/styles.css @@ -1,7 +1,9 @@ .beverage { border: 1px solid #eee; - margin: 15px 0; + margin: 15px 5px; padding: 15px; + position: relative; + display: inline-block; } .beverage-count { @@ -45,3 +47,63 @@ border-radius: 5px; } +.move-button { + border: none; + background: none; + padding: 10px; + color: Red; + font-size: 14px; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + font-weight: bold; + transform: scaleX(1.5); +} + +.modal { + display: block; + opacity: 1; + width: 500px; + max-height: 500px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1000; + padding: 15px; + background-color: #eee; + border: 2px solid rgb(77, 77, 77); + overflow-x: hidden; +} + +.modal-overlay { + display: block; + opacity: 1; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 900; +} + +.mhide { + display: none; +} + +.tableM, td, th { + text-align: center; + border: 1px solid rgba(12, 14, 15, 0.267); + border-collapse: collapse; +} + +.tableM { + width: 470px; + margin-top: 8px; +} + +.modal-top { + text-align: center; +}