diff --git a/index.html b/index.html index 5971bf7d..6b39718f 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + My Page @@ -7,10 +8,75 @@ + - - Apple - 4 - +
+ +
+
+ + +
+ +
+ + Apple + + 4 + + + + + + Tomato + + 4 + + + + + + Cookie + + 4 + + + + +
+
+ +
+
+

Залишилося

+ + Tomatoes + 4 + + + Cookie + 4 + + + Apple + 4 + +
+ +
+

Куплено

+
+
+ +
+ +
+ Buy List + Topchyi Violetta +
+ + \ No newline at end of file diff --git a/jsCode.js b/jsCode.js new file mode 100644 index 00000000..60259d1c --- /dev/null +++ b/jsCode.js @@ -0,0 +1,150 @@ +const input = document.querySelector(".input-product"); +const form = document.querySelector(".add-product"); +const productList = document.querySelector("#product-list"); +const noBought = document.querySelector("#no-bought"); +const bought = document.querySelector("#bought"); + +const savedProduct = localStorage.getItem("products"); +if (savedProduct) productList.innerHTML = savedProduct; + +form.addEventListener("submit", function(event) { + event.preventDefault(); + const productName = input.value; + if (productName === "") + return; + + const productItem = document.createElement("span"); + productItem.classList.add("product-item"); + productItem.innerHTML = ` + ${productName} + + 1 + + + + `; + + productList.appendChild(productItem); + saveProduct(); + input.value = ""; + input.focus(); + updateRightPart(); +}) + +productList.addEventListener("click", function(event) { + if (event.target.classList.contains("delete-button")) { + const productItem = event.target.closest(".product-item"); + productItem.remove(); + saveProduct(); + updateRightPart(); + } +}) + +productList.addEventListener("click", function(event) { + if (event.target.classList.contains("buy-button")) { + const productItem = event.target.closest(".product-item") + productItem.classList.toggle("bought"); + + const minusButton = productItem.querySelector(".minus-button"); + const plusButton = productItem.querySelector(".plus-button"); + const deleteButton = productItem.querySelector(".delete-button"); + + minusButton.classList.toggle("hidden"); + plusButton.classList.toggle("hidden"); + deleteButton.classList.toggle("hidden"); + + if (productItem.classList.contains("bought")) { + event.target.textContent = "Не куплено"; + saveProduct(); + updateRightPart(); + } else { + event.target.textContent = "Куплено"; + saveProduct(); + updateRightPart(); + } + } +}) + +productList.addEventListener("click", function(event) { + if (event.target.classList.contains("product-name")) { + const productItem = event.target.closest(".product-item"); + const previousName = event.target.textContent; + const input = document.createElement("input"); + + input.type = "text"; + input.value = previousName; + input.classList.add("input-product"); + + event.target.replaceWith(input); + input.focus(); + updateRightPart(); + input.addEventListener("blur", function() { + const newName = document.createElement("span"); + newName.classList.add("product-name"); + newName.textContent = input.value; + input.replaceWith(newName); + saveProduct(); + updateRightPart(); + }) + } +}) + +productList.addEventListener("click", function(event) { + if (event.target.classList.contains("plus-button")) { + const productItem = event.target.closest(".product-item"); + const amount = productItem.querySelector(".amount"); + const minusButton = productItem.querySelector(".minus-button"); + + let quantity = Number(amount.textContent); + quantity++; + + amount.textContent = quantity; + if (quantity > 1) { + minusButton.disabled = false; + } + saveProduct(); + updateRightPart(); + } +}) + +productList.addEventListener("click", function(event) { + if (event.target.classList.contains("minus-button")) { + const productItem = event.target.closest(".product-item"); + const amount = productItem.querySelector(".amount"); + + let quantity = Number(amount.textContent); + if (quantity > 1) { + quantity--; + amount.textContent = quantity; + } + + if (quantity === 1) event.target.disabled = true; + saveProduct(); + updateRightPart(); + } +}) + +function updateRightPart() { + noBought.innerHTML = "

Залишилося

"; + bought.innerHTML = "

Куплено

"; + const allProduct = document.querySelectorAll(".product-item"); + allProduct.forEach(function(productItem) { + const name = productItem.querySelector(".product-name").textContent; + const amount = productItem.querySelector(".amount").textContent; + const span = document.createElement("span"); + + span.classList.add("product-item-right"); + span.innerHTML = `${name} ${amount}`; + + if (productItem.classList.contains("bought")) bought.appendChild(span); + else noBought.appendChild(span); + }) +} + +function saveProduct() { + localStorage.setItem("products", productList.innerHTML); +} \ No newline at end of file diff --git a/main.css b/main.css index 00bc872e..3a2caae4 100644 --- a/main.css +++ b/main.css @@ -1,17 +1,221 @@ +body { + background-color: rgb(200, 207, 213); +} + +.product-item-right { + color: white; + display: inline-block; + height: 25px; + padding: 5px; + border-radius: 5px; +} + .product-item { - background-color: gray; - display: inline-block; - height: 25px; - padding: 5px; - border-radius: 5px; + border: 1px solid gainsboro; + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; } .amount { - background-color: yellow; - border-radius: 10px; - - display: inline-block; - height: 20px; - width: 20px; - text-align: center; + background-color: rgb(188, 183, 183); + width: 30px; + height: 30px; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; +} + +.main { + width: 100%; + display: grid; + gap: 10px; + grid-template-columns: 2fr 1fr; +} + +.left { + display: flex; + flex-direction: column; + background-color: white; + border-radius: 10px; + padding: 10px; + gap: 10px; +} + +.right { + display: flex; + flex-direction: column; + background-color: white; + border-radius: 10px; + padding: 10px; +} + +.amount-right { + border-radius: 10px; + display: inline-block; + height: 20px; + width: 20px; + text-align: center; +} + +.product-item-right { + background-color: rgb(147, 157, 219); + align-items: center; + gap: 10px; + padding: 10px; + font-size: 20px; +} + +.amount-right { + background-color: orange; + color: white; + width: 30px; + height: 30px; + justify-content: center; +} + +.add-product { + display: flex; + gap: 10px; +} + +.input-product { + height: 30px; + border: 1px solid gainsboro; + border-radius: 5px; + padding-left: 15px; + font-size: 15px; +} + +.add-button { + width: 100px; + border-color: rgb(149, 195, 235); + border-radius: 5px; + background-color: rgb(149, 195, 235); + color: white; + font-size: 15px; +} + +.plus-button, +.minus-button { + border: none; + border-radius: 40px; + color: white; + font-size: 20px; +} + +.plus-button { + background-color: green; +} + +.minus-button { + background-color: red; +} + +.buy-button { + height: 30px; + width: 100px; + border: 1px solid gainsboro; + border-radius: 5px; + background-color: rgb(149, 195, 235); + color: white; + font-size: 16px; +} + +.delete-button { + border: 1px solid gainsboro; + border-radius: 5px; + background-color: red; + color: white; + font-size: 20px; +} + +button { + position: relative; +} + +button::after { + content: attr(data-tooltip); + position: absolute; + height: 30px; + font-size: 13px; + background-color: plum; + color: white; + padding: 10px; + border-radius: 5px; + opacity: 0; +} + +button:hover::after { + opacity: 1; + height: 50px; + font-size: 20px; + transition: 500ms +} + +@media (max-width: 500px) { + .main { + grid-template-columns: 1fr; + } +} + +.badge { + width: 150px; + height: 50px; + display: flex; + align-items: center; + flex-direction: column; + overflow: hidden; + position: fixed; + left: 0; + bottom: 0; + background-color: rgb(155, 85, 220); + color: aliceblue; + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} + +.badge-buyList { + line-height: 50px; +} + +.badge:hover { + height: 100px; + background-color: blue; + color: aliceblue; + transition: 200ms +} + +@media print { + .badge { + background: white !important; + border: 2px solid rgb(155, 85, 220); + color: black !important; + height: 50px; + } + .badge-buyList { + display: none; + } + .badge-name { + display: block; + line-height: 50px; + color: black; + } +} + +.bought { + text-decoration: line-through; +} + +.hidden { + display: none; +} + +.right-top, +.right-bottom { + display: flex; + flex-wrap: wrap; + gap: 10px; } \ No newline at end of file