diff --git a/koshyk.html b/koshyk.html new file mode 100644 index 00000000..f4976061 --- /dev/null +++ b/koshyk.html @@ -0,0 +1,64 @@ + + + + + + + Кошик покупок + + +
+
+ + +
+ +
+
+

Залишилося

+ +

Куплено

+ +
+
+
+

Buy List

+

+ Created by:
+ Ластівка Іван +

+
s +
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..cad8c033 --- /dev/null +++ b/script.js @@ -0,0 +1,195 @@ +const li_after = ` + 1 + + + + ` + + +const button_add = document.querySelector(".add_prod"); +const body = document.querySelector("body"); +const main_list = document.querySelector(".main_list"); +function del(element){ + element.remove(); + delete_stat(element); +} +function add_quant(l_item){ + let q = l_item.querySelector("#main_quantity"); + let num = +q.innerText; + q.innerText = ++num; + update_quantity_stat(l_item); + if(q.className === "one_quant") q.className = "main_quantity"; +} +function sub_quant(l_item){ + let q = l_item.querySelector("#main_quantity"); + if(q.className === "main_quantity"){ + let num = +q.innerText; + q.innerText = --num; + if(num <= 1){ + q.className = "one_quant"; + } + update_quantity_stat(l_item); + } +} +function make_bought(l_item){ + l_item.setAttribute("class", "main_bought"); + let buttons = l_item.querySelectorAll(`[type="button"]`); + for(let b of buttons){ + if(b.hidden === true) b.hidden = false; + else b.hidden = true; + } + relocate_stat(l_item); +} +function make_not_bought(l_item){ + l_item.setAttribute("class", "main_not_bought"); + let buttons = l_item.querySelectorAll(`[type="button"]`); + for(let b of buttons){ + if(b.hidden === false) b.hidden = true; + else b.hidden = false; + } + relocate_stat(l_item); + change_name(l_item); +} +function f_add(){ + const input = document.querySelector(".main_inp"); + let val = input.value; + input.value = ""; + val = val.trim(); + if(val.length < 3 || val.length > 30) return; + if(!val.match(/[А-Я][а-яЇЄїє]*/)) return; + const list = document.querySelector(".main_list"); + const l_item = document.createElement("li"); + l_item.setAttribute("class", "main_not_bought"); + l_item.innerHTML = `` + val + "" + li_after; + l_item.querySelector(".delete").addEventListener("click", () => {del(l_item)}); + l_item.querySelector(".add_quantity").addEventListener("click", () => {add_quant(l_item)}); + l_item.querySelector(".sub_quantity").addEventListener("click", () => {sub_quant(l_item)}); + l_item.querySelector(".buy").addEventListener("click", () => {make_bought(l_item)}); + l_item.querySelector(".reverse_buy").hidden = true; + l_item.querySelector(".reverse_buy").addEventListener("click", () => {make_not_bought(l_item)}); + list.appendChild(l_item); + update_stat(l_item); + let main_page = document.querySelector(".main"); + let new_height = main_page.offsetHeight + 50; + main_page.style.height = new_height + "px"; + change_name(l_item); +} +function f_add_enter(event){ + if(event.key === 'Enter'){ + f_add(); + } +} +function init_stat(list){ + let items_list = list.querySelectorAll("li"); + for(let li of items_list){ + update_stat(li); + } +} +function update_stat(item){ + let remaining = document.querySelector(".stat_rem"); + let bought = document.querySelector(".stat_bought"); + if(item.className === "main_bought"){ + let sli = document.createElement("li"); + sli.className = "stat_bought_item"; + let plain_text = item.querySelector(".li_text").innerText; + sli.innerHTML = `` + plain_text + `` + `` + item.querySelector("#main_quantity").innerText + ``; + bought.appendChild(sli); + }else{ + let sli = document.createElement("li"); + sli.className = "stat_rem_item"; + let plain_text = item.querySelector(".li_text").innerText; + sli.innerHTML = `` + plain_text + `` + `` + item.querySelector("#main_quantity").innerText + ``; + remaining.appendChild(sli); + } +} +function delete_stat(item){ + let remaining = document.querySelector(".stat_rem"); + let remaining_list = remaining.querySelectorAll("li"); + let bought = document.querySelector(".stat_bought"); + let bought_list = bought.querySelectorAll("li"); + delete_list_stat(item, bought_list); + delete_list_stat(item, remaining_list); +} +function delete_list_stat(item, list){ + for(let li of list){ + let item_name = item.querySelector(".li_text").innerText; + let li_name = li.querySelector(".li_text").innerText; + if(item_name.trim() === li_name){ + li.remove(); + } + } +} +function relocate_stat(item){ + let remaining_list = document.querySelector(".stat_rem").querySelectorAll("li"); + let bought_list = document.querySelector(".stat_bought").querySelectorAll("li"); + let item_name = item.querySelector(".li_text").innerText; + for(let li of bought_list){ + let li_name = li.querySelector(".li_text").innerText; + if(item_name === li_name && item.className === "main_not_bought"){ + delete_list_stat(item, bought_list); + update_stat(item); + } + } + for(let li of remaining_list){ + let li_name = li.querySelector(".li_text").innerText; + if(item_name === li_name && item.className === "main_bought"){ + delete_list_stat(item, remaining_list); + update_stat(item); + } + } +} +function update_quantity_stat(item){ + delete_stat(item); + update_stat(item); +} +function change_name(item){ + let item_text = item.querySelector(".li_text"); + item_text.addEventListener("click", () =>{ + let text = item_text.innerText; + let span = document.createElement("input"); + span.className = "change_name_input"; + span.addEventListener("focusout", () =>{ + //item_text.innerText = span.value; + let new_span = document.createElement("span"); + new_span.className = "li_text"; + span.replaceWith(new_span); + new_span.innerText = text; + delete_stat(item); + span.hidden = false; + new_span.innerText = span.value; + update_stat(item); + change_name(item); + }); + span.value = item_text.innerText; + item_text.hidden = true; + item_text.replaceWith(span); + span.focus(); + }); +} +button_add.addEventListener("click",f_add); +body.addEventListener("keydown", event => {f_add_enter(event)}); +const all_del_buttons = document.querySelectorAll(".delete"); +for(let b of all_del_buttons){ + b.addEventListener("click", () => {del(b.parentElement)}); +} +const all_add_buttons = document.querySelectorAll(".add_quantity"); +for(let b of all_add_buttons){ + b.addEventListener("click", () => {add_quant(b.parentElement)}); +} +const all_sub_buttons = document.querySelectorAll(".sub_quantity"); +for(let b of all_sub_buttons){ + b.addEventListener("click", () => {sub_quant(b.parentElement)}); +} +const all_buy_buttons = document.querySelectorAll(".buy"); +for(let b of all_buy_buttons){ + b.addEventListener("click", () => {make_bought(b.parentElement)}); +} +const all_reverse_buy_buttons = document.querySelectorAll(".reverse_buy"); +for(let b of all_reverse_buy_buttons){ + b.addEventListener("click", () => {make_not_bought(b.parentElement)}); +} +init_stat(document.querySelector(".main_list")); +const last_array = document.querySelectorAll(".main_not_bought"); +for(let b of last_array){ + b.addEventListener("click", () => {change_name(b)}); +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..49f222d2 --- /dev/null +++ b/styles.css @@ -0,0 +1,268 @@ +body{ + display: flex; + align-items: flex-start; + justify-content: space-evenly; + background-color: lightgray; + font-family: "Times New Roman"; +} +*{ + border: none; +} +@media (width < 500px) { + body{ + flex-wrap: wrap; + } + .statistic{ + width: 870px; + } +} +.main{ + margin-left: 15px; + margin-top: 40px; + background-color: rgba(255,255,255,1); + width: 870px; + height: 290px; + border-radius: 5px; +} +.statistic{ + margin-top: 40px; + margin-right: 40px; + background-color: rgba(255,255,255,1); + width: 370px; + min-height: 300px; + height: auto; + border-radius: 5px; +} +.input_field{ + align-items: center; + height: 90px; + display: flex; + border: none; + border-bottom: solid lightgray 1.2px; +} +.main_inp{ + height: 40px; + flex-grow: 1; + margin: 15px; + border: solid lightgray 1.2px; + border-radius: 5px; +} +input{ + padding-left: 15px; +} +ul { + list-style-type: none; +} +li:not(.stat_rem_item, .stat_bought_item){ + padding-left: 20px; + padding-right: 20px; +} +.stat_bought_item, .stat_rem_item{ + border-radius: 5px; + background-color: rgba(160,160,160, 0.3); + width: auto; + font-weight: bold; + color: rgba(20,20,20, 0.5); + text-align: center; + & .li_text{ + margin: 7px; + } +} +.stat_rem, .stat_bought{ + display:flex; + flex-wrap: wrap; + gap: 10px; +} +.stat_quantity{ + display: inline-block; + min-width: 20px; + max-width: auto; + height: 15px; + border-radius: 10px; + background-color: orangered; + color: white; + text-align: center; + font-size: 14px; + margin: 7px; +} +.main_bought{ + align-items: center; + border: solid lightgray 1px; + height: 50px; + display: grid; + grid-template-columns: 1fr 40px 1fr; + & .li_text{ + text-decoration: line-through; + } +} +.main_not_bought{ + align-items: center; + border: solid lightgray 1px; + height: 50px; + display: grid; + grid-template-columns: 1fr 30px 40px 30px 1fr 35px; + justify-content: space-between; +} +.sub_quantity:has(+.one_quant){ + background-color: rgba(255,0,0,0.35); + border-bottom: 5px solid rgba(255,0,0,0.5); +} +.main_quantity{ + margin-left: 10px; + text-align: center; + background-color: lightgray; + border-radius: 3px; + width: 20px; +} +.one_quant{ + text-align: center; +} +.sub_quantity{ + background-color: rgba(255,0,0,0.7); + color: white; + height: 30px; + width: 30px; + border-radius: 15px; + border-bottom: 5px solid rgba(255,0,0,1); +} + +.add_quantity{ + background-color: rgba(0,255,0,0.7); + color: white; + height: 30px; + border-radius: 15px; + border-bottom: 5px solid rgba(0,255,0,1); +} + +button:active{ + transform: translateY(2px); +} +.delete{ + height: 35px; + width: 35px; + border-radius: 3px; + background-color: rgba(255,0,0,0.8); + border-bottom: 5px solid rgba(255,0,0,0.7); + color: white; +} +.add_prod{ + background-color: rgba(0,0,255,0.4); + height: 40px; + font-size: 15px; + font-weight: bold; + padding-bottom: 8px; + padding-top: 8px; + padding-left: 22px; + padding-right: 22px; + border-radius: 3px; + color: white; + border-bottom: 5px solid rgba(0,0,255,0.3); + margin: 15px; + margin-left: none; + width: 100px; +} +.buy{ + text-align: center; + width: 80px; + height: 35px; + font-weight: bold; + color: darkgray; + justify-self: end; + border: 1px solid lightgray; + border-radius: 3px; + background-color: rgba(255,255,255,1); + border-bottom: 3px solid rgba(0,0,0,0.1); +} +.reverse_buy{ + text-align: center; + width: 100px; + height: 35px; + font-weight: bold; + color: darkgray; + justify-self: end; + border: 1px solid lightgray; + border-radius: 3px; + background-color: rgba(255,255,255,1); + border-bottom: 3px solid rgba(0,0,0,0.1); +} +.stat_bought{ + text-decoration: line-through; + +} +h3{ + text-align: center; +} +.change_name_input{ + width: 100px; + border-radius: 3px; + height: 15px; +} +[data-tooltip] { + position: relative; + cursor: pointer; +} +[data-tooltip]::after { + content: attr(data-tooltip); + position: absolute; + bottom: 125%; + left: 50%; + transform: translateX(-50%); + background-color: purple; + color: white; + padding: 5px; + border-radius: 5px; + font-weight: bold; + font-size: 15px; + white-space: nowrap; + opacity: 0; + margin: 3px; + text-align: center; + visibility: hidden; + transition: all 1s; +} +[data-tooltip]:hover::after { + opacity: 1; + visibility: visible; +} +.badge_container { + width: 250px; + height: 170px; + background: whitesmoke; + overflow: hidden; + position: fixed; + border: 4px solid darkgray; + left: 0px; + bottom: 0px; +} + +.badge { + background: purple; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: all 1s; + position: absolute; + left: 10px; + bottom: -70px; + width: 180px; + height: 120px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} +.badge_container:hover .badge { + bottom: 0; + background: deepskyblue; +} +.print_part { + font-family: Times New Roman; + margin-top: 10px; + font-size: 15px; + transition: opacity 1s; +} +.web_part { + font-family: Times New Roman; + margin: 0; + font-size: 30px; +}