Skip to content

Homework3 #71

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
Viktoria121 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Homework3 #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
75395ce
Homework2
Viktoria121 Jun 3, 2025
f7677f6
Adding color const
Viktoria121 Jun 4, 2025
3dcbef1
hw3
Viktoria121 Jun 11, 2025
89be4f4
hw3
Viktoria121 Jun 12, 2025
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
95 changes: 86 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,92 @@
<html>
<head lang="uk">
<meta charset="UTF-8">
<title>My Page</title>


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кошик покупок</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="js.js"></script>
</head>
<body>
<span class="product-item">
Apple
<span class="amount">4</span>
</span>
</body>
<body>
<div class="main-first-items">

<div class="product-adding-item" >
<input type="text" placeholder="Назва товару">
<button type="submit" data-tooltip="Кнопка для додавання нового товару">Додати</button>
</div>

<div class="first-table-items">
<input type="text" class="product" value="Помідори" data-bought="true">
<span class="add-or-sub">
<button class="subtraction" data-tooltip="Зменшити кількість">–</button>
<span class="count">2</span>
<button class="adding" data-tooltip="Збільшити кількість">+</button>
</span>
<span class="buy-or-cancel">
<button class="buy" data-tooltip="Ви придбали цей товар">Скасувати купівлю</button>
<button class="cancel-button" data-tooltip="Видалити товар із списку">×</button>
</span>

</div>

<div class="first-table-items">
<input type="text" class="product" value="Печиво" data-bought="false">
<span class="add-or-sub">
<button class="subtraction" data-tooltip="Зменшити кількість">–</button>
<span class="count">2</span>
<button class="adding" data-tooltip="Збільшити кількість">+</button>
</span>

<span class="buy-or-cancel">
<button class="buy" data-tooltip="Придбати цей товар">Купити</button>
<button class="cancel-button" data-tooltip="Видалити товар із списку">×</button>
</span>
</div>

<div class="first-table-items">
<input type="text" class="product" value="Сир" data-bought="false">
<span class="add-or-sub">
<button class="subtraction" id="only-one" data-tooltip="Кількість не може бути менше 1">–</button>
<span class="count">1</span>
<button class="adding" data-tooltip="Збільшити кількість">+</button>
</span>

<span class="buy-or-cancel">
<button class="buy" data-tooltip="Придбати цей товар">Купити</button>
<button class="cancel-button" data-tooltip="Видалити товар із списку">×</button>
</span>
</div>
</div>

<div class="main-second-items">
<h1>Залишилося</h1>
<span class="need-to-buy">
<span class="product-name">
Печиво
<span class="amount">2</span>
</span>
<span class="product-name">
Сир
<span class="amount">1</span>
</span>
</span>

<h1>Куплено</h1>
<span class="bought">
<span class="product-name" id="thickness">
Помідори
<span class="amount" id="thickness">2</span>
</span>
</span>
</div>

<div class="buyList">
<div class="badge">
<div class="badge-title">Buy List</div>
<div class="badge-author">Created by: <br>
<p id="autor-name">Perets Viktoria</p>
</div>
</div>
</div>

</body>
</html>
253 changes: 253 additions & 0 deletions js.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,253 @@
document.addEventListener("DOMContentLoaded", () => {
const input = document.querySelector(".product-adding-item input");
const addBtn = document.querySelector(".product-adding-item button");
const list = document.querySelector(".main-first-items");
const statsNeed = document.querySelector(".need-to-buy");
const statsBought = document.querySelector(".bought");

function setupProduct(item) {
const nameInput = item.querySelector(".product");
let countDisplay = item.querySelector(".count");
let count = parseInt(countDisplay.textContent);
const subBtn = item.querySelector(".subtraction");
const addBtn = item.querySelector(".adding");
const buyBtn = item.querySelector(".buy");
const cancelBtn = item.querySelector(".cancel-button");

// Заборонити редагування, якщо куплено
if (nameInput.dataset.bought === "true") {
nameInput.readOnly = true;
//nameInput.classList.add("crossed");
}

if (subBtn) {
subBtn.addEventListener("click", () => {
if (count > 1) {
count--;
countDisplay.textContent = count;
if (count === 1) {
subBtn.disabled = true;
subBtn.id = "only-one";
}
updateCountProduct(nameInput.value.trim());
}
});
}

if (addBtn) {
if(nameInput.dataset.bought === "true"){
const addOrSub = item.querySelector(".add-or-sub");
addOrSub.innerHTML = "";
const newCount = document.createElement("span");
newCount.className = "count";
newCount.textContent = count;
addOrSub.append(newCount);
countDisplay = newCount;
}
addBtn.addEventListener("click", () => {
count++;
countDisplay.textContent = count;
if (subBtn.disabled = true) {
subBtn.disabled = false;
subBtn.removeAttribute("id");
}
updateCountProduct(nameInput.value.trim());
});
}

if (buyBtn) {
buyBtn.addEventListener("click", () => {

if (nameInput.dataset.bought === "false") {
// Позначити як куплено
nameInput.dataset.bought = "true";
nameInput.readOnly = true;
nameInput.classList.add("crossed");

// Заміна +/- на просто лічильник
const addOrSub = item.querySelector(".add-or-sub");
addOrSub.innerHTML = "";
addOrSub.append(countDisplay);

// Заміна кнопок на одну
const actions = item.querySelector(".buy-or-cancel");
actions.innerHTML = "";
buyBtn.textContent = "Скасувати купівлю";
buyBtn.setAttribute("data-tooltip", "Ви придбали цей товар");
actions.append(buyBtn);
}
else {
// Позначити як не куплено
nameInput.dataset.bought = "false";
nameInput.readOnly = false;
nameInput.classList.remove("crossed");

// Відновлення +/- кнопок
const addOrSub = item.querySelector(".add-or-sub");
addOrSub.innerHTML = "";
addOrSub.append(subBtn, countDisplay, addBtn);

// Відновлення кнопки "×"
const actions = item.querySelector(".buy-or-cancel");
actions.innerHTML = "";
buyBtn.textContent = "Купити";
actions.append(buyBtn, cancelBtn);
buyBtn.setAttribute("data-tooltip", "Придбати цей товар");
}
updateStats();
});
}

if (cancelBtn) {
if(nameInput.dataset.bought === "true"){
const actions = item.querySelector(".buy-or-cancel");
actions.innerHTML = "";
actions.append(buyBtn);
}
cancelBtn.addEventListener("click", () => {
item.remove();
updateStats();
});
}

nameInput.addEventListener("click", () => {
if (nameInput.dataset.bought === "false") {
nameInput.readOnly = false;
}
});

nameInput.addEventListener("blur", () => {
nameInput.readOnly = true;
updateStats();
});
}

function createProduct(name, count = 1) {
const item = document.createElement("div");
item.className = "first-table-items";

const nameInput = document.createElement("input");
nameInput.type = "text";
nameInput.className = "product";
nameInput.value = name;
nameInput.dataset.bought = "false";

const countContainer = document.createElement("span");
countContainer.className = "add-or-sub";

const countDisplay = document.createElement("span");
countDisplay.className = "count";
countDisplay.textContent = count;

const subBtn = document.createElement("button");
subBtn.className = "subtraction";
subBtn.textContent = "–";
subBtn.setAttribute("data-tooltip", "Зменшити кількість");
subBtn.id = "only-one";

const addBtn = document.createElement("button");
addBtn.className = "adding";
addBtn.textContent = "+";
addBtn.setAttribute ("data-tooltip", "Збільшити кількість");

countContainer.append(subBtn, countDisplay, addBtn);

const actionContainer = document.createElement("span");
actionContainer.className = "buy-or-cancel";

const buyBtn = document.createElement("button");
buyBtn.className = "buy";
buyBtn.textContent = "Купити";
buyBtn.setAttribute("data-tooltip", "Придбати цей товар");

const cancelBtn = document.createElement("button");
cancelBtn.className = "cancel-button";
cancelBtn.textContent = "×";
buyBtn.setAttribute("data-tooltip", "Видалити товар із списку");

actionContainer.append(buyBtn, cancelBtn);

item.append(nameInput, countContainer, actionContainer);
list.append(item);

setupProduct(item);
updateStats();
}

function updateStats() {
statsNeed.innerHTML = "";
statsBought.innerHTML = "";

document.querySelectorAll(".first-table-items").forEach(item => {
const nameInput = item.querySelector(".product");
const name = nameInput.value.trim();
const count = parseInt(item.querySelector(".count").textContent);
const isBought = nameInput.dataset.bought === "true";

const statItem = document.createElement("span");
statItem.className = "product-name";

const amountSpan = document.createElement("span");
amountSpan.className = "amount";
amountSpan.textContent = count;

statItem.textContent = name + " ";
statItem.appendChild(amountSpan);

if (isBought) {
statsBought.append(statItem);
} else {
statsNeed.append(statItem);
}
});
}

function updateCountProduct(name) {
document.querySelectorAll(".first-table-items").forEach(item => {
const nameInput = item.querySelector(".product");
const productName = nameInput.value.trim();

if (productName === name) {
const count = item.querySelector(".count").textContent;
const statItems = document.querySelectorAll(
`.${nameInput.dataset.bought === "true" ? "bought" : "need-to-buy"} .product-name`
);

statItems.forEach(statItem => {
const statName = statItem.childNodes[0].nodeValue.trim();
if (statName === name) {
const amountSpan = statItem.querySelector(".amount");
if (amountSpan) {
amountSpan.textContent = count;
}
}
});
}
});
}

addBtn.addEventListener("click", () => {
const value = input.value.trim();
if (value !== "") {
createProduct(value);
input.value = "";
input.focus();
}
});

input.addEventListener("keypress", e => {
if (e.key === "Enter") {
addBtn.click();
}
});

document.querySelectorAll(".first-table-items").forEach(item => {
const nameInput = item.querySelector(".product");
if (!nameInput.dataset.bought) {
nameInput.dataset.bought = "false";
}
setupProduct(item);
});

updateStats();
});
Loading