Skip to content

homework2 #205

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

homework2 #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
64 changes: 64 additions & 0 deletions koshyk.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Кошик покупок</title>
</head>
<body>
<div class="main">
<div class="input_field">
<input class="main_inp" id="main_inp" placeholder="Назва товару"/>
<button class="add_prod" type="button" for="main_inp" data-tooltip="Додати продукт (ENTER)">Додати</button>
</div>
<ul class="main_list" id="main_list">
<li class="main_bought">
<span class="li_text">Помідори</span>
<button hidden class="sub_quantity" for="main_quantity" type="button" data-tooltip="Зменшити кількість на 1">-</button>
<span class="main_quantity" id="main_quantity">2</span>
<button hidden class="add_quantity" for="main_quantity" type="button" data-tooltip="Збільшити кількість на 1">+</button>
<button hidden class="buy" type="button" data-tooltip="Купити продукт">Куплено</button>
<button hidden class="delete" type="button" data-tooltip="Видалити продукт">x</button>
<button class="reverse_buy" type="button" data-tooltip="Відмінити покупку">Не куплено</button>
</li>
<li class="main_not_bought">
<span class="li_text">Печиво</span>
<button class="sub_quantity" for="main_quantity" type="button" data-tooltip="Зменшити кількість на 1">-</button>
<span class="main_quantity" id="main_quantity">2</span>
<button class="add_quantity" for="main_quantity" type="button" data-tooltip="Збільшити кількість на 1">+</button>
<button class="buy" type="button" data-tooltip="Купити продукт">Куплено</button>
<button class="delete" type="button" data-tooltip="Видалити продукт">x</button>
<button hidden class="reverse_buy" type="button" data-tooltip="Відмінити покупку">Не куплено</button>
</li>
<li class="main_not_bought">
<span class="li_text">Сир</span>
<button class="sub_quantity" for="main_quantity" type="button" data-tooltip="Зменшити кількість на 1">-</button>
<span class="main_quantity" id="main_quantity">2</span>
<button class="add_quantity" for="main_quantity" type="button" data-tooltip="Збільшити кількість на 1">+</button>
<button class="buy" type="button" data-tooltip="Купити продукт">Куплено</button>
<button class="delete" type="button" data-tooltip="Видалити продукт">x</button>
<button hidden class="reverse_buy" type="button" data-tooltip="Відмінити покупку">Не куплено</button>
</li>
</ul>
</div>
<div class="statistic">
<h3 class="stat_rem_label">Залишилося</h2>
<ul class="stat_rem">
</ul>
<h3 class="stat_bought_label">Куплено</h2>
<ul class="stat_bought">
</ul>
</div>
<div class="badge_container">
<div class="badge">
<h2 class="web_part">Buy List</h2>
<p class="print_part">
Created by:<br>
Ластівка Іван
</p>
</div>s
</div>
<script src="script.js"></script>
</body>
</html>
195 changes: 195 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
const li_after = `<button class="sub_quantity" for="main_quantity" type="button" data-tooltip="Зменшити кількість на 1">-</button>
<span class="one_quant" id="main_quantity">1</span>
<button class="add_quantity" for="main_quantity" type="button" data-tooltip="Збільшити кількість на 1">+</button>
<button class="buy" type="button" data-tooltip="Купити продукт">Куплено</button>
<button class="delete" type="button" data-tooltip="Видалити продукт">x</button>
<button class="reverse_buy" type="button" data-tooltip="Відмінити покупку">Не куплено</button>`


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 = `<span class="li_text">` + val + "</span>" + 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 = `<span class="li_text">` + plain_text + `</span>` + `<span class="stat_quantity">` + item.querySelector("#main_quantity").innerText + `</span>`;
bought.appendChild(sli);
}else{
let sli = document.createElement("li");
sli.className = "stat_rem_item";
let plain_text = item.querySelector(".li_text").innerText;
sli.innerHTML = `<span class="li_text">` + plain_text + `</span>` + `<span class="stat_quantity">` + item.querySelector("#main_quantity").innerText + `</span>`;
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)});
}
Loading