Skip to content

Solution to hometask 2 #21

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

Solution to hometask 2 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
29d10f6
[practice-1] add green background
borsch Feb 1, 2019
6f8fa0f
[pr-1] product-item
borsch Feb 1, 2019
cb27668
add solution to hometask
ybriukhovetska May 16, 2026
e680c9c
add variables for colors
ybriukhovetska May 16, 2026
81c9956
change title tags
ybriukhovetska May 16, 2026
8956d6d
corrected some mistakes
ybriukhovetska May 16, 2026
6d5b8cb
add solution to hometask2
ybriukhovetska 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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
78 changes: 72 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,80 @@
<html>
<head lang="uk">
<meta charset="UTF-8">
<title>My Page</title>


<title>Buy list</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js" defer></script>
</head>
<body>
<h1>Hello World</h1>
<p>Hello Git</p>
<div class="text2018">Hi 2018!!!</div>
<div class="main-wrapper">
<div class="main-container">
<div class="find-item">
<input type="text" class="find-item__input" name="find-item" placeholder="Назва товару" />
<button class="find-item__add-button" data-tooltip="Додати новий товар">Додати</button>
</div>

<div class="product">
<span class="product__name product__crossed">Помідори</span>
<span class="product__amount">2</span>
<button class="product__buy-button" data-tooltip="Відмінити покупку">Не куплено</button>
</div>

<div class="product">
<span class="product__name">Печиво</span>
<div class="product__counter">
<button class="product__round-button remove" data-tooltip="Зменшити">−</button>
<span class="product__amount">2</span>
<button class="product__round-button add" data-tooltip="Збільшити">+</button>
</div>
<div class="product__actions">
<button class="product__buy-button" data-tooltip="Позначити як куплене">Куплено</button>
<button class="product__cancel-button" data-tooltip="Видалити товар">х</button>
</div>
</div>

<div class="product last-product">
<input type="text" class="product__input-field" value="Сир" />
<div class="product__counter">
<button class="product__round-button remove pale" data-tooltip="Зменшити">−</button>
<span class="product__amount">1</span>
<button class="product__round-button add pale" data-tooltip="Збільшити">+</button>
</div>
<div class="product__actions">
<button class="product__buy-button" data-tooltip="Позначити як куплене">Куплено</button>
<button class="product__cancel-button" data-tooltip="Видалити товар">х</button>
</div>
</div>
</div>

<div class="side-container">
<h2 class="side-container__header">Залишилося</h2>
<div class="side-container__items">
<span class="product-item">
Печиво
<span class="product-item__amount">2</span>
</span>
<span class="product-item">
Сир
<span class="product-item__amount">1</span>
</span>
</div>

<h2 class="side-container__header side-container__header--middle">Куплено</h2>
<div class="side-container__items">
<span class="product-item product-item__bought">
Помідори
<span class="product-item__amount">2</span>
</span>
</div>
</div>
</div>

<div class="badge">
<div class="badge-info">
<span class="badge-title">BuyList</span>
<span class="personal-info"><br>Виконала: <br>Брюховецька Юліана</span>
</div>
</div>
</body>
</html>
Loading