From 5e7bbc4607e45ba39c408839b289547c0cc5cd64 Mon Sep 17 00:00:00 2001 From: Violetta Topchyi Date: Sat, 16 May 2026 21:11:47 +0300 Subject: [PATCH 1/4] Add product list and input section in index.html --- index.html | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 65 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 5971bf7d..9673d004 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,69 @@ - - Apple - 4 - +
+ +
+
+ + +
+ + + Apple + + 4 + + + + + + Tomato + + 4 + + + + + + Cookie + + 4 + + + + +
+ +
+
+

Залишилося

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

Куплено

+ + Apple + 4 + +
+
+ +
+ +
+ Buy List + Topchyi Violetta +
- \ No newline at end of file + From 9306b76b7107838d21f0d723613ee9d52d78b4f3 Mon Sep 17 00:00:00 2001 From: Violetta Topchyi Date: Sat, 16 May 2026 21:12:41 +0300 Subject: [PATCH 2/4] Refactor CSS styles for layout and appearance --- main.css | 206 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 191 insertions(+), 15 deletions(-) diff --git a/main.css b/main.css index 00bc872e..3c0dca9a 100644 --- a/main.css +++ b/main.css @@ -1,17 +1,193 @@ -.product-item { - background-color: gray; - display: inline-block; - height: 25px; - padding: 5px; - border-radius: 5px; +body{ + background-color: rgb(200, 207, 213); +} +.product-item-right { + color: white; + display: inline-block; + height: 25px; + padding: 5px; + border-radius: 5px; +} +.product-item{ + 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; -} \ No newline at end of file + 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; + } +} From 4d5068540fedc2183b065bc6e00f1c475bc02ae2 Mon Sep 17 00:00:00 2001 From: Violetta Topchyi Date: Sat, 16 May 2026 21:17:21 +0300 Subject: [PATCH 3/4] Refactor HTML structure for product display --- index.html | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 65 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 5971bf7d..9673d004 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,69 @@ - - Apple - 4 - +
+ +
+
+ + +
+ + + Apple + + 4 + + + + + + Tomato + + 4 + + + + + + Cookie + + 4 + + + + +
+ +
+
+

Залишилося

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

Куплено

+ + Apple + 4 + +
+
+ +
+ +
+ Buy List + Topchyi Violetta +
- \ No newline at end of file + From ef4463c23e37c96db2b77d40db5855eee1e5c236 Mon Sep 17 00:00:00 2001 From: hentsa Date: Sat, 23 May 2026 22:58:06 +0300 Subject: [PATCH 4/4] feat: add jsCode from hw2 --- index.html | 52 +++++++++++-------- jsCode.js | 150 +++++++++++++++++++++++++++++++++++++++++++++++++++++ main.css | 108 ++++++++++++++++++++++++-------------- 3 files changed, 247 insertions(+), 63 deletions(-) create mode 100644 jsCode.js diff --git a/index.html b/index.html index 9673d004..6b39718f 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + My Page @@ -7,45 +8,48 @@ +
-
+
-
+ - - Apple +
+ + Apple - 4 + 4 - - - Tomato + + + Tomato - 4 + 4 - - - Cookie + + + Cookie - 4 + 4 - + +
-
+

Залишилося

Tomatoes @@ -55,22 +59,24 @@

Залишилося

Cookie 4 -
- -
-

Куплено

- Apple - 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 3c0dca9a..3a2caae4 100644 --- a/main.css +++ b/main.css @@ -1,37 +1,41 @@ -body{ +body { background-color: rgb(200, 207, 213); } + .product-item-right { color: white; - display: inline-block; - height: 25px; - padding: 5px; - border-radius: 5px; + display: inline-block; + height: 25px; + padding: 5px; + border-radius: 5px; } -.product-item{ + +.product-item { border: 1px solid gainsboro; display: flex; justify-content: space-between; align-items: center; padding: 15px; } + .amount { background-color: rgb(188, 183, 183); width: 30px; height: 30px; border-radius: 5px; - display: flex; justify-content: center; align-items: center; } -.main{ + +.main { width: 100%; display: grid; gap: 10px; grid-template-columns: 2fr 1fr; } -.left{ + +.left { display: flex; flex-direction: column; background-color: white; @@ -39,20 +43,23 @@ body{ padding: 10px; gap: 10px; } -.right{ + +.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; + 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; @@ -60,6 +67,7 @@ body{ padding: 10px; font-size: 20px; } + .amount-right { background-color: orange; color: white; @@ -67,18 +75,21 @@ body{ height: 30px; justify-content: center; } -.add-product{ + +.add-product { display: flex; gap: 10px; } -.input-product{ + +.input-product { height: 30px; border: 1px solid gainsboro; border-radius: 5px; padding-left: 15px; font-size: 15px; } -.add-button{ + +.add-button { width: 100px; border-color: rgb(149, 195, 235); border-radius: 5px; @@ -86,19 +97,24 @@ body{ color: white; font-size: 15px; } -.plus-button, .minus-button{ + +.plus-button, +.minus-button { border: none; border-radius: 40px; color: white; font-size: 20px; } -.plus-button{ + +.plus-button { background-color: green; } -.minus-button{ + +.minus-button { background-color: red; } -.buy-button{ + +.buy-button { height: 30px; width: 100px; border: 1px solid gainsboro; @@ -107,7 +123,8 @@ body{ color: white; font-size: 16px; } -.delete-button{ + +.delete-button { border: 1px solid gainsboro; border-radius: 5px; background-color: red; @@ -115,23 +132,23 @@ body{ font-size: 20px; } -button{ +button { position: relative; } -button::after{ + +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{ + +button:hover::after { opacity: 1; height: 50px; font-size: 20px; @@ -144,50 +161,61 @@ button:hover::after{ } } -.badge{ +.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{ + +.badge-buyList { line-height: 50px; } -.badge:hover{ + +.badge:hover { height: 100px; background-color: blue; color: aliceblue; transition: 200ms } - @media print { - .badge{ + .badge { background: white !important; border: 2px solid rgb(155, 85, 220); color: black !important; height: 50px; } - - .badge-buyList{ + .badge-buyList { display: none; } - - .badge-name{ + .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