From 013f9017322cad9e3584c96bd8f0ae17e1234ff6 Mon Sep 17 00:00:00 2001 From: dariaradko5-dev Date: Sat, 16 May 2026 22:49:22 +0300 Subject: [PATCH 1/2] feat: homework html+css --- index.html | 76 +++++++++++++- main.css | 299 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 363 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 5971bf7d..f9a767c5 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,83 @@ + My Page - - Apple - 4 - +
+ +
+
+ + +
+ +
+ Помідори +
+ 2 +
+
+ +
+
+
+ Печиво +
+ + 2 + +
+
+ + +
+
+
+ Сир +
+ + 1 + +
+
+ + +
+
+
+ +
+
+

Залишилось

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

Куплено

+
+ Помідори + 2 +
+
+
+ +
+ +
+

Buy List

+

Created by:

+

Radko Daria

+
\ No newline at end of file diff --git a/main.css b/main.css index 00bc872e..ea7c8740 100644 --- a/main.css +++ b/main.css @@ -1,17 +1,300 @@ -.product-item { - background-color: gray; +* { + box-sizing: border-box; +} +.container { + width: 100%; + padding: 0 16px; + display: flex; + gap: 30px; + margin: 30px auto; +} +@media (max-width: 650px){ + .container{ + align-items: stretch; + flex-direction: column; + } +} + +.firstBlock{ + background-color: white; + border-radius: 5px; + box-shadow: 0 4px 3px black; + flex:2; + display: flex; + flex-direction: column; +} +form{ + width: 100%; + border-bottom: 1px solid grey; + display: flex; + margin-bottom: 15px; + padding-bottom: 15px; + padding: 15px 15px 15px 15px; +} +form input{ + font-size: 14px; + border:1px solid gray; + flex:1; + border-right: none; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + +} +button[data-tooltip="Цей товар не купили"]{ + background-color: rgb(229, 229, 233); + border-radius: 5px; + box-shadow:inset 0 -3px 0 rgb(178, 177, 177); + font-size: 12px; + padding: 10px; + color:black; + border: none; +} +button[data-tooltip="Цей товар вже куплено"]{ + background-color: rgb(229, 229, 233); + border-radius: 5px; + box-shadow:inset 0 -3px 0 rgb(178, 177, 177); + font-size: 12px; + padding: 10px; + color:black; + border: none; +} +button[data-tooltip="Додати товар"]{ + background-color: rgb(95, 95, 235); + border-top-right-radius: 5px; + border-bottom-right-radius:5px ; + box-shadow:inset 0 -3px 0 rgb(79, 31, 176); + font-size: 14px; + font-weight: bold; + padding: 10px; + color:white; + border-color: gray; + border: none; +} +button[data-tooltip="Збільшити"]{ + background-color: rgb(25, 175, 103); + box-shadow:inset 0 -3px 0 rgb(26, 141, 112); + font-size: 16px; + color:white; + border-radius: 50%; display: inline-block; - height: 25px; - padding: 5px; + height: 30px; + width: 30px; + text-align: center; + padding: 0; + border: none; +} +button[data-tooltip="Зменшити"]{ + background-color: rgb(223, 46, 46); + box-shadow:inset 0 -3px 0 rgb(162, 32, 32); + font-size: 16px; + color:white; + border-radius: 50%; + display: inline-block; + height: 30px; + width: 30px; + text-align: center; + padding: 0; + border: none; +} +button[data-tooltip="Видалити"]{ + background-color: rgb(223, 46, 46); + box-shadow:inset 0 -3px 0 rgb(162, 32, 32); + font-size: 16px; + color:white; border-radius: 5px; + display: inline-block; + height: 30px; + width: 30px; + text-align: center; + border: none; + +} +.secondBlock{ + background-color: white; + border-radius: 5px; + box-shadow: 0 4px 3px black; + flex:1; + flex-direction: column; + overflow: hidden; +} +.product-item { + background-color: white; + align-items: center; + display: grid; + grid-template-columns: 40% 20% 40%; + padding: 10px 5px; + width:100%; + border-bottom: 1px solid grey; + gap: 5px; + padding: 15px 15px; +} +.status{ + background-color: white; + padding: 10px 5px; + width:100%; + border-bottom: 1px solid grey; + gap: 5px; +} +.product-name{ + font-size: 18px; +} +.status:last-child { + border-bottom: none; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; } +h3{ + background-color: white; + font-size: 22px; + font-weight: bold; + border-bottom:1px solid grey; + margin-top: 0; + width:100%; + margin-bottom: 15px; + padding: 15px 15px 10px 15px; +} + +.product{ + background-color: rgb(222, 221, 221); + justify-content: center; + align-items: center; + display: inline-flex; + padding: 5px 10px; + border-radius: 5px; + gap: 5px; + margin-left: 15px; + margin-bottom: 5px; +} +.product-name-not-bought{ + text-decoration: line-through; + flex: 1; + font-size: 18px; +} +.product-name-not-bought-block2{ + text-decoration: line-through; +} +.product-item:last-child { + border-bottom: none; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} +.amountContr{ + display:flex; + justify-content: center; + align-items: center; + gap: 5px; +} +.product-status{ + display:flex; + justify-content: flex-end; + align-items: center; + gap: 5px; + padding-right: 15px; +} .amount { - background-color: yellow; + background-color: rgb(255, 149, 0); border-radius: 10px; - - display: inline-block; + display: inline-flex; height: 20px; width: 20px; + justify-content: center; + align-items: center; +} +.amountsqr{ + background-color: rgb(222, 221, 221); + border-radius: 3px; + display: inline-flex; + height: 30px; + width: 30px; + justify-content: center; + align-items: center; +} +.badge{ + position: fixed; + left: 10px; + bottom: 0px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + color: white; + background-color: rgb(145, 2, 145); text-align: center; -} \ No newline at end of file + padding: 10px; +} +.badge .created, +.badge .author { + max-height: 0; + visibility: hidden; + overflow: hidden; + margin: 0; + transition: max-height 1s ease, opacity 1s ease, margin 1s ease; +} +.badge .title{ + font-size: 20px; + font-weight: bold; + margin: 0; +} +.badge .created{ + font-size: 10px; +} +.badge .author{ + font-size: 14px; +} +.badge:hover { + background-color: rgb(118, 26, 57); +} +.badge:hover .created, +.badge:hover .author { + max-height: 30px; + visibility: visible; + margin-top: 10px; +} + +@media print{ + .badge{ + background-color: white; + color:black; + border: 1px solid rgb(145, 2, 145); + } + .badge .created, + .badge .author { + visibility: visible; + color: black; + } + .badge .title { + font-size: 0; + } + .badge .title::before { + content: "Radko Daria"; + font-size: 20px; + color: rgb(0, 0, 0); + } +} +body{ + background-color: rgb(178, 177, 177); + font-family:Arial; +} +button[data-tooltip] { + position: relative; +} +button[data-tooltip]::after { + content: attr(data-tooltip); + bottom: 100%; + left: 50%; + position: absolute; + transform: translate(-50%, 15px) scale(0); + transform-origin: bottom center; + color:white; + font-size:12px; + background-color:rgb(145, 2, 145); + padding: 5px; + border-radius: 5px; + visibility: hidden; + transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s ease, visibility 1s ease; +} +button[data-tooltip]:hover::after { + visibility: visible; + opacity: 1; + transform: translate(-50%, 0) scale(1); +} + From ad476320f5fad98850450d730b7039cf32b8ef59 Mon Sep 17 00:00:00 2001 From: dariaradko5-dev Date: Sat, 23 May 2026 22:57:45 +0300 Subject: [PATCH 2/2] Add JavaScript logic and updates --- index.html | 55 ++++--------------------- javaScript.js | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++ main.css | 10 +++++ 3 files changed, 125 insertions(+), 48 deletions(-) create mode 100644 javaScript.js diff --git a/index.html b/index.html index f9a767c5..d6a9e9d8 100644 --- a/index.html +++ b/index.html @@ -12,64 +12,22 @@
-
- - + + +
-
- Помідори -
- 2 -
-
- -
-
-
- Печиво -
- - 2 - -
-
- - -
-
-
- Сир -
- - 1 - -
-
- - -
-
+

Залишилось

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

Куплено

-
- Помідори - 2 -
+
@@ -80,5 +38,6 @@

Куплено

Created by:

Radko Daria

+ \ No newline at end of file diff --git a/javaScript.js b/javaScript.js new file mode 100644 index 00000000..e9cced99 --- /dev/null +++ b/javaScript.js @@ -0,0 +1,108 @@ +const nameInput=document.getElementById("product-input"); +const productItem=document.getElementById("product-item"); +const formElem=document.getElementById("add-form"); +const productLeft=document.getElementById("product-left"); +const productBought=document.getElementById("product-bought"); +let savedData = localStorage.getItem("box"); + +let products = savedData ? JSON.parse(savedData):[ + {id: 1, name:"Помідори", isBought:true, amount:2, isEdit: false}, + {id: 2, name: "Печиво", isBought:false, amount:2, isEdit: false}, + {id: 3, name: "Сир", isBought:false, amount:1, isEdit: false} +]; + +formElem.addEventListener("submit",function(event){ + event.preventDefault(); + const nameProduct=nameInput.value.trim(); + if(nameProduct===""){ + return; + } + const addProduct={id: Date.now(), name: nameProduct, isBought:false, amount: 1, isEdit:false}; + products.push(addProduct); + nameInput.value=""; + nameInput.focus(); + drawListProducts(); +}); +function drawListProducts(){ + productItem.innerHTML=""; + productLeft.innerHTML=""; + productBought.innerHTML=""; + products.forEach(product => { + let productElem=document.createElement("div"); + productElem.className="product-item"; + productElem.dataset.id=product.id; + productElem.innerHTML = ` + ${product.isEdit && !product.isBought? ``:`${product.name}` + } + +
+ + ${product.amount} + +
+ +
+ + +
+ `; + productItem.appendChild(productElem); + let stateItem=document.createElement("div"); + stateItem.className="product"; + stateItem.innerHTML=` + ${product.name} + ${product.amount} + `; + if(product.isBought){ + productBought.appendChild(stateItem); + } + else{ + productLeft.appendChild(stateItem); + } + + }); + localStorage.setItem("box", JSON.stringify(products)); + +} +productItem.addEventListener("click", function(event) { + if(event.target.tagName!=="BUTTON"&&!event.target.classList.contains("product-name")){return} + const row=event.target.closest(".product-item"); + const prodId=Number(row.dataset.id); + const productCur=products.find(product=>product.id===prodId); + if(event.target.classList.contains("product-name")){ + productCur.isEdit=true; + drawListProducts(); + const freshRow = productItem.querySelector(`[data-id="${prodId}"]`); + freshRow.querySelector(".input-edit").focus(); + return; + } + if(event.target.textContent==="+"){ + productCur.amount++; + } + if (event.target.textContent==="-") { + if(productCur.amount>1){ + productCur.amount--; + } + } + if (event.target.textContent==="x"){ + products=products.filter(product=>product.id!=prodId); + } + if(event.target.textContent==="Не куплено"||event.target.textContent==="Куплено"){ + productCur.isBought=!productCur.isBought; + } + drawListProducts(); +}); +productItem.addEventListener("focusout", function(event){ + if(event.target.classList.contains("input-edit")){ + const row=event.target.closest(".product-item"); + const prodId=Number(row.dataset.id); + const productCur=products.find(product=>product.id===prodId); + const newVal=event.target.value.trim(); + if(newVal!=""){ + productCur.name=newVal; + } + productCur.isEdit=false; + drawListProducts(); + } +}) +drawListProducts(); \ No newline at end of file diff --git a/main.css b/main.css index ea7c8740..40d1225d 100644 --- a/main.css +++ b/main.css @@ -297,4 +297,14 @@ button[data-tooltip]:hover::after { opacity: 1; transform: translate(-50%, 0) scale(1); } +.hidden{ + display: none !important; +} +.input-edit{ + width: 100%; + font-size: 18px; + padding: 2px 5px; + border:1px solid grey ; + border-radius: 3px; +} \ No newline at end of file