Skip to content

Lab3-Artem-Gulidov #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GalacticGlow wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Lab3-Artem-Gulidov #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 87 additions & 0 deletions index_lab2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Список покупок</title>
<link rel="stylesheet" type="text/css" href="style_lab2.css"/>
<script src="script.js"></script>
</head>
<body>
<div class="main-layout">
<div class="container">
<div class="search-bar-container">
<input type="text" class="search-bar" placeholder="Назва товару" />
<button class="search-bar-button" type="submit" data-tooltip="Додати товару">Додати</button>
</div>

<div class="item">
<label class="item-name not-purchased" contenteditable="true">Помідори</label>
<div class="quantity-controls not-purchased">
<button class="qty-btn-minus not-purchased" data-tooltip="Зменшити кількість">−</button>
<label class="quantity">2</label>
<button class="qty-btn-plus not-purchased" data-tooltip="Збільшити кількість">+</button>
</div>
<div class="actions not-purchased">
<button class="status-btn not-purchased" data-tooltip="Змінити статус">Не куплено</button>
<button class="delete-btn not-purchased" data-tooltip="Видалити">×</button>
</div>
</div>

<div class="item">
<label class="item-name" contenteditable="true">Печиво</label>
<div class="quantity-controls">
<button class="qty-btn-minus" data-tooltip="Зменшити кількість">−</button>
<label class="quantity">2</label>
<button class="qty-btn-plus" data-tooltip="Збільшити кількість">+</button>
</div>
<div class="actions">
<button class="status-btn" data-tooltip="Змінити статус">Куплено</button>
<button class="delete-btn" data-tooltip="Видалити">×</button>
</div>
</div>

<div class="item">
<label class="item-name" contenteditable="true">Сир</label>
<div class="quantity-controls">
<button class="qty-btn-minus disabled" data-tooltip="Зменшити кількість">−</button>
<label class="quantity">1</label>
<button class="qty-btn-plus" data-tooltip="Збільшити кількість">+</button>
</div>
<div class="actions">
<button class="status-btn" data-tooltip="Змінити статус">Куплено</button>
<button class="delete-btn" data-tooltip="Видалити">×</button>
</div>
</div>
</div>

<div class="sidebar">
<div class="sidebar-section">
<h3 class="sidebar-titles">Залишилося</h3>
</div>
<div class="sidebar-section">
<div class="tag-container not-purchased">
<span class="tag">Печиво <span class="count">2</span></span>
<span class="tag">Сир <span class="count">1</span></span>
</div>
</div>

<div class="sidebar-section">
<h3 class="sidebar-titles">Куплено</h3>
</div>
<div class="sidebar-section">
<div class="tag-container purchased">
<span class="tag purchased">Помідори <span class="count purchased">2</span></span>
</div>
</div>
</div>

<div class="badge">
<div class="badge-content">
<span class="badge-title">BuyList</span>
<span class="badge-author">Created by: <br> <span class="my-name">Гулідов Артем</span></span>
</div>
</div>
</div>
</body>
</html>
210 changes: 210 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
document.addEventListener("DOMContentLoaded", () => {
const addButton = document.querySelector(".search-bar-button");
const input = document.querySelector(".search-bar");
const container = document.querySelector(".container");
const sidebarLeftoverSection = document.querySelectorAll(".sidebar-section")[1].querySelector(".tag-container");
const sidebarPurchasedSection = document.querySelectorAll(".sidebar-section")[3].querySelector(".tag-container");

function addNewProduct (productName) {
if (!productName) return;

const item = document.createElement("div");
item.className = "item";

item.innerHTML = `
<label class="item-name" contenteditable="true">${productName}</label>
<div class="quantity-controls">
<button class="qty-btn-minus disabled" data-tooltip="Зменшити кількість">−</button>
<label class="quantity">1</label>
<button class="qty-btn-plus" data-tooltip="Збільшити кількість">+</button>
</div>
<div class="actions">
<button class="status-btn" data-tooltip="Змінити статус">Куплено</button>
<button class="delete-btn" data-tooltip="Видалити">×</button>
</div>
`;

container.appendChild(item);

const tag = document.createElement("span");
tag.className = "tag";
tag.innerHTML = `${productName} <span class="count">1</span>`;
sidebarLeftoverSection.appendChild(tag);

input.value = "";
};

container.addEventListener("click", (e) => {
if (e.target.classList.contains("delete-btn")) {
const item = e.target.closest(".item");
const productName = item.querySelector(".item-name").textContent.trim();

item.remove();

const tags = sidebarLeftoverSection.querySelectorAll(".tag");
const matchingTag = Array.from(tags).find(tag =>
tag.textContent.includes(productName)
);
if (matchingTag) {
matchingTag.remove();
}
}
else if (e.target.classList.contains("status-btn")) {
const item = e.target.closest(".item");
const statusBtn = e.target;
const itemName = item.querySelector(".item-name");
const quantityMinus = item.querySelector(".quantity-controls").querySelector(".qty-btn-minus");
const quantityPlus = item.querySelector(".quantity-controls").querySelector(".qty-btn-plus");
const deleteBtn = item.querySelector(".delete-btn");
const productName = itemName.textContent.trim();

if (statusBtn.textContent.trim() === "Куплено") {
statusBtn.textContent = "Не куплено";
statusBtn.classList.add("not-purchased");
itemName.classList.add("not-purchased");
quantityMinus.classList.add("not-purchased");
quantityPlus.classList.add("not-purchased");
deleteBtn.classList.add("not-purchased");

itemName.style.textDecoration = "line-through";

const leftoverTags = sidebarLeftoverSection.querySelectorAll(".tag");
const matchingTag = Array.from(leftoverTags).find(tag =>
tag.textContent.includes(productName)
);
if (matchingTag) {
const tagContent = matchingTag.innerHTML;
matchingTag.remove();

const purchasedTag = document.createElement("span");
purchasedTag.className = "tag purchased";
purchasedTag.innerHTML = tagContent;
sidebarPurchasedSection.appendChild(purchasedTag);
}
}
else {
statusBtn.textContent = "Куплено";
statusBtn.classList.remove("not-purchased");
itemName.classList.remove("not-purchased");
quantityMinus.classList.remove("not-purchased");
quantityPlus.classList.remove("not-purchased");
deleteBtn.classList.remove("not-purchased");

itemName.style.textDecoration = "none";

const purchasedTags = sidebarPurchasedSection.querySelectorAll(".tag");
const matchingTag = Array.from(purchasedTags).find(tag =>
tag.textContent.includes(productName)
);
if (matchingTag) {
const tagContent = matchingTag.innerHTML;
matchingTag.remove();

const leftoverTag = document.createElement("span");
leftoverTag.className = "tag";
leftoverTag.innerHTML = tagContent;
sidebarLeftoverSection.appendChild(leftoverTag);
}
}
}
else if (e.target.classList.contains("qty-btn-plus")) {
const minusBtn = e.target.parentElement.querySelector(".qty-btn-minus");
const quantityLabel = e.target.previousElementSibling;
let quantity = parseInt(quantityLabel.textContent, 10);
quantityLabel.textContent = ++quantity;

const itemName = e.target.closest(".item").querySelector(".item-name").textContent.trim();

const allTags = [
...sidebarLeftoverSection.querySelectorAll(".tag"),
...sidebarPurchasedSection.querySelectorAll(".tag")
];

const matchingTag = allTags.find(tag => {
const tagText = tag.childNodes[0].textContent.trim();
return tagText === itemName;
});

if (matchingTag) {
const countSpan = matchingTag.querySelector(".count");
countSpan.textContent = parseInt(countSpan.textContent, 10) + 1;
}
//minusBtn.classList.remove("disabled");
console.log("Before:", minusBtn.classList);
minusBtn.classList.remove("disabled");
console.log("After:", minusBtn.classList);

}
else if (e.target.classList.contains("qty-btn-minus")) {
const minusBtn = e.target;
const quantityLabel = e.target.nextElementSibling;
let quantity = parseInt(quantityLabel.textContent, 10);

if (quantity > 1) {
quantityLabel.textContent = --quantity;

const itemName = e.target.closest(".item").querySelector(".item-name").textContent.trim();

const allTags = [
...sidebarLeftoverSection.querySelectorAll(".tag"),
...sidebarPurchasedSection.querySelectorAll(".tag")
];

const matchingTag = allTags.find(tag => {
const tagText = tag.childNodes[0].textContent.trim();
return tagText === itemName;
});

if (matchingTag) {
const countSpan = matchingTag.querySelector(".count");
countSpan.textContent = quantity;
}

if (quantity === 1) {
minusBtn.classList.add("disabled");
}
}

if (quantity === 1) {
minusBtn.classList.add("disabled");
}
}
});

container.addEventListener("focus", (e) => {
if (e.target.classList.contains("item-name")) {
e.target.dataset.originalName = e.target.textContent.trim();
}
}, true);

container.addEventListener("input", (e) => {
if (e.target.classList.contains("item-name")) {
const newProductName = e.target.textContent.trim();
const oldProductName = e.target.dataset.originalName || "";

if (oldProductName && newProductName && oldProductName !== newProductName) {
const allTags = [
...sidebarLeftoverSection.querySelectorAll(".tag"),
...sidebarPurchasedSection.querySelectorAll(".tag")
];

const matchingTag = allTags.find(tag => {
const tagText = tag.childNodes[0].textContent.trim();
return tagText === oldProductName;
});

if (matchingTag) {
const countSpan = matchingTag.querySelector(".count");
const countValue = countSpan ? countSpan.textContent : "1";
matchingTag.innerHTML = `${newProductName} <span class="count">${countValue}</span>`;
}

e.target.dataset.originalName = newProductName;
}
}
});
addButton.addEventListener("click", function () {
const productName = input.value.trim();
addNewProduct(productName);
});
});
Loading