+
-
diff --git a/index.js b/index.js
index e69de29..43cbfbd 100644
--- a/index.js
+++ b/index.js
@@ -0,0 +1,196 @@
+const addButton = document.querySelector('.add-button');
+const submitButton = document.querySelector('.submit-button');
+const form = document.querySelector('.form');
+let drinksCount = 0;
+createForm();
+addButton.onclick = createForm;
+submitButton.onclick = function () {
+ let window = document.createElement('div');
+ window.classList.add('modal-container');
+ window.innerHTML = `
+
+
+
${generateModalHeader()}
+
+
+
+ | Напиток |
+ Молоко |
+ Дополнительно |
+ Пожелания |
+
+
+
+
+ Выберите время заказа
+
+
+
+
+ `;
+ let subButon = window.querySelector('.submit');
+ subButon.onclick = function (){
+ let time = window.querySelector('.time').value;
+ let sysTime = new Date();
+ if(time.split(':')[0] < sysTime.getHours()){
+ alert('Мы не умеем перемещаться во времени. Выберите время позже, чем текущее');
+ }
+ else{
+ if(time.split(':')[0] ==sysTime.getHours() && time.split(':')[1] < sysTime.getMinutes())
+ alert('Мы не умеем перемещаться во времени. Выберите время позже, чем текущее');
+ else
+ document.body.removeChild(window);
+ }
+ }
+ collectDataFromForms(window);
+ let button = window.querySelector('.deletion');
+ button.onclick = function () {
+ document.body.removeChild(window);
+ }
+ document.body.appendChild(window);
+}
+
+function collectDataFromForms(window) {
+ let table = window.querySelector('.order-table');
+ let forms = document.querySelectorAll('.form');
+ for (let form of forms) {
+ let row = document.createElement('tr');
+ let data = new FormData(form);
+ row.innerHTML = `
${data.get('drink')} |
+
${data.get('milk')} |
+
${data.getAll('options').toString().replace(',', ', ')} |
+
${data.get('comment')} | `;
+ table.appendChild(row);
+ }
+}
+
+function generateModalHeader() {
+ let str = `Вы заказали ${drinksCount} `;
+ let drink = 'напитков'
+
+ if (!(drinksCount % 100 > 10 && drinksCount % 100 < 20)) {
+ switch (drinksCount % 10) {
+ case 1:
+ drink = 'напиток';
+ break;
+ case 2:
+ drink = 'напитка';
+ break;
+ case 3:
+ drink = 'напитка';
+ break;
+ case 4:
+ drink = 'напитка';
+ break;
+ }
+ }
+ str += drink;
+ return str;
+}
+
+function createForm() {
+ drinksCount++;
+ let newForm = document.createElement('form');
+ newForm.classList.add('form');
+ newForm.innerHTML = `
`;
+ let clos = CreateRemovingButton(newForm);
+ let comment = CreateCommentSection();
+ newForm.querySelector('.form-header').appendChild(clos);
+ newForm.querySelector('.beverage').appendChild(comment);
+ document.body.insertBefore(newForm, document.getElementById("add-button-container"));
+}
+
+function CreateCommentSection(){
+ let container = document.createElement('div');
+ container.classList.add('field')
+ container.innerHTML = `
+ И еще вот что
+
+
+
`;
+ let textArea = container.querySelector('.comment');
+ let textRepeat = container.querySelector('.comment-repeat');
+ textArea.oninput = function (){
+ let text = textArea.value;
+ let reg = /срочно|быстрее|побыстрее|скорее|поскорее|очень нужно/gmi;
+ text = text.replace(reg, x => `
${x}`);
+ textRepeat.innerHTML = text;
+ }
+ return container;
+}
+
+function CreateRemovingButton(newForm) {
+ let clos = document.createElement('button');
+ clos.textContent = 'X';
+ clos.classList.add('deletion');
+
+ clos.onclick = function () {
+ if (drinksCount == 1) {
+ alert('Не удаляй!!! Это последнее, что у тебя осталось...')
+ return;
+ }
+ drinksCount--;
+ document.body.removeChild(newForm);
+ ReanameForms();
+ }
+ return clos;
+}
+function ReanameForms() {
+ let headers = document.querySelectorAll('.beverage-count');
+ for (let i = 0; i < drinksCount; i++) {
+ headers[i].textContent = `Напиток №${i + 1}`;
+ }
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 68f5581..df3ecf3 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,6 @@
.beverage {
border: 1px solid #eee;
+ background-color: blanchedalmond;
margin: 15px 0;
padding: 15px;
}
@@ -45,3 +46,60 @@
border-radius: 5px;
}
+.form-header{
+ display: flex;
+ justify-content: space-between;
+}
+
+.deletion{
+ width: 25px;
+ height: 25px;
+ background-color: rgb(236, 88, 88);
+}
+
+
+.modal-container {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-color: rgba(105, 105, 105, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.modal-window {
+ width: 500px;
+ height: auto;
+ position: fixed;
+ background-color: rgb(190, 250, 94);
+ padding: 15px;
+ text-align: center;
+}
+
+.modal-window-header{
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+}
+
+.modal-window-title{
+ margin: 0;
+}
+
+.order-table{
+ display:inline;
+ align-items: center;
+ justify-content: center;
+ word-break: break-all;
+}
+
+ th {
+ border: 2px solid black;
+ }
+ td {
+ border: 1px solid gray;
+ }
+