diff --git a/index.html b/index.html index 5971bf7d..bd5390a9 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,40 @@ - + - My Page - - - + Buy List + - - Apple - 4 - + +
+
+
+ + +
+ +
+
+ +
+
+

Залишилося

+
+
+ +
+

Куплено

+
+
+
+
+ +
+
Buy List
+
Created by:
Пожаров Костянтин
+
+ + \ No newline at end of file diff --git a/main.css b/main.css index 00bc872e..c3cfc3ed 100644 --- a/main.css +++ b/main.css @@ -1,17 +1,237 @@ -.product-item { - background-color: gray; - display: inline-block; - height: 25px; - padding: 5px; - border-radius: 5px; -} - -.amount { - background-color: yellow; - border-radius: 10px; - - display: inline-block; - height: 20px; - width: 20px; - text-align: center; +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, sans-serif; +} + +body { + background-color: #d1d5db; + padding: 20px; +} + +.container { + display: flex; + width: 900px; + margin: 0 auto; +} + +.left-column { + width: 600px; + background-color: white; + border-radius: 5px; + margin-right: 20px; +} + +.right-column { + width: 280px; +} + +@media (max-width: 650px) { + .container { + display: block; + width: 100%; + } + .left-column { + width: 100%; + margin-right: 0; + margin-bottom: 20px; + } + .right-column { + width: 100%; + } +} + +.add-form { + display: flex; + padding: 15px; + border-bottom: 1px solid #ccc; +} + +.add-form input { + width: 80%; + padding: 10px; + border: 1px solid #ccc; +} + +.add-form button { + width: 20%; + background-color: #3085d6; + color: white; + border: none; + cursor: pointer; +} + +.item { + display: flex; + align-items: center; + padding: 15px; + border-bottom: 1px solid #ccc; +} + +.item-name { + width: 40%; + font-size: 16px; +} + +.bought-text { + text-decoration: line-through; +} + +.item-controls { + display: flex; + width: 30%; +} + +.btn-circle { + width: 30px; + height: 30px; + border-radius: 50%; + border: none; + color: white; + cursor: pointer; +} + +.btn-minus { background-color: #d33; } +.btn-plus { background-color: #28a745; } + +.number { + background-color: #eee; + padding: 5px 15px; + margin: 0 5px; + border-radius: 5px; +} + +.btn-status { + padding: 5px 10px; + border: 1px solid #ccc; + cursor: pointer; +} + +.btn-delete { + background-color: #d33; + color: white; + border: none; + padding: 5px 10px; + margin-left: 5px; + cursor: pointer; +} + +.stat-box { + background-color: white; + border-radius: 5px; + margin-bottom: 20px; + padding: 15px; +} + +.stat-box h2 { + font-size: 18px; + margin-bottom: 10px; + border-bottom: 1px solid #ccc; + padding-bottom: 10px; +} + +.tag { + background-color: #eee; + display: inline-block; + padding: 5px; + border-radius: 5px; + margin-right: 5px; + font-size: 14px; +} + +.tag-number { + background-color: orange; + color: white; + border-radius: 50%; + padding: 2px 6px; + font-size: 12px; +} + +[data-tooltip] { + position: relative; +} + +[data-tooltip]::before { + content: attr(data-tooltip); + position: absolute; + bottom: 40px; + left: 0; + background-color: purple; + color: white; + padding: 5px 10px; + border-radius: 10px; + font-size: 12px; + opacity: 0; + transform: scale(0.5); + transition: 0.3s; + pointer-events: none; +} + +[data-tooltip]:hover::before { + opacity: 1; + transform: scale(1); +} + +.badge { + position: fixed; + bottom: -40px; + left: 20px; + width: 160px; + height: 100px; + background-color: #800080; + color: white; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + text-align: center; + padding-top: 15px; + transition: 0.5s; +} + +.badge-author { + margin-top: 25px; + font-size: 14px; + display: none; +} + +.badge:hover { + bottom: 0; + background-color: #4b0082; +} + +.badge:hover .badge-author { + display: block; +} + +@media print { + body { + background-color: white; + } + + .badge { + position: static; + background-color: white; + border: 2px solid purple; + color: black; + } + + .badge-title { + display: none; + } + + .badge-author { + display: block; + margin-top: 0; + } +} + +.edit-input { + width: 90%; + padding: 5px; + font-size: 16px; +} + +.btn-minus[disabled] { + opacity: 0.5; + cursor: not-allowed; } \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..8ebc8c7b --- /dev/null +++ b/script.js @@ -0,0 +1,157 @@ +const addInput = document.getElementById('add-input'); +const addBtn = document.getElementById('add-btn'); +const itemsList = document.getElementById('items-list'); +const leftToBuyList = document.getElementById('left-to-buy-list'); +const boughtList = document.getElementById('bought-list'); + +let items = [ + { name: 'Помідори', amount: 2, isBought: false }, + { name: 'Печиво', amount: 2, isBought: false }, + { name: 'Сир', amount: 1, isBought: false } +]; + +function render() { + itemsList.innerHTML = ''; + leftToBuyList.innerHTML = ''; + boughtList.innerHTML = ''; + + for (let i = 0; i < items.length; i++) { + const item = items[i]; + const itemDiv = document.createElement('div'); + itemDiv.className = 'item'; + + const nameDiv = document.createElement('div'); + nameDiv.appendChild(document.createTextNode(item.name)); + + if (item.isBought === true) { + nameDiv.className = 'item-name bought-text'; + } else { + nameDiv.className = 'item-name'; + nameDiv.onclick = function() { + const input = document.createElement('input'); + input.className = 'edit-input'; + input.value = item.name; + + input.onblur = function() { + if (input.value !== '') { + item.name = input.value; + } + render(); + }; + + nameDiv.innerHTML = ''; + nameDiv.appendChild(input); + input.focus(); + }; + } + + const controlsDiv = document.createElement('div'); + controlsDiv.className = 'item-controls'; + + if (!item.isBought) { + const btnMinus = document.createElement('button'); + btnMinus.className = 'btn-circle btn-minus'; + btnMinus.appendChild(document.createTextNode('-')); + if (item.amount === 1) { + btnMinus.disabled = true; + } + btnMinus.onclick = () => { + if (item.amount > 1) { + item.amount = item.amount - 1; + render(); + } + }; + + const numberSpan = document.createElement('span'); + numberSpan.className = 'number'; + numberSpan.appendChild(document.createTextNode(item.amount)); + + const btnPlus = document.createElement('button'); + btnPlus.className = 'btn-circle btn-plus'; + btnPlus.appendChild(document.createTextNode('+')); + + btnPlus.onclick = () => { + item.amount = item.amount + 1; + render(); + }; + controlsDiv.appendChild(btnMinus); + controlsDiv.appendChild(numberSpan); + controlsDiv.appendChild(btnPlus); + } else { + const numberSpan = document.createElement('span'); + numberSpan.className = 'number'; + numberSpan.appendChild(document.createTextNode(item.amount)); + controlsDiv.appendChild(numberSpan); + } + + const statusBtn = document.createElement('button'); + statusBtn.className = 'btn-status'; + + if (item.isBought === true) { + statusBtn.appendChild(document.createTextNode('Не куплено')); + } else { + statusBtn.appendChild(document.createTextNode('Куплено')); + } + statusBtn.onclick = function() { + if (item.isBought === true) { + item.isBought = false; + } else { + item.isBought = true; + } + render(); + }; + itemDiv.appendChild(nameDiv); + itemDiv.appendChild(controlsDiv); + itemDiv.appendChild(statusBtn); + + if (!item.isBought) { + const deleteBtn = document.createElement('button'); + deleteBtn.className = 'btn-delete'; + deleteBtn.appendChild(document.createTextNode('x')); + + deleteBtn.onclick = function() { + items.splice(i, 1); + render(); + }; + itemDiv.appendChild(deleteBtn); + } + itemsList.appendChild(itemDiv); + const tagDiv = document.createElement('div'); + if (item.isBought === true) { + tagDiv.className = 'tag bought-text'; + } else { + tagDiv.className = 'tag'; + } + tagDiv.innerHTML = `${item.name} ${item.amount}`; + + if (item.isBought === true) { + boughtList.appendChild(tagDiv); + } else { + leftToBuyList.appendChild(tagDiv); + } + } +} +function addNewItem() { + const newName = addInput.value; + + if (newName !== '') { + items.push({ + name: newName, + amount: 1, + isBought: false + }); + + addInput.value = ''; + addInput.focus(); + render(); + } +} +addBtn.onclick = addNewItem; + +addInput.onkeydown = function(event) { + if (event.key === 'Enter') { + addNewItem(); + } +}; + +render(); \ No newline at end of file