wishlist

4 years ago · 5b7f51a2fd
49 changed files with 14624 additions and 0 deletions
--- a/css/bootstrap.css
+++ b/css/bootstrap.css
--- a/css/bootstrap.css.map
+++ b/css/bootstrap.css.map
--- a/css/moje.css
+++ b/css/moje.css
@ -0,0 +1,4 @@
+#wishlist img {
+    width: 3rem;
+    padding-right: 0.5rem;
+}
--- a/img/Thumbs.db
+++ b/img/Thumbs.db
--- a/img/thumb_1.jpg
+++ b/img/thumb_1.jpg
--- a/img/thumb_10.jpg
+++ b/img/thumb_10.jpg
--- a/img/thumb_11.jpg
+++ b/img/thumb_11.jpg
--- a/img/thumb_12.jpg
+++ b/img/thumb_12.jpg
--- a/img/thumb_13.jpg
+++ b/img/thumb_13.jpg
--- a/img/thumb_14.jpg
+++ b/img/thumb_14.jpg
--- a/img/thumb_15.jpg
+++ b/img/thumb_15.jpg
--- a/img/thumb_16.jpg
+++ b/img/thumb_16.jpg
--- a/img/thumb_17.jpg
+++ b/img/thumb_17.jpg
--- a/img/thumb_18.jpg
+++ b/img/thumb_18.jpg
--- a/img/thumb_19.jpg
+++ b/img/thumb_19.jpg
--- a/img/thumb_2.jpg
+++ b/img/thumb_2.jpg
--- a/img/thumb_20.jpg
+++ b/img/thumb_20.jpg
--- a/img/thumb_21.jpg
+++ b/img/thumb_21.jpg
--- a/img/thumb_22.jpg
+++ b/img/thumb_22.jpg
--- a/img/thumb_23.jpg
+++ b/img/thumb_23.jpg
--- a/img/thumb_24.jpg
+++ b/img/thumb_24.jpg
--- a/img/thumb_25.jpg
+++ b/img/thumb_25.jpg
--- a/img/thumb_26.jpg
+++ b/img/thumb_26.jpg
--- a/img/thumb_27.jpg
+++ b/img/thumb_27.jpg
--- a/img/thumb_28.jpg
+++ b/img/thumb_28.jpg
--- a/img/thumb_29.jpg
+++ b/img/thumb_29.jpg
--- a/img/thumb_3.jpg
+++ b/img/thumb_3.jpg
--- a/img/thumb_30.jpg
+++ b/img/thumb_30.jpg
--- a/img/thumb_31.jpg
+++ b/img/thumb_31.jpg
--- a/img/thumb_32.jpg
+++ b/img/thumb_32.jpg
--- a/img/thumb_33.jpg
+++ b/img/thumb_33.jpg
--- a/img/thumb_34.jpg
+++ b/img/thumb_34.jpg
--- a/img/thumb_35.jpg
+++ b/img/thumb_35.jpg
--- a/img/thumb_36.jpg
+++ b/img/thumb_36.jpg
--- a/img/thumb_37.jpg
+++ b/img/thumb_37.jpg
--- a/img/thumb_38.jpg
+++ b/img/thumb_38.jpg
--- a/img/thumb_39.jpg
+++ b/img/thumb_39.jpg
--- a/img/thumb_4.jpg
+++ b/img/thumb_4.jpg
--- a/img/thumb_40.jpg
+++ b/img/thumb_40.jpg
--- a/img/thumb_41.jpg
+++ b/img/thumb_41.jpg
--- a/img/thumb_42.jpg
+++ b/img/thumb_42.jpg
--- a/img/thumb_5.jpg
+++ b/img/thumb_5.jpg
--- a/img/thumb_6.jpg
+++ b/img/thumb_6.jpg
--- a/img/thumb_7.jpg
+++ b/img/thumb_7.jpg
--- a/img/thumb_8.jpg
+++ b/img/thumb_8.jpg
--- a/img/thumb_9.jpg
+++ b/img/thumb_9.jpg
--- a/index.html
+++ b/index.html
@ -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>
--- a/js/bootstrap.js
+++ b/js/bootstrap.js
--- a/js/bootstrap.js.map
+++ b/js/bootstrap.js.map