diff --git a/index.html b/index.html index 5971bf7d..d6a9e9d8 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,42 @@ + My Page - - Apple - 4 - +
+ +
+
+ + +
+ +
+
+ +
+
+

Залишилось

+
+
+
+

Куплено

+
+
+
+ +
+ +
+

Buy List

+

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 00bc872e..40d1225d 100644 --- a/main.css +++ b/main.css @@ -1,17 +1,310 @@ -.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; + 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); +} +.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