Skip to content

Homework 2 #198

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

Homework 2 #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cefbddd
feat: create basic buy list page structure
Stas11k May 16, 2026
4f2df4c
feat: add author badge and tooltip attributes
Stas11k May 16, 2026
0c085f0
feat: add base page layout and product cards styling
Stas11k May 16, 2026
b459443
feat: add form controls and product action buttons
Stas11k May 16, 2026
1343342
feat: add summary section and purchased items styles
Stas11k May 16, 2026
56d7688
feat: add tooltips, author badge and responsive styles
Stas11k May 16, 2026
b792d6e
style: refine add form button styling
Stas11k May 21, 2026
9518c6f
feat: add product creation and rendering
Stas11k May 21, 2026
b480a68
feat: add product controls and summary section
Stas11k May 23, 2026
6cca7c7
feat: add product editing and local storage support
Stas11k May 23, 2026
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
92 changes: 82 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,88 @@
<!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>BuyList</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
</head>
<body>
<span class="product-item">
Apple
<span class="amount">4</span>
</span>

<main class="page">
<section class="products-card" aria-labelledby="products-title">
<h1 id="products-title" class="visually-hidden">Кошик покупок</h1>

<form class="add-form">
<label for="product-name" class="visually-hidden">Назва товару</label>
<input id="product-name" type="text" placeholder="Назва товару">
<button type="submit" data-tooltip="Додати товар">Додати</button>
</form>

<ul class="products-list">
<li class="product product-bought">
<p class="product-name">Помідори</p>
<output class="counter">2</output>
<button type="button" data-action="unbuy" data-tooltip="Повернути до покупок">Не куплено</button>
</li>

<li class="product">
<p class="product-name">Печиво</p>
<menu class="controls">
<li><button class="minus" type="button" data-tooltip="Зменшити кількість">-</button></li>
<li><output class="counter">2</output></li>
<li><button class="plus" type="button" data-tooltip="Збільшити кількість">+</button></li>
</menu>
<button type="button" data-action="buy" data-tooltip="Позначити як куплене">Куплено</button>
<button class="delete" type="button" data-tooltip="Видалити товар">×</button>
</li>

<li class="product">
<p class="product-name editable">Сир</p>
<menu class="controls">
<li><button class="minus disabled" type="button" data-tooltip="Мінімальна кількість">-</button>
</li>
<li><output class="counter">1</output></li>
<li><button class="plus" type="button" data-tooltip="Збільшити кількість">+</button></li>
</menu>
<button type="button" data-action="buy" data-tooltip="Позначити як куплене">Куплено</button>
<button class="delete" type="button" data-tooltip="Видалити товар">×</button>
</li>
</ul>
</section>

<aside class="summary-card" aria-label="Підсумок покупок">
<section class="summary-section">
<h2>Залишилося</h2>
<ul class="summary-list">
<li>
<strong>Печиво</strong>
<output class="amount">2</output>
</li>

<li>
<strong>Сир</strong>
<output class="amount">1</output>
</li>
</ul>
</section>

<section class="summary-section">
<h2>Куплено</h2>
<ul class="summary-list">
<li class="bought-label">
<strong>Помідори</strong>
<output class="amount">2</output>
</li>
</ul>
</section>
</aside>
</main>

<aside class="author-badge" aria-label="Інформація про автора роботи">
<p class="badge-title">BuyList</p>
<p class="badge-author">Created by:<br>Stanislav Dubyna</p>
</aside>

</body>
</html>
Loading