You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
5.0 KiB
145 lines
5.0 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Wishlist</title>
|
|
<link rel="stylesheet" href="css/bootstrap.css">
|
|
<link rel="stylesheet" href="css/moje.css">
|
|
</head>
|
|
#využití boobstap využili jsme conteiner. ve všech sloup obrázky. využili jsme card. buton
|
|
<body>
|
|
<h1 class="display-1">Wishlist</h1>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-9">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div id="product-1" class="card">
|
|
<img src="img/thumb_1.jpg" class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Kmen stromu</h5>
|
|
<button data-id="1" data-img="img/thumb_1.jpg" data-title="Kmen stromu" data-added="0" class="btn btn-light">Přidat na seznam</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div id="product-2" class="card">
|
|
<img src="img/thumb_2.jpg" class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Zlatý les</h5>
|
|
<button data-id="2"data-img="img/thumb_2.jpg" data-title="Zlatý les" data-added="0" class="btn btn-light">Přidat na seznam</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div id="product-3" class="card">
|
|
<img src="img/thumb_3.jpg" class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Mlha v údolí</h5>
|
|
<button data-id="3" data-img="img/thumb_3.jpg" data-title="Mlha v údolí" data-added="0" class="btn btn-light">Přidat na seznam</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div id="product-4" class="card">
|
|
<img src="img/thumb_4.jpg" class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Písečný chrám</h5>
|
|
<button data-id="4" data-img="img/thumb_4.jpg" data-title="Písečný chrám" data-added="0" class="btn btn-light">Přidat na seznam</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div>
|
|
<button id="btnclearwishlist" class="btn btn-danger">vyprázdnit seznam</button>
|
|
</div>
|
|
<div id="wishlist"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
na začátku fce wishbtwclick pokud je stvrzena ukonči, když není 1 provede se kod za tím pak se dá 1. načti si wishlistt
|
|
<script>
|
|
function wishbtnclick() {
|
|
//console.log(this);
|
|
|
|
if (this.dataset.added == 1) {
|
|
return;
|
|
}
|
|
let list = document.querySelector("#wishlist");
|
|
let img = document.createElement("img");
|
|
let title = document.createElement("span")
|
|
let p = document.createElement("p")
|
|
p.setAttribute("id", "list-item-" + this.dataset.id);
|
|
p.classList = "d-flex align- items-center";
|
|
img.setAttribute("src", this.dataset.img);
|
|
title.innerText = this.dataset.title;
|
|
this.setAttribute("data-added", 1);
|
|
let btn = document.createElement("button");
|
|
btn.innerText = "x";
|
|
btn.setAttribute("title", "odebrat ze seznamu");
|
|
btn.classList = "btn btn-sm btn-info";
|
|
btn.classList = "btn btn-sm btn-info ml-auto";
|
|
btn.setAttribute("data-id", this.dataset.id);
|
|
btn.addEventListener("click", removeBtnclick);
|
|
p.append(img);
|
|
p.append(title);
|
|
p.append(btn);
|
|
list.append(p);
|
|
|
|
let card = document.querySelector("#product-" + this.dataset.id);
|
|
card.classList += " text-white bg-secondary";
|
|
}
|
|
|
|
function clearBtnClick() {
|
|
let list = document.querySelector("#wishlist");
|
|
list.innerHTML = "";
|
|
for (let index = 0; index < buttons.length; index++) {
|
|
const btn = buttons[index];
|
|
btn.setAttribute("data-added", 0);
|
|
let card = document.querySelector("#product-" + btn.dataset.id);
|
|
card.classList = "card";
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function removeBtnclick(){
|
|
let id = this.dataset.id;
|
|
console.log(id);
|
|
// vymazat položku ze seznamu
|
|
let item = document.querySelector("#list-item-" + id);
|
|
item.remove();
|
|
// nastavit data-adde na 0
|
|
let btn = document.querySelector("#product-" + id + " button");
|
|
btn.setAttribute("data-added", 0);
|
|
let card = document.querySelector("#product" + btn.dataset.id);
|
|
card.classList = "card";
|
|
//ostait zvíraznění katy
|
|
|
|
|
|
}
|
|
|
|
let buttons = document.querySelectorAll(".card button");
|
|
|
|
for (let index = 0; index < buttons.length; index++) {
|
|
const btn = buttons[index];
|
|
btn.addEventListener("click", wishbtnclick);
|
|
|
|
}
|
|
|
|
let clearBtn = document.querySelector("#btnclearwishlist");
|
|
clearBtn.addEventListener("click", clearBtnClick);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|