diff --git a/index.html b/index.html index 5971bf7d..d7862232 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,64 @@ My Page - - - - Apple - 4 - +
+
+ + +
+
+

Помідори

+
2
+ +
+
+
+

Печиво

+ +
2
+ + + +
+
+
+

Сир

+ +
1
+ + + +
+
+
+ + \ No newline at end of file diff --git a/main.css b/main.css index 00bc872e..945b45dd 100644 --- a/main.css +++ b/main.css @@ -1,17 +1,233 @@ -.product-item { - background-color: gray; - display: inline-block; - height: 25px; - padding: 5px; - border-radius: 5px; -} - -.amount { - background-color: yellow; - border-radius: 10px; - - display: inline-block; - height: 20px; - width: 20px; - text-align: center; + + + +*{ + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; +} + +body{ + background: #dcdcdc; + padding: 35px 25px; + display: flex; + gap: 40px; + align-items: flex-start; +} + +.main-block{ + flex: 1; + min-width: 700px; + background: white; + border-radius: 6px; + box-shadow: 0 2px 6px rgba(0,0,0,0.15); + overflow: hidden; +} + +.inner-box{ + display: flex; + align-items: center; + gap: 14px; + padding: 18px 24px; + flex-wrap: nowrap; +} + +.name-enter{ + width: 76%; + height: 62px; + border: 1px solid #d7d7d7; + border-right: none; + padding-left: 22px; + font-size: 20px; + outline: none; + margin: 28px 0 28px 24px; +} + +input::placeholder{ + color: #a0a0a0; + font-size: 18px; +} + +.add-item{ + width: 18%; + height: 62px; + border: none; + background: #2f93d9; + color: white; + font-size: 20px; + font-weight: bold; + cursor: pointer; + margin: 20px 20px 20px 0px; +} + +hr{ + border: none; + border-top: 1px solid #e6e6e6; +} + +.tomato, +.biscuts, +.product-add{ + width: 260px; + font-size: 20px; + margin: 0; + flex-shrink: 0; + font-size: 20px; + vertical-align: middle; +} + +.tomato{ + text-decoration: line-through; +} + +.product-add{ + border: 1px solid #58aafc; + height: 38px; + padding-left: 10px; + border-radius: 3px; + outline: none; + margin-top: 18px; + margin-bottom: 18px; +} + +.number, +.number-buy{ + display: inline-flex; + align-items: center; + justify-content: center; + width: 48px; + height: 42px; + background: #efefef; + border-radius: 6px; + font-size: 30px; + font-weight: bold; + color: #666; + vertical-align: middle; + flex-shrink: 0; +} + +.sub-count, +.add-count, +.sub-count-dis{ + width: 54px; + height: 54px; + border-radius: 50%; + border: none; + color: white; + font-size: 34px; + font-weight: bold; + vertical-align: middle; + cursor: pointer; + margin-right: 10px; + margin-left: 10px; + flex-shrink: 0; +} + +.sub-count{ + background: #de2d2d; +} + +.add-count{ + background: #31c54b; +} + +.sub-count-dis{ + background: #f1a6a6; + cursor: default; + pointer-events: none; +} + +.buy, +.buy-no{ + width: 160px; + height: 52px; + background: #efefef; + border: 1px solid #d6d6d6; + border-radius: 6px; + font-size: 18px; + font-weight: bold; + color: #666; + cursor: pointer; + margin-left: auto; +} + +.cancel{ + width: 56px; + height: 52px; + margin-left: 10px; + margin-right: 10px; + background: #e93030; + border: none; + border-radius: 6px; + color: white; + font-size: 28px; + font-weight: bold; + cursor: pointer; + flex-shrink: 0; +} + +.additional-block{ + width: 420px; + flex-shrink: 0; + background: white; + border-radius: 6px; + box-shadow: 0 2px 6px rgba(0,0,0,0.15); + overflow: hidden; + margin-right: 50px; +} + +.header{ + font-size: 28px; + font-weight: 800; + padding: 24px; +} + +.buy-show{ + display: inline-flex; + align-items: center; + background: #efefef; + border-radius: 6px; + padding: 10px 14px; + margin: 24px 0 24px 20px; +} + +.small-font, +.small-font-dis{ + font-size: 20px; + color: #555; +} + +.small-font-dis{ + text-decoration: line-through; +} + +.small-label, +.small-label-dis{ + width: 28px; + height: 28px; + margin-left: 10px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: #ff7b16; + color: white; + font-size: 16px; + font-weight: bold; +} + +.small-label-dis{ + text-decoration: line-through; +} + +@media (max-width: 500px){ + body{ + flex-direction: column; + padding: 15px; + } + .main-block, + .additional-block{ + width: 100%; + } } \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..da1cac0a --- /dev/null +++ b/script.js @@ -0,0 +1,334 @@ +const mainfig = document.querySelector("figure"); +const enterProduct = document.querySelector("input"); +const addButton = document.querySelector("button"); +const wait = document.querySelector("#wait"); +const bought = document.querySelector("#bought"); + + + +function addProduct() { + +const enterValue = enterProduct.value; + +if (enterValue.trim() === "") return; + +let innerBox = document.createElement("section"); +innerBox.classList.add("inner-box"); + +let hr = document.createElement("hr"); + +let productName = document.createElement("p"); +productName.textContent = enterValue; +productName.classList.add("biscuts"); + +let subNumber = document.createElement("button"); +subNumber.textContent = "-"; +subNumber.classList.add("sub-count-dis"); + +let number = document.createElement("figure"); +number.textContent = "1"; +number.classList.add("number"); + +let addNumber = document.createElement("button"); +addNumber.textContent = "+"; +addNumber.classList.add("add-count"); + +let buy = document.createElement("button"); +buy.textContent = "Куплено"; +buy.classList.add("buy"); + +let cancel = document.createElement("button"); +cancel.textContent = "X"; +cancel.classList.add("cancel"); + +let buyFig = document.createElement("section"); +buyFig.classList.add("buy-show"); + +let product = document.createElement("p"); +product.textContent = enterValue; +product.classList.add("small-font"); + +let label = document.createElement("label"); +label.textContent = "1"; +label.classList.add("small-label"); + +mainfig.appendChild(hr); +mainfig.appendChild(innerBox); +innerBox.appendChild(productName); +innerBox.appendChild(subNumber); +innerBox.appendChild(number); +innerBox.appendChild(addNumber); +innerBox.appendChild(buy); +innerBox.appendChild(cancel); + +wait.appendChild(buyFig); +buyFig.appendChild(product); +buyFig.appendChild(label); + +enterProduct.value = ""; +enterProduct.focus(); +}; + +addButton.addEventListener("click", addProduct); + +enterProduct.addEventListener("keydown", (event) => { + + if (event.key === "Enter") { + addProduct(); + } +}); + +mainfig.addEventListener("click", (event) => { + + if (event.target.classList.contains("cancel")) { + + const innerBoxing = event.target.closest(".inner-box"); + + const product = innerBoxing.querySelector(".biscuts"); + + event.target.parentElement.remove(); + + let list = wait.children + for (let l of list){ + let text = l.querySelector(".small-font"); + if (text.textContent == product.textContent){ + l.remove(); + break; + } + } + } + + if (event.target.classList.contains("add-count")) { + + const innerBoxing = event.target.closest(".inner-box"); + const number = innerBoxing.querySelector(".number"); + let num = Number(number.textContent); + num++; + number.textContent = num; + + if(num == 2){ + const sub = innerBoxing.querySelector(".sub-count-dis"); + sub.classList.remove("sub-count-dis"); + sub.classList.add("sub-count"); + } + + const product = innerBoxing.querySelector(".biscuts"); + + let list = wait.children + for (let l of list){ + let text = l.querySelector(".small-font"); + let label = l.querySelector(".small-label"); + if (text.textContent == product.textContent){ + label.textContent = num; + break; + } + } + } + + if (event.target.classList.contains("sub-count")) { + + const innerBoxing = event.target.closest(".inner-box"); + const number = innerBoxing.querySelector(".number"); + let num = Number(number.textContent); + num--; + number.textContent = num; + + if(num == 1){ + event.target.classList.remove("sub-count"); + event.target.classList.add("sub-count-dis"); + } + + const product = innerBoxing.querySelector(".biscuts"); + + let list = wait.children + for (let l of list){ + let text = l.querySelector(".small-font"); + let label = l.querySelector(".small-label"); + if (text.textContent == product.textContent){ + label.textContent = num; + break; + } + } + } + + if (event.target.classList.contains("biscuts")) { + + const name = event.target; + + let changeProduct = document.createElement("input"); + changeProduct.type = "text"; + changeProduct.classList.add("product-add"); + + let list = wait.children + for (let l of list){ + let text = l.querySelector(".small-font") + if (text.textContent == event.target.textContent){ + l.remove(); + break; + } + } + + name.replaceWith(changeProduct); + changeProduct.focus(); + } + + if (event.target.classList.contains("buy")) { + + const innerBoxing = event.target.closest(".inner-box"); + + const product = innerBoxing.querySelector(".biscuts"); + product.classList.remove("biscuts"); + product.classList.add("tomato"); + + const minus = innerBoxing.querySelector(".sub-count"); + if (minus != null){ + minus.remove(); + }else { + const minusDis = innerBoxing.querySelector(".sub-count-dis"); + minusDis.remove(); + } + const plus = innerBoxing.querySelector(".add-count"); + plus.remove(); + + const number = innerBoxing.querySelector(".number"); + number.classList.remove("number"); + number.classList.add("number-buy"); + let num = Number(number.textContent); + + event.target.remove(); + let cancel = innerBoxing.querySelector(".cancel"); + cancel.remove(); + + let noBuy = document.createElement("button"); + noBuy.textContent = 'Не куплено' + noBuy.classList.add("buy-no"); + + let buyFig = document.createElement("section"); + buyFig.classList.add("buy-show"); + + let prod = document.createElement("p"); + prod.textContent = product.textContent; + prod.classList.add("small-font-dis"); + + let label = document.createElement("label"); + label.textContent = num; + label.classList.add("small-label-dis"); + + let list = wait.children + for (let l of list){ + let text = l.querySelector(".small-font") + if (text.textContent == product.textContent){ + l.remove(); + break; + } + } + + innerBoxing.appendChild(noBuy); + + bought.appendChild(buyFig); + buyFig.appendChild(prod); + buyFig.appendChild(label); + } + + if (event.target.classList.contains("buy-no")) { + + const innerBoxing = event.target.closest(".inner-box"); + + const product = innerBoxing.querySelector(".tomato"); + product.classList.remove("tomato"); + product.classList.add("biscuts"); + + const number = innerBoxing.querySelector(".number-buy"); + number.classList.remove("number-buy"); + number.classList.add("number"); + let num = Number(number.textContent); + + event.target.remove(); + + let subNumber = document.createElement("button"); + subNumber.textContent = "-"; + if (num == 1){ + subNumber.classList.add("sub-count-dis"); + }else { + subNumber.classList.add("sub-count"); + } + + let addNumber = document.createElement("button"); + addNumber.textContent = "+"; + addNumber.classList.add("add-count"); + + let Buy = document.createElement("button"); + Buy.textContent = "Куплено"; + Buy.classList.add("buy"); + + const cancel = document.createElement("button"); + cancel.textContent = "X"; + cancel.classList.add("cancel"); + + let buyFig = document.createElement("section"); + buyFig.classList.add("buy-show"); + + let prod = document.createElement("p"); + prod.textContent = product.textContent; + prod.classList.add("small-font"); + + let label = document.createElement("label"); + label.textContent = num; + label.classList.add("small-label"); + + let list = bought.children + for (let l of list){ + let text = l.querySelector(".small-font-dis") + if (text.textContent == product.textContent){ + l.remove(); + break; + } + } + + number.before(subNumber); + innerBoxing.appendChild(addNumber); + innerBoxing.appendChild(Buy); + innerBoxing.appendChild(cancel); + + wait.appendChild(buyFig); + buyFig.appendChild(prod); + buyFig.appendChild(label); + } + +}); + +mainfig.addEventListener("focusout", (event) => { + + if (event.target.classList.contains("product-add")) { + + const name = event.target; + const newProduct = event.target.value; + if (newProduct.trim() === "") return; + + let changeProduct = document.createElement("p"); + changeProduct.textContent = newProduct; + changeProduct.classList.add("biscuts"); + + const innerBoxing = event.target.closest(".inner-box"); + const number = innerBoxing.querySelector(".number"); + let num = Number(number.textContent); + + name.replaceWith(changeProduct); + + let buyFig = document.createElement("section"); + buyFig.classList.add("buy-show"); + + let prod = document.createElement("p"); + prod.textContent = changeProduct.textContent; + prod.classList.add("small-font"); + + let label = document.createElement("label"); + label.textContent = num; + label.classList.add("small-label"); + + wait.appendChild(buyFig); + buyFig.appendChild(prod); + buyFig.appendChild(label); + } +}); +