petr
4 years ago
@ -0,0 +1,4 @@ |
|||||
|
#wishlist img { |
||||
|
width: 3rem; |
||||
|
padding-right: 0.5rem; |
||||
|
} |
||||
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
@ -0,0 +1,145 @@ |
|||||
|
<!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> |
||||