From 34f2d3d3db12f6957b7a0bf40a1056fe57a6b060 Mon Sep 17 00:00:00 2001 From: VeronikaBurmetskaV Date: Sat, 16 May 2026 23:50:23 +0300 Subject: [PATCH 1/2] hw1 --- index.html | 70 ++++++++++++-- main.css | 273 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 322 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 5971bf7d..3502970c 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,68 @@ - - + + - My Page - - + Veronika Burmetska - - Apple - 4 - +
+ +
+
+ + +
+
    +
  • + Помідори + + 2 + + + +
    • +
  • + Печиво + + 2 + + + +
    • +
  • + Сир + + 1 + + + +
    • +
+
+ +
+
+

Залишилося

+
    +
  • Печиво2
    • +
  • Сир1
    • +
+
+ +
+

Куплено

+
    +
  • Помідори2
    • +
+
+
+ +
+ + \ No newline at end of file diff --git a/main.css b/main.css index 00bc872e..3f8f1a4f 100644 --- a/main.css +++ b/main.css @@ -1,17 +1,266 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + font-family: Arial, Helvetica, sans-serif; + padding: 18px; + background-color: #d1d1d1; + min-height: 100vh; +} + +.app-container { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 30px; + max-width: 900px; + margin: 0 auto; + padding-bottom: 440px; +} + +.add-item { + display: flex; + gap: 10px; + margin-bottom: 18px; +} + +.add-item input { + flex: 1; + padding: 12px; + border: 1px solid #b5b9c0; + border-radius: 6px; + font-size: 1rem; + outline: none; +} + +.add-item input:focus { + border-color: #244ed7; +} + +button { + border: none; + border-radius: 6px; + font-size: 1rem; + position: relative; +} + +.btn-add { + background-color: #1f7bd2; + color: white; + padding: 12px 24px; + font-weight: bold; +} + +.btn-add:hover { + background-color: hsl(221, 80%, 39%); +} + +.product-list { + flex: 2; + background: #ffffff; + padding: 20px; + border-radius: 6px; +} + +.product-list-items li { + display: flex; + align-items: center; + gap: 12px; + padding: 10px; + border-bottom: 1px solid #cdcfd2; +} + .product-item { - background-color: gray; - display: inline-block; - height: 25px; - padding: 5px; - border-radius: 5px; + flex: 1; + font-size: 1.1rem; +} + +.btn-minus { + background-color: #e02222; + color: #ffffff; + width: 32px; + height: 32px; + border-radius: 50%; + font-size: 1.2rem; + font-weight: bold; +} + +.btn-minus:hover{ + background-color: #da8e8e; +} + +.btn-plus { + background-color: #27d75f; + color: #ffffff; + width: 32px; + height: 32px; + border-radius: 50%; + font-size: 1.2rem; + font-weight: bold; +} + +.btn-plus:hover { + background-color: #99dfa1; } .amount { - background-color: yellow; - border-radius: 10px; - - display: inline-block; - height: 20px; - width: 20px; - text-align: center; + min-width: 20px; + text-align: center; + font-size: 16px; + background-color: #dbd9d9; + color: #363636; + border-radius: 6px; + padding: 5px 10px; +} + +.btn-bought { + background: #eee; + border: 1px solid #d6d3d3; + border-bottom: #b3b2b2 solid 2px; + border-radius: 6px; + padding: 5px 16px; + font-size: 16px; + cursor: pointer; + position: relative; +} + +.btn-bought:hover { + background-color: #ced1d4; +} + +.btn-remove { + background-color: #d32c2c; + color: white; + width: 36px; + height: 36px; + font-weight: bold; +} + +.btn-remove:hover { + background-color: #df9097; +} + +h2 { + font-size: 1.3rem; + margin-bottom: 18px; +} + +.panel { + display: flex; + flex-direction: column; + gap: 14px; + background: #ffffff; + padding: 8px; + border-radius: 6px; +} + +.left-items-panel, .bought-items-panel { + background: #ffffff; + padding: 18px; + border-radius: 6px; +} + +.left-list, .bought-list { + display: flex; + gap: 6px; +} + +.l-item, .b-item { + display: inline-flex; + align-items: center; + background-color: #f1f3f5; + padding: 12px 14px; + border-radius: 6px; + font-size: 0.9rem; +} + +.l-amount, .b-amount { + background-color: #f37a1e; + color: white; + font-size: 0.8rem; + padding: 3px 7px; + border-radius: 10px; + margin-left: 4px; +} + +.bought-items-panel .b-item { + text-decoration: line-through; + color: #131313; + background-color: #e9ecef; +} + +@media (max-width: 650px) { + .app-container{ + grid-template-columns: 1fr; + } +} + +[data-tooltip] { + position: relative; +} + +[data-tooltip]::after { + content: attr(data-tooltip); + position: absolute; + bottom: calc(100% + 6px); + left: 50%; + transform: translateX(-50%) scale(0.7); + transform-origin: bottom center; + background: #5f13a1; + color: #fff; + white-space: nowrap; + padding: 8px 12px; + border-radius: 20px; + font-size: 12px; + opacity: 0; + transition: opacity 0.2s ease, transform 0.2s ease; + z-index: 100; +} + +[data-tooltip]:hover::after { + opacity: 1; + transform: translateX(-50%) scale(1); +} + +.badge { + position: fixed; + bottom: 0; + left: 16px; + width: 120px; + border-radius: 6px 6px 0 0; + background: #6935c9; + color: #fff; + overflow: hidden; + z-index: 200; + cursor: default; + transform: translateY(calc(100% - 42px)); + transition: transform 0.3s ease, background 0.3s ease; +} + +.badge:hover { + transform: translateY(0); + background: #450ccc; +} + +.badge-label { + height: 40px; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 16px; +} + +.badge-author { + height: 70px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 12px; + text-align: center; + padding: 10px; + font-weight: bold; } \ No newline at end of file From fe4f94f70333c5ce1fb5d389417d782a2ddbc686 Mon Sep 17 00:00:00 2001 From: VeronikaBurmetskaV Date: Sat, 23 May 2026 22:48:57 +0300 Subject: [PATCH 2/2] feat: add hw2 --- buy-list.js | 196 ++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 21 +++--- 2 files changed, 207 insertions(+), 10 deletions(-) create mode 100644 buy-list.js diff --git a/buy-list.js b/buy-list.js new file mode 100644 index 00000000..5e767b93 --- /dev/null +++ b/buy-list.js @@ -0,0 +1,196 @@ +//2 +let products = [ + { + id: 1, name: "Помідори", amount: 2, isBought:true + }, + { + id: 2, name: "Печиво", amount: 2, isBought:false + }, + { + id: 3, name: "Сир", amount: 1, isBought:false + } +]; + +const addItem = document.getElementById("add-item"); +const item = document.getElementById("item"); +const productListItems = document.getElementById("product-list-items"); +const leftList = document.getElementById("left-list"); +const boughtList = document.getElementById("bought-list"); + +//1 +addItem.addEventListener("submit", (e)=>{ + e.preventDefault(); + + const name = item.value.trim(); + if(!name ) + return; + + const newItem={ + id: Date.now(), + name: name, + amount: 1, + isBought: false + }; + + products.push(newItem); + + item.value=""; + item.focus(); + render(); +}); + +function render(){ + + productListItems.innerHTML = ""; + leftList.innerHTML = ""; + boughtList.innerHTML = ""; + + products.forEach(product => { + + const li = document.createElement('li'); + + //5 + const nameSpan = document.createElement('span'); + nameSpan.className = 'product-item'; + nameSpan.textContent = product.name; + + if (product.isBought) { + nameSpan.style.textDecoration = 'line-through'; + } + else + { + nameSpan.style.cursor = 'pointer'; + nameSpan.addEventListener('click', () => { + + const inputEdit = document.createElement('input'); + inputEdit.type = 'text'; + inputEdit.value = product.name; + inputEdit.className = 'product-item-input'; + + li.replaceChild(inputEdit, nameSpan); + inputEdit.focus(); + + const saveName = () => { + const newName = inputEdit.value.trim(); + if (newName) { + product.name = newName; + } + + render(); + }; + + inputEdit.addEventListener('blur', saveName); + inputEdit.addEventListener('keydown', (e) => { + if (e.key === 'Enter') saveName(); + }); + }); + } + + li.appendChild(nameSpan); + + //6 + if (!product.isBought) { + const btnMinus = document.createElement('button'); + btnMinus.className = 'btn-minus'; + btnMinus.textContent = '-'; + btnMinus.setAttribute('data-tooltip', 'Зменшити кількість'); + + if (product.amount <= 1) { + btnMinus.style.opacity = '0.6'; + btnMinus.disabled = true; + btnMinus.style.cursor = 'not-allowed'; + } + else + { + btnMinus.addEventListener('click', () => { + product.amount--; + render(); + }); + } + li.appendChild(btnMinus); + + const amountSpan = document.createElement('span'); + amountSpan.className = 'amount'; + amountSpan.textContent = product.amount; + li.appendChild(amountSpan); + + const btnPlus = document.createElement('button'); + btnPlus.className = 'btn-plus'; + btnPlus.textContent = '+'; + btnPlus.setAttribute('data-tooltip', 'Збільшити кількість'); + btnPlus.addEventListener('click', () => { + product.amount++; + render(); + }); + + li.appendChild(btnPlus); + + } + else + { + const amountSpan = document.createElement('span'); + amountSpan.className = 'amount'; + amountSpan.textContent = product.amount; + amountSpan.style.marginLeft = 'auto'; + li.appendChild(amountSpan); + } + + //4 + const btnBought = document.createElement("button") + btnBought.className = "btn-bought"; + btnBought.textContent = product.isBought ? "Куплено" : "Не куплено"; + btnBought.setAttribute("data-tooltip", product.isBought ? "Призначити як не куплене" : "Призначити як куплене"); + btnBought.addEventListener("click", ()=> { + product.isBought = !product.isBought; + render(); + }); + + li.appendChild(btnBought); + + //3 + if(!product.isBought){ + const btnRemove = document.createElement("button"); + + btnRemove.className = "btn-remove"; + btnRemove.textContent = "x"; + btnRemove. setAttribute("data-tooltip", "Прибрати товар"); + btnRemove.addEventListener("click", ()=> { + products = products.filter(products => products.id !==product.id); + render(); + }); + + li.appendChild(btnRemove); + } + + productListItems.appendChild(li); + + //7 + if(!product.isBought){ + const lItem = document.createElement("li"); + lItem.className="l-item"; + lItem.textContent=product.name; + + const lAmount = document.createElement("span"); + lAmount.className="l-amount"; + lAmount.textContent=product.amount; + + lItem.appendChild(lAmount); + leftList.appendChild(lItem); + } + else + { + const bItem = document.createElement("li"); + bItem.className = "b-item"; + bItem.textContent=product.name; + + const bAmount = document.createElement("span"); + bAmount.className="b-amount"; + bAmount.textContent=product.amount; + + bItem.appendChild(bAmount); + boughtList.appendChild(bItem); + } +}); +} + +render(); \ No newline at end of file diff --git a/index.html b/index.html index 3502970c..5bbe36b9 100644 --- a/index.html +++ b/index.html @@ -9,12 +9,12 @@
-
+ - +
-
    -
  • +
      +

Залишилося

-
    -
  • Печиво2
    • -
  • Сир1
    • +
      +

Куплено

-
    -
  • Помідори2
    • +
      +
@@ -64,5 +64,6 @@

Куплено

Buy List

Created by: Veronika Burmetska

+ \ No newline at end of file