diff --git a/index.html b/index.html
index ddc8250..b867a06 100644
--- a/index.html
+++ b/index.html
@@ -6,12 +6,30 @@
-
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
index e69de29..bb94cb7 100644
--- a/index.js
+++ b/index.js
@@ -0,0 +1,79 @@
+let count = 1;
+const template = document.querySelector(".beverage-form");
+const convertion = {"espresso": "Эспрессо", "capuccino": "Капучино", "cacao": "Какао",
+ "usual": "на обычном молоке", "no-fat": "на обезжиренном молоке", "soy": "на соевом молоке", "coconut":"на кокосовом молоке",
+ "whipped cream": "взбитых сливок", "marshmallow": "зефирок", "chocolate":"шоколад", "cinnamon":"корицу"};
+
+function addCoffee(){
+ count ++;
+ const newCoffee = template.cloneNode(true);
+ newCoffee.id = `form${count}`;
+ newCoffee.innerHTML = newCoffee.innerHTML.replace("Напиток №1", `Напиток №${count}`);
+ document.querySelector(".beverages").append(newCoffee);
+}
+
+function deleteCoffee(element){
+ if (count === 1)
+ return;
+ count--;
+ let numOfDel = getNumber(element);
+ element.parentNode.removeChild(element);
+ for (coffee of document.querySelectorAll(".beverage-form")){
+ const numOfCoffee = getNumber(coffee);
+ if (numOfCoffee > numOfDel){
+ coffee.id = `form${numOfCoffee-1}`;
+ coffee.querySelector(".beverage-count").textContent = `Напиток №${numOfCoffee-1}`;
+ }
+ }
+}
+
+getNumber = (element) => {return +element.id.slice(4)};
+
+function showLightbox(){
+ document.querySelector(".hidden").style.display = "flex";
+ document.querySelector(".countOfCoffee").textContent = getText(count);
+ document.querySelector("table").innerHTML = makeTable(document.querySelectorAll(".beverage-form"));
+}
+
+getText = (countOfCoffee) => {
+ if (countOfCoffee % 10 === 1 && !(countOfCoffee % 100 === 11))
+ return `Вы заказали ${countOfCoffee} напиток`;
+ else if (countOfCoffee % 10 > 1 && countOfCoffee % 10 < 5 && (countOfCoffee % 100 < 12 || countOfCoffee % 100 > 14))
+ return `Вы заказали ${countOfCoffee} напитка`;
+ else return `Вы заказали ${countOfCoffee} напитков`;
+}
+
+makeTable = (forms) => {
+ let rows = '| Напиток | Молоко | Дополнительно | Пожелания |
|---|
';
+ forms.forEach(form=>{
+ const fromData = new FormData(form);
+ rows += "" + convertToRow(fromData) + "
";
+ })
+ return rows;
+}
+
+convertToRow = (formData) => {
+ return `${convertion[formData.get('type')]} |
+ ${convertion[formData.get('milk')]} |
+ ${formData.getAll('options').map(option => convertion[option]).join(", ")} |
+ ${formData.get('comment')} | `;
+}
+
+cloneText = (textarea) =>{
+ let text = textarea.value.replace(/(срочно)|(быстрее)|(побыстрее)|(скорее)|(поскорее)|(очень нужно)/gi, "$&");
+ textarea.parentNode.querySelector("span").innerHTML = text;
+}
+const lightboxForm = document.querySelector(".lightbox-form");
+lightboxForm.onsubmit = (el) =>{
+ const form = new FormData(lightboxForm);
+ const orderTime = form.get('order-time').split(':').map(num=>+num);
+ const now = new Date();
+ const nowTime = [now.getHours(), now.getMinutes()];
+ if (orderTime.length === 1 || nowTime[0] > orderTime[0] || nowTime[0] === orderTime[0] && nowTime[1] > orderTime[1]){
+ lightboxForm.querySelector("input").style.border = "1px red solid";
+ alert("Мы не умеем перемещаться во времени. Выберите время позже, чем текущее");
+ return false;
+ }
+}
+addCoffee();
+deleteCoffee(template);
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 68f5581..24f117a 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,5 @@
.beverage {
+ position: relative;
border: 1px solid #eee;
margin: 15px 0;
padding: 15px;
@@ -45,3 +46,99 @@
border-radius: 5px;
}
+.close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ cursor: pointer;
+}
+.close:before {
+ content: '+';
+ color: black;
+ position: absolute;
+ z-index: 2;
+ transform: rotate(45deg);
+ font-size: 50px;
+ line-height: 1;
+ top: -5px;
+ left: 6px;
+ transition: all 0.3s cubic-bezier(0.77, 0, 0.2, 0.85);
+}
+.close:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 100%;
+ background: black;
+ transition: all 0.3s cubic-bezier(0.77, 0, 0.2, 0.85);
+ transform: scale(0.01);
+}
+.close:hover:after {
+ transform: scale(1);
+}
+.close:hover:before {
+ transform: scale(0.8) rotate(45deg);
+ color: #fff;
+}
+.hidden{
+ backdrop-filter: blur(2px);
+ background-color: rgba(0,0,0,.3);
+ height: 100%;
+ width: 100%;
+ position: fixed;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ z-index: 5;
+ top: 0;
+ left: 0;
+}
+.lightbox {
+ width: 500px;
+ position: relative;
+ background-color: #f2eded;
+ z-index: 2;
+}
+.lightbox-head{
+ display: flex;
+ justify-content: space-between;
+}
+.countOfCoffee{
+ margin: 10px auto auto 30px;
+ text-align: center;
+ font-size: medium;
+}
+.lightboxClose{
+ top: 0px;
+ right: 0px;
+ position: relative;
+}
+table{
+ text-align: center;
+ width: 480px;
+ margin: 10px;
+ border-collapse: collapse;
+ border: 1px solid black;
+}
+th{
+ border-bottom: 1px solid grey;
+}
+td{
+ border-top: 1px solid grey;
+}
+.textarea{
+ display: flex;
+ align-items:flex-start;
+}
+.comment-text{
+ margin-left: 30px;
+}
+.lightbox-form{
+ margin: 5px auto 10px 30px;
+}