diff --git a/index.html b/index.html index 5971bf7d..e06e35d4 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,41 @@ - - Apple - 4 - - + +
+
Buy List
+
Created by:
Коротков Андрій
+
+ +
+
+
+ + + +
+ +
+ +
+ +
+ +
+

Залишилося

+
+
+ +
+

Куплено

+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/main.css b/main.css index 00bc872e..371fafc5 100644 --- a/main.css +++ b/main.css @@ -1,17 +1,278 @@ -.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; + +.badge { + position: fixed; + bottom: 0; + left: 0; + background-color: #a820d3; + color: white; + padding: 15px 30px; + border-radius: 0 35px 0 0; /* зробив закруглення тільки з одного боку, бо так красивіше виглядає */ + font-family: Arial, sans-serif; + text-align: center; + + transform: translateY(65px); + + transition: all 0.5s ease; +} + +.badge-title { + font-size: 28px; + font-weight: bold; +} + +.badge-author { + font-size: 16px; + margin-top: 15px; +} + +.badge:hover { + transform: translateY(0); + background-color: #4b0082; +} + +@media print { + .badge { + background-color: white; + border: 2px solid #8b00ff; + color: #8b00ff; + transform: translateY(0); + } + + .badge-title { + display: none; + } + + .badge-author { + margin-top: 0; + font-size: 20px; + font-weight: bold; + } +} + +.main-container { + display: flex; + flex-direction: row; + gap: 20px; + padding: 20px; +} + +.add-panel label { + display: flex; + align-items: center; + margin-right: 15px; + font-family: Arial, sans-serif; + font-weight: bold; + color: #333; +} + +.left-column { + flex: 1; +} + +.right-column { + width: 250px; +} + +@media screen and (max-width: 650px) { + .main-container { + flex-direction: column; + } + + .right-column { + width: 100%; + } +} + +[data-tooltip] { + position: relative; +} + +[data-tooltip]::after { + content: attr(data-tooltip); + position: absolute; + bottom: 100%; + left: 50%; + + background-color: #8b00ff; + color: white; + padding: 6px 12px; + border-radius: 8px; + white-space: nowrap; + font-size: 12px; + font-weight: normal; + + z-index: 10; + pointer-events: none; + + opacity: 0; + visibility: hidden; + transform: translate(-50%, 15px) scale(0.8); + transition: all 0.3s ease; +} + +[data-tooltip]:hover::after { + opacity: 1; + visibility: visible; + transform: translate(-50%, -10px) scale(1); +} + +.add-panel { + display: flex; + background-color: white; + border-bottom: 2px solid #eee; + padding: 15px; + margin-bottom: 20px; + border-radius: 4px; +} + +.add-panel input { + flex: 1; + padding: 10px 15px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px 0 0 4px; + outline: none; +} + +.add-btn { + background-color: #0044ff; + color: white; + font-size: 16px; + font-weight: bold; + border: none; + padding: 10px 25px; + border-radius: 0 4px 4px 0; + cursor: pointer; + transition: background-color 0.2s; +} + +.add-btn:hover { + background-color: #6200ff; +} + + +.item-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px 0; + border-bottom: 1px solid #eee; +} + +.item-name { + font-size: 18px; + width: 120px; +} + +.item-controls { + display: flex; + align-items: center; + gap: 8px; +} + +.item-name { + font-size: 18px; + width: 120px; + cursor: pointer; +} + +.item-name-edit { + font-size: 18px; + width: 120px; + padding: 2px 5px; + border: 1px solid #3498db; + border-radius: 4px; + outline: none; + box-sizing: border-box; +} + +.btn-minus, .btn-plus { + width: 32px; + height: 32px; + border-radius: 50%; + border: none; + color: white; + font-weight: bold; + font-size: 18px; + cursor: pointer; +} + +.btn-minus { background-color: #ff1e00; } +.btn-plus { background-color: #2cdd00; } + +.item-amount { + background-color: #f5f5f5; + padding: 4px 12px; + border-radius: 4px; + font-weight: bold; +} + +.item-actions { + display: flex; + gap: 8px; +} + +.btn-bought { + background-color: #f9f9f9; + border: 1px solid #ddd; + border-radius: 4px; + padding: 8px 15px; + cursor: pointer; + box-shadow: 0 2px 2px rgba(0,0,0,0.05); +} + +.btn-delete { + background-color: #ff1900; + color: white; + border: none; + border-radius: 4px; + padding: 8px 12px; + cursor: pointer; + font-weight: bold; + box-shadow: 0 2px 2px rgba(0,0,0,0.1); +} + +.stats-box { + background-color: white; + padding: 15px; + margin-bottom: 20px; + border-radius: 4px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); +} + +.stats-title { + margin-top: 0; + margin-bottom: 15px; + font-size: 18px; + border-bottom: 1px solid #eee; + padding-bottom: 10px; +} + +.stats-items { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.stats-item { + background-color: #e0e0e0; + padding: 6px 12px; + border-radius: 6px; + font-size: 14px; + display: flex; + align-items: center; + gap: 6px; +} + +.stats-badge { + background-color: #ff9d00; + color: white; + border-radius: 50%; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: bold; } \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 00000000..848963bb --- /dev/null +++ b/main.js @@ -0,0 +1,164 @@ +const savedItems = localStorage.getItem('myBuyList'); + +let items; + +if (savedItems) { + items = JSON.parse(savedItems); +} else { + items = [ + { name: 'Помідори', amount: 1, isBought: false }, + { name: 'Печиво', amount: 1, isBought: false }, + { name: 'Сир', amount: 1, isBought: false } + ]; +} + +const itemsList = document.getElementById('items-list'); + +function renderItems() { + let html = ''; + + items.forEach(function(item, index) { + + if (item.isBought === true) { + html += ` +
+ ${item.name} +
+ +
+
+ `; + } else { + const disableMinus = item.amount === 1 ? 'disabled' : ''; + + let nameHTML = ''; + if (item.isEditing === true) { + nameHTML = ``; + } else { + nameHTML = `${item.name}`; + } + + html += ` +
+ ${nameHTML} + +
+ + ${item.amount} + +
+ +
+ + +
+
+ `; + } + }); + + itemsList.innerHTML = html; + + renderStats(); + + localStorage.setItem('myBuyList', JSON.stringify(items)); +} + +const productInput = document.getElementById('product-input'); +const addBtn = document.getElementById('add-btn'); + +function addItem() { + const newItemName = productInput.value.trim(); + + if (newItemName !== '') { + + const newItem = { + name: newItemName, + amount: 1, + isBought: false + }; + + items.push(newItem); + + renderItems(); + + productInput.value = ''; + } + + productInput.focus(); +} + +addBtn.addEventListener('click', addItem); + +productInput.addEventListener('keypress', function(event) { + if (event.key === 'Enter') { + addItem(); + } +}); + + +function increaseAmount(index) { + items[index].amount += 1; + renderItems(); +} + +function decreaseAmount(index) { + if (items[index].amount > 1) { + items[index].amount -= 1; + renderItems(); + } +} + +function deleteItem(index) { + items.splice(index, 1); + renderItems(); +} + +function toggleBought(index) { + items[index].isBought = !items[index].isBought; + renderItems(); +} + +function editName(index) { + items[index].isEditing = true; + renderItems(); + + const input = document.getElementById(`edit-input-${index}`); + if (input) { + input.focus(); + } +} + +function saveName(index, newName) { + if (newName.trim() !== '') { + items[index].name = newName.trim(); + } + items[index].isEditing = false; + renderItems(); +} + +function renderStats() { + const statsUnbought = document.getElementById('stats-unbought'); + const statsBought = document.getElementById('stats-bought'); + + let unboughtHTML = ''; + let boughtHTML = ''; + + items.forEach(function(item) { + + const statItemHTML = `${item.name} ${item.amount}`; + + if (item.isBought === false) { + unboughtHTML += statItemHTML; + } else { + boughtHTML += statItemHTML; + } + }); + + statsUnbought.innerHTML = unboughtHTML; + statsBought.innerHTML = boughtHTML; +} + +renderItems(); \ No newline at end of file