Skip to content

Tsoupich lab03 #68

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

Tsoupich lab03 #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5861517
lab02
ANDRIYTS1234 Jun 4, 2025
8599e1e
lob-03
ANDRIYTS1234 Jun 11, 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
224 changes: 224 additions & 0 deletions file.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
// Чекаємо, поки вся HTML-сторінка завантажиться
document.addEventListener('DOMContentLoaded', function() {

// --- Знаходимо важливі елементи на сторінці ---
// Поле для вводу назви товару
const productInput = document.querySelector('.product-input');
// Кнопка "Додати"
const addButton = document.querySelector('.add-button');
// Список, куди ми будемо додавати товари
const productList = document.querySelector('.product-list');
// Секція "Залишилося" в бічній панелі
const remainingList = document.querySelector('.sidebar-section:nth-child(1) div');
// Секція "Куплено" в бічній панелі
const boughtList = document.querySelector('.sidebar-section:nth-child(2) div');

// Основні функції

/**
*
* Ця функція повністю очищує і заново створює списки "Залишилося" і "Куплено".
* Вона викликається щоразу, коли ми щось змінюємо: додаємо, видаляємо, купуємо товар тощо.
*/
function updateStatistics() {
// Повністю очищуємо списки в бічній панелі
remainingList.innerHTML = '';
boughtList.innerHTML = '';

// Знаходимо всі товари на сторінці
const allProducts = document.querySelectorAll('.product-row');

// Проходимо по кожному товару
for (let i = 0; i < allProducts.length; i++) {
const productRow = allProducts[i];

// Отримуємо дані про товар з HTML
const nameElement = productRow.querySelector('.product-item');
const quantity = productRow.querySelector('.amount').textContent;
const isBought = nameElement.classList.contains('crossed'); // перевіряємо, чи куплений товар

// Створюємо новий елемент для бічної панелі
const statsItem = document.createElement('span');
statsItem.classList.add('sidebar-item');

// В залежності від статусу, додаємо елемент у відповідний список
if (isBought) {
// Якщо куплено
statsItem.innerHTML = '<s>' + nameElement.textContent + '</s> <span class="amount crossed">' + quantity + '</span>';
boughtList.appendChild(statsItem);
} else {
// Якщо ще не куплено
statsItem.innerHTML = nameElement.textContent + ' <span class="amount">' + quantity + '</span>';
remainingList.appendChild(statsItem);
}
}
}


/**
* Створення нового рядка з товаром (Вимоги №1, №2)
* Ця функція створює HTML для нового товару і додає до нього всі необхідні обробники подій.
*/
function createProductRow(name, quantity, isBought) {
// Створюємо головний контейнер для товару
const productRow = document.createElement('div');
productRow.classList.add('product-row');

// Створюємо HTML-код для одного товару.
// Використовуємо звичайне додавання рядків
productRow.innerHTML =
'<div class="product-item">' + name + '</div>' +
'<div class="quantity-center">' +
'<div class="buttons">' +
'<button class="quantity-btn minus" data-tooltip="Вилучити товар">-</button>' +
'<span class="amount">' + quantity + '</span>' +
'<button class="quantity-btn plus" data-tooltip="Додати товар">+</button>' +
'</div>' +
'</div>' +
'<div class="action-buttons">' +
'<button class="status-btn" data-tooltip="Змінити статус">Не куплено</button>' +
'<button class="remove-btn" data-tooltip="Видалити товар">✕</button>' +
'</div>';

// Додаємо створений товар в основний список
productList.appendChild(productRow);

// --- Тепер знаходимо всі кнопки і елементи щойно створеного товару ---
const nameElement = productRow.querySelector('.product-item');
const removeBtn = productRow.querySelector('.remove-btn');
const statusBtn = productRow.querySelector('.status-btn');
const plusBtn = productRow.querySelector('.plus');
const minusBtn = productRow.querySelector('.minus');
const amountSpan = productRow.querySelector('.amount');

// Додаємо обробники подій для кнопок

// 3. Видалення товару
removeBtn.addEventListener('click', function() {
productRow.remove(); // Видаляємо рядок товару
updateStatistics(); // Оновлюємо статистику
});

// 4. Позначка "куплено"
statusBtn.addEventListener('click', function() {
nameElement.classList.toggle('crossed'); // Перекреслюємо назву

const isNowBought = nameElement.classList.contains('crossed');

// Оновлюємо стан кнопок
if (isNowBought) {
statusBtn.textContent = 'Куплено';
// Ховаємо кнопки, як у вимозі
plusBtn.classList.add('hidden');
minusBtn.classList.add('hidden');
removeBtn.classList.add('hidden');
} else {
statusBtn.textContent = 'Не куплено';
// Показуємо кнопки назад
plusBtn.classList.remove('hidden');
minusBtn.classList.remove('hidden');
removeBtn.classList.remove('hidden');
}
updateStatistics(); // Оновлюємо статистику
});

// 5. Редагування назви
nameElement.addEventListener('click', function() {
// Не дозволяємо редагувати, якщо товар вже куплений
if (nameElement.classList.contains('crossed')) {
return;
}

const currentName = nameElement.textContent;
nameElement.innerHTML = '<input type="text" class="editable-product" value="' + currentName + '">';

const inputField = nameElement.querySelector('input');
inputField.focus(); // Ставимо курсор в поле вводу

// Коли користувач клікає деінде, зберігаємо назву
inputField.addEventListener('blur', function() {
nameElement.textContent = inputField.value.trim() || currentName;
updateStatistics();
});

// Коли користувач натискає Enter, теж зберігаємо назву
inputField.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
inputField.blur();
}
});
});

// 6. Редагування кількості
plusBtn.addEventListener('click', function() {
let currentQuantity = parseInt(amountSpan.textContent);
amountSpan.textContent = currentQuantity + 1;
minusBtn.disabled = false; // Робимо кнопку "-" активною
minusBtn.style.opacity = '1';
updateStatistics();
});

minusBtn.addEventListener('click', function() {
let currentQuantity = parseInt(amountSpan.textContent);
if (currentQuantity > 1) {
amountSpan.textContent = currentQuantity - 1;
}
// Робимо кнопку "-" неактивною, якщо кількість 1
if (parseInt(amountSpan.textContent) === 1) {
minusBtn.disabled = true;
minusBtn.style.opacity = '0.5';
}
updateStatistics();
});

// Початкове налаштування стану товару
if (isBought) {
nameElement.classList.add('crossed');
statusBtn.textContent = 'Куплено';
plusBtn.classList.add('hidden');
minusBtn.classList.add('hidden');
removeBtn.classList.add('hidden');
}
if (quantity <= 1) {
minusBtn.disabled = true;
minusBtn.style.opacity = '0.5';
}
}


/**
* Додавання товару з поля вводу (Вимога №1)
*/
function addProductFromInput() {
const productName = productInput.value.trim(); // Беремо текст і видаляємо зайві пробіли
if (productName !== "") { // Перевіряємо, чи щось введено
createProductRow(productName, 1, false); // Створюємо новий товар
productInput.value = ''; // Очищуємо поле вводу
productInput.focus(); // Ставимо курсор назад у поле вводу
updateStatistics(); // Оновлюємо статистику
}
}


// 1. Очищуємо HTML-список, який був у файлі (якщо він там був)
productList.innerHTML = '';

// 2. Створюємо три початкові товари (Вимога №2)
createProductRow('Помідори', 2, true);
createProductRow('Печиво', 2, false);
createProductRow('Сир', 1, false);

// 3. Оновлюємо статистику для початкових товарів
updateStatistics();

// 4. Налаштовуємо подію для кнопки "Додати"
addButton.addEventListener('click', addProductFromInput);

// 5. Налаштовуємо подію для клавіші Enter в полі вводу
productInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
addProductFromInput();
}
});

});
120 changes: 110 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,116 @@
<!DOCTYPE html>
<html>
<head lang="uk">
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>My Page</title>


<link rel="stylesheet" type="text/css" href="main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Список покупок</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<span class="product-item">
Apple
<span class="amount">4</span>
</span>
<div class="container">
<!-- Основний вміст -->
<div class="main-content">
<!-- Форма додавання товару -->
<div class="input-section">
<input type="text" class="product-input" placeholder="Введіть назву товару">
<button class="add-button" data-tooltip="Пошук товару">Додати</button>
</div>

<!-- Список товарів -->
<div class="product-list">
<!-- Товар 1: Помідори (не куплено) -->
<div class="product-row">
<div class="product-item crossed">Помідори!</div>

<!-- Центрований блок -->
<div class="quantity-center">
<div class="buttons">
<button class="quantity-btn minus hidden" data-tooltip="Вилучити товар">-</button>
<span class="amount">2</span>
<button class="quantity-btn plus hidden" data-tooltip="Додати товар">+</button>
</div>
</div>

<!-- Кнопки справа -->
<div class="action-buttons">
<button class="status-btn" data-tooltip="Змінити статус">Не куплено</button>
<button class="remove-btn hidden" data-tooltip="Видалити товар">✕</button>
</div>
</div>

<!-- Товар 2: Печиво (куплено) -->
<div class="product-row">
<div class="product-item">Печиво</div>

<!-- Центрований блок -->
<div class="quantity-center">
<div class="buttons">
<button class="quantity-btn minus" data-tooltip="Вилучити товар" >-</button>
<span class="amount">2</span>
<button class="quantity-btn plus" data-tooltip="Додати товар">+</button>
</div>
</div>

<!-- Кнопки справа -->
<div class="action-buttons">
<button class="status-btn" data-tooltip="Змінити статус">Не куплено</button>
<button class="remove-btn" data-tooltip="Видалити товар">✕</button>
</div>
</div>

<!-- Товар 3: Сир (доданий через input) -->
<div class="product-row">
<div class="product-item">
<input type="text" value="Сир" class="editable-product">
</div>

<div class="quantity-center">
<div class="buttons">
<button class="quantity-btn minus" data-tooltip="Вилучити товар">-</button>
<span class="amount">1</span>
<button class="quantity-btn plus" data-tooltip="Додати товар">+</button>
</div>
</div>

<div class="action-buttons">
<button class="status-btn" data-tooltip="Змінити статус">Не куплено</button>
<button class="remove-btn" data-tooltip="Додати товар">✕</button>
</div>
</div>
</div>
</div>

<!-- Бічна панель -->
<div class="sidebar">
<div class="sidebar-section">
<h3>Залишилося</h3>
<div>
<span class="sidebar-item">Печиво <span class="amount">2</span></span>
<span class="sidebar-item">Сир <span class="amount">2</span></span>
</div>
</div>

<div class="sidebar-section">
<h3>Куплено</h3>
<div>
<span class="sidebar-item"> <s>Помідори</s> <span class="amount crossed">1</span></span>
</div>
</div>


</div>
</div>

<!-- Бейдж з іменем автора -->
<div class="badge-container">
<div class="badge">
<div class="badge-text">Список покупок</div>
<div class="author-text">Автор: Цьопич Андрій</div>
</div>
</div>

<script src="file.js"></script>


</body>
</html>
Loading