16_filter_and_search_01 item displayed

16_filter_and_search_01 item displayed on html page from javascript code, elements created and images added from javascript code
nitishkhobragade · Mar 12, 2024 · d021474 · d021474
1 parent d252a39
commit d021474
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 0 deletions.
diff --git a/16_filter_and_search_01/app.js b/16_filter_and_search_01/app.js
@@ -0,0 +1,82 @@
+let products = {
+    data: [
+        {
+        productName: "Regular White T-Shirt",
+        category: "Topwear",
+        price: "30",
+        image: "white-tshirt.jpg",
+    },
+    {
+        productName: "Beige Short Skirt",
+        category: "Bottomwear",
+        price: "49",
+        image: "short-skirt.jpg",
+    },
+    {
+        productName: "Sporty SmartWatch",
+        category: "Watch",
+        price: "99",
+        image: "sporty-smartwatch.jpg",
+    },
+    {
+        productName: "Basic Knitted Top",
+        category: "Topwear",
+        price: "29",
+        image: "knitted-top.jpg",
+    },
+    {
+        productName: "Black Leather Jacket",
+        category: "Jacket",
+        price: "129",
+        image: "black-leather-jacket.jpg",
+    },
+    {
+        productName: "Stylish Pink Trousers",
+        category: "Bottomwear",
+        price: "89",
+        image: "pink-trousers.jpg",
+    },
+    {
+        productName: "Brown Men's Jacket",
+        category: "Jacket",
+        price: "189",
+        image: "brown-jacket.jpg",
+    },
+    {
+        productName: "Comfy Gray Pants",
+        category: "Bottomwear",
+        price: "49",
+        image: "comfy-gray-pants.jpg",
+    },
+  ],
+};
+
+for (let i of products.data) {
+    ////Creating card
+    let card = document.createElement("div");
+    ////Card should have category
+    card.classList.add("card", i.category);
+    ////image div
+    let imgContainer = document.createElement("div");
+    imgContainer.classList.add("image-container");
+    ////img tag
+    let image = document.createElement("img");
+    image.setAttribute("src", i.image);
+    imgContainer.appendChild(image);
+    card.appendChild(imgContainer);
+    ////container
+    let container = document.createElement("div");
+    container.classList.add("container");
+    ////product name
+    let name = document.createElement("h5");
+    name.classList.add("product-name");
+    name.innerText = i.productName.toUpperCase();
+    container.appendChild(name);
+    //price
+    let price = document.createElement("h6");
+    price.innerText = "$"+ i.price;
+    container.appendChild(price);
+
+    card.appendChild(container);
+    document.getElementById("products").appendChild(card);
+}
diff --git a/16_filter_and_search_01/black-leather-jacket.jpg b/16_filter_and_search_01/black-leather-jacket.jpg
diff --git a/16_filter_and_search_01/brown-jacket.jpg b/16_filter_and_search_01/brown-jacket.jpg
diff --git a/16_filter_and_search_01/comfy-gray-pants.jpg b/16_filter_and_search_01/comfy-gray-pants.jpg
diff --git a/16_filter_and_search_01/index.html b/16_filter_and_search_01/index.html
@@ -4,9 +4,26 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Filter and Search using Javascript</title>
+    <!-- google font  -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="./styles.css">
 </head>
 <body>
+    <div class="wrapper">
+        <div id="search-container">
+            <input type="search" id="search-input" placeholder="Search product name here...">
+            <button id="search" >Search</button>
+        </div>
+    </div>
+    <div id="buttons">
+        <button class="button-value" onclick="filterProduct('all')">All</button>
+        <button class="button-value" onclick="filterProduct('Topwear')">Topwear</button>
+        <button class="button-value" onclick="filterProduct('Bottomwear')">Bottomwear</button>
+        <button class="button-value" onclick="filterProduct('Jacket')">Jacket</button>
+        <button class="button-value" onclick="filterProduct('Watch')">Watch</button>
+    </div>
+    <div id="products"></div>
     <script src="./app.js"></script>
 </body>
 </html>
diff --git a/16_filter_and_search_01/knitted-top.jpg b/16_filter_and_search_01/knitted-top.jpg
diff --git a/16_filter_and_search_01/pink-trousers.jpg b/16_filter_and_search_01/pink-trousers.jpg
diff --git a/16_filter_and_search_01/short-skirt.jpg b/16_filter_and_search_01/short-skirt.jpg
diff --git a/16_filter_and_search_01/sporty-smartwatch.jpg b/16_filter_and_search_01/sporty-smartwatch.jpg
diff --git a/16_filter_and_search_01/styles.css b/16_filter_and_search_01/styles.css
@@ -0,0 +1,81 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    font-family: "Poppins", sans-serif;
+}
+
+body {
+    background-color: #f5f8ff;
+}
+
+.wrapper{
+    width: 95%;
+    margin: 0 auto;
+}
+
+#search-container {
+    margin: 1em 0;
+}
+
+#search-container input {
+    background-color: transparent;
+    width: 40%;
+    border-bottom: 2px solid #110f29; 
+    padding: 1em 0.3em;
+}
+
+#search-container input:focus {
+    border-bottom-color: #6759ff;
+}
+
+#search-container button {
+    padding: 1em 2em;
+    margin-left: 1em;
+    background-color: #6759ff;
+    color: #ffffff;
+    border-radius: 5px;
+    margin-top: 0.5em;
+}
+
+.button-value {
+    border: 2px solid #6759ff;
+    padding: 1em 2.2em;
+    border-radius: 3em;
+    background-color: transparent;
+    color: #6759ff;
+    cursor: pointer;
+}
+
+.active {
+    background-color: #6759ff;
+    color: #ffffff;
+}
+
+#products {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-column-gap: 1.5em;
+    padding: 2em 0;
+}
+
+.card {
+    background-color: #ffffff;
+    max-width: 18em;
+    margin-top: 1em;
+    padding: 1em;
+    border-radius: 5px;
+    box-shadow: 1em 2em 2.5em rgba(1, 2, 68, 0.08);
+}
+
+.image-container {
+    text-align: center;
+}
+
+img {
+    max-width: 100%;
+    object-fit: contain;
+    height: 15em;
+}
diff --git a/16_filter_and_search_01/white-tshirt.jpg b/16_filter_and_search_01/white-tshirt.jpg