diff --git a/index.html b/index.html
index 5971bf7d..af89dc8d 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,49 @@
-
-
+
+
- My Page
-
-
-
+
+ Homework
+
+
-
- Apple
- 4
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Залишилося
+
+
+
+
+ Куплено
+
+
+
+
+
+ Buy List
+
\ No newline at end of file
diff --git a/main.css b/main.css
index 00bc872e..f53fa438 100644
--- a/main.css
+++ b/main.css
@@ -1,17 +1,267 @@
-.product-item {
- background-color: gray;
- display: inline-block;
- height: 25px;
- padding: 5px;
- border-radius: 5px;
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: lightgrey;
+ font-family: Arial, sans-serif;
+ padding: 20px;
+}
+
+header {
+ display: none;
+}
+
+main {
+ display: flex;
+ gap: 40px;
+ max-width: 900px;
+ margin: 0 auto;
+ align-items: flex-start;
+}
+
+.katalog {
+ display: flex;
+ align-items: center;
+ padding: 15px 20px;
+ border-bottom: 1px solid #c2c2c2;
+}
+
+.katalog:last-child {
+ border-bottom: none;
+}
+
+.item-amount {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ width: 30%;
+}
+
+.item-amount button {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ border: none;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.item-name {
+ width: 40%;
+}
+
+
+.left-side {
+ width: 65%;
+ background-color: white;
+ border-radius: 4px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.right-side {
+ width: 35%;
+ background-color: white;
+ border-radius: 4px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+fieldset {
+ border: none;
+ padding: 15px 20px;
+}
+
+legend, label {
+ display: none;
+}
+
+form {
+ display: flex;
+}
+
+form input {
+ flex-grow: 1;
+ padding: 10px;
+ border: 1px solid lightgrey;
+ border-radius: 3px 0 0 3px;
+}
+
+
+form button {
+ background-color:rgb(42, 86, 182);
+ color: white;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 0 3px 3px 0;
+ font-weight: bold;
+}
+
+ul {
+ list-style: none;
+}
+
+.minus {
+ background-color: red;
+}
+
+.plus {
+ background-color: rgb(0, 194, 0);
}
.amount {
- background-color: yellow;
- border-radius: 10px;
-
- display: inline-block;
- height: 20px;
- width: 20px;
- text-align: center;
+ background-color: rgb(207, 207, 207);
+ padding: 5px 10px;
+ border-radius: 4px;
+}
+
+.item-functions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 5px;
+ width: 30%;
+}
+
+.item-functions button {
+ border: none;
+ padding: 5px 10px;
+ border-radius: 4px;
+}
+
+.status {
+ background-color: lightgrey;
+ border: 1px solid white;
+}
+
+.delete {
+ background-color: red;
+ color: white;
+}
+
+.right-side h2 {
+ padding: 15px 20px;
+ font-size: 20px;
+}
+
+.right-side hr {
+ border: none;
+ border-bottom: 1px solid #d4d4d4;
+}
+
+h2:nth-of-type(2) ~ .left-items-section .left-item {
+ text-decoration: line-through;
+}
+
+.left-items-section {
+ padding: 15px 20px;
+}
+
+
+@media (max-width: 500px) {
+ main {
+ flex-direction: column;
+ }
+ .left-side, .right-side {
+ width: 100%;
+ }
+}
+
+.left-item {
+ background-color: #d4d4d4;
+ display: inline-block;
+ height: 25px;
+ padding: 3px 5px;
+ border-radius: 5px;
+ margin-right: 5px;
+ margin-bottom: 5px;
+}
+
+.left-item-amount {
+ background-color:orange;
+ color: white;
+ border-radius: 10px;
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ text-align: center;
+ line-height: 20px;
+}
+
+.badge {
+ background-color: purple;
+ position: fixed;
+ bottom: -30px;
+ left: 0;
+ color: white;
+ padding: 15px 20px;
+ border-radius: 15px 15px 0 0;
+ font-weight: bold;
+ font-size: 24px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ transition: all 0.5s;
+ z-index: 100;
+}
+
+.badge::after {
+ content: "Created by: Damir Shakhin-Krupchan";
+ font-size: 14px;
+ margin-top: 10px;
+ opacity: 0;
+}
+
+.badge:hover {
+ bottom: 0;
+ background-color: #5d0c9b;
+}
+
+.badge:hover::after {
+ opacity: 1;
+}
+
+[data-tooltip] {
+ position: relative;
+}
+
+[data-tooltip]::before {
+ content: attr(data-tooltip);
+ position: absolute;
+ bottom: 130%;
+ left: 50%;
+ transform: translateX(-50%) scale(0.5);
+ transform-origin: bottom center;
+ background-color: #5e1f8a;
+ color: #ffffff;
+ padding: 5px;
+ border-radius: 4px;
+ font-size: 12px;
+ white-space: nowrap;
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.5s ease;
+}
+
+[data-tooltip]:hover::before {
+ opacity: 1;
+ visibility: visible;
+ transform: translateX(-50%) scale(1);
+}
+
+@media print {
+ .badge {
+ background-color: white !important;
+ color: black !important;
+ border: 2px solid purple;
+ font-size: 0;
+ bottom: 0;
+ }
+ .badge::after {
+ font-size: 24px;
+ opacity: 1;
+ }
}
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 00000000..ba990c43
--- /dev/null
+++ b/script.js
@@ -0,0 +1,194 @@
+// власне товари
+let cart = {
+ 'tomato': {
+ "name" : "Помідори",
+ "count" : 3,
+ "isBought": false
+ },
+ 'apple': {
+ "name" : "Яблука",
+ "count" : 2,
+ "isBought": false
+ },
+
+ 'cookies': {
+ "name" : "Печиво",
+ "count" : 1,
+ "isBought": true
+ },
+};
+
+
+// надання слухачів кнопкам
+document.onclick = event => {
+ if(event.target.classList.contains('plus')){
+ plusFunction(event.target.dataset.id);
+ }
+ if(event.target.classList.contains('minus')){
+ minusFunction(event.target.dataset.id);
+ }
+ if(event.target.classList.contains('delete')){
+ deleteFunction(event.target.dataset.id);
+ }
+ if(event.target.classList.contains('status')){
+ statusFunction(event.target.dataset.id);
+ }
+ if(event.target.classList.contains('item-name')){
+ changeNameFunction(event.target, event.target.dataset.id);
+ }
+}
+
+// додавання кількості
+
+const plusFunction = id => {
+ cart[id]['count']++;
+ renderCart();
+}
+
+// віднімання кількості
+
+const minusFunction = id => {
+ if (cart[id]['count'] === 1) {
+ return;
+ }
+ cart[id]['count']--;
+ renderCart();
+}
+
+// видалення
+
+const deleteFunction = id => {
+ delete cart[id];
+ renderCart();
+ }
+
+// статус куплено або не куплено
+
+const statusFunction = id => {
+ cart[id]['isBought'] = !cart[id]['isBought'];
+ renderCart();
+}
+
+// додавання нового об'єкту
+const addFunction = () => {
+ const addField = document.getElementById('q');
+ const newName = addField.value;
+
+ cart[newName] = {
+ "name": newName,
+ "count": 1,
+ "isBought": false
+ };
+
+ addField.value = '';
+
+ renderCart();
+ addField.focus();
+}
+
+document.querySelector('form').onsubmit = event => {
+ event.preventDefault();
+ addFunction();
+}
+
+// відображення статусу товаріву правій частині
+
+const itemStatistic = () =>{
+ const statsLeft = document.getElementById('left-items');
+ const statsBought = document.getElementById('bought-items');
+
+ let leftHTML = '';
+ let boughtHTML = '';
+
+ for (let id in cart) {
+ let item = cart[id];
+
+ const statItemHTML = `${item.name} ${item.count}`;
+
+ if (item.isBought === true) {
+ boughtHTML += statItemHTML;
+ } else {
+ leftHTML += statItemHTML;
+ }
+ }
+
+ statsLeft.innerHTML = leftHTML;
+ statsBought.innerHTML = boughtHTML;
+
+}
+
+// функція зміни імені поточного об'єкту
+
+const changeNameFunction = (spanElement, id) => {
+ if (cart[id].isBought) {
+ return;
+ }
+
+ const currentName = cart[id].name;
+
+ spanElement.innerHTML = ``;
+
+ const inputElement = spanElement.querySelector('input');
+ inputElement.focus();
+
+ inputElement.onblur = () => {
+ const newName = inputElement.value;
+
+ if (newName !== '') {
+ cart[id].name = newName;
+ }
+ renderCart();
+ }
+
+ inputElement.onkeydown = (event) => {
+ if (event.key === 'Enter') {
+ inputElement.blur();
+ }
+ }
+}
+
+
+// відтворення кошику із логікою
+const renderCart = () => {
+ const cartList = document.querySelector('.left-side ul');
+
+ let out = '';
+
+ for (let id in cart) {
+ let item = cart[id];
+
+ const crossOrNot = item.isBought ? 'text-decoration: line-through;' : '';
+
+ const amountButtons = item.isBought
+ ? `${item.count}`
+ : `
+ ${item.count}
+ `;
+
+ const deleteButton = item.isBought
+ ? ''
+ : ``;
+
+ out += `
+
+
+ ${item.name}
+
+
+ ${amountButtons}
+
+
+
+
+ ${deleteButton}
+
+
+ `;
+ }
+ cartList.innerHTML = out;
+ itemStatistic();
+}
+
+renderCart();