diff --git a/16_filter_and_search_01/app.js b/16_filter_and_search_01/app.js index e69de29..431d7d0 100644 --- 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); +} \ No newline at end of file diff --git a/16_filter_and_search_01/black-leather-jacket.jpg b/16_filter_and_search_01/black-leather-jacket.jpg new file mode 100644 index 0000000..4b5ea90 Binary files /dev/null and b/16_filter_and_search_01/black-leather-jacket.jpg differ diff --git a/16_filter_and_search_01/brown-jacket.jpg b/16_filter_and_search_01/brown-jacket.jpg new file mode 100644 index 0000000..f4c4552 Binary files /dev/null and b/16_filter_and_search_01/brown-jacket.jpg differ diff --git a/16_filter_and_search_01/comfy-gray-pants.jpg b/16_filter_and_search_01/comfy-gray-pants.jpg new file mode 100644 index 0000000..e4369fd Binary files /dev/null and b/16_filter_and_search_01/comfy-gray-pants.jpg differ diff --git a/16_filter_and_search_01/index.html b/16_filter_and_search_01/index.html index f02d30e..3fd50c6 100644 --- a/16_filter_and_search_01/index.html +++ b/16_filter_and_search_01/index.html @@ -4,9 +4,26 @@ Filter and Search using Javascript + + + +
+
+ + +
+
+
+ + + + + +
+
\ No newline at end of file diff --git a/16_filter_and_search_01/knitted-top.jpg b/16_filter_and_search_01/knitted-top.jpg new file mode 100644 index 0000000..4c5397a Binary files /dev/null and b/16_filter_and_search_01/knitted-top.jpg differ diff --git a/16_filter_and_search_01/pink-trousers.jpg b/16_filter_and_search_01/pink-trousers.jpg new file mode 100644 index 0000000..ffeacb2 Binary files /dev/null and b/16_filter_and_search_01/pink-trousers.jpg differ diff --git a/16_filter_and_search_01/short-skirt.jpg b/16_filter_and_search_01/short-skirt.jpg new file mode 100644 index 0000000..ee04389 Binary files /dev/null and b/16_filter_and_search_01/short-skirt.jpg differ diff --git a/16_filter_and_search_01/sporty-smartwatch.jpg b/16_filter_and_search_01/sporty-smartwatch.jpg new file mode 100644 index 0000000..f585bdf Binary files /dev/null and b/16_filter_and_search_01/sporty-smartwatch.jpg differ diff --git a/16_filter_and_search_01/styles.css b/16_filter_and_search_01/styles.css index e69de29..b2eff9e 100644 --- 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; +} \ No newline at end of file diff --git a/16_filter_and_search_01/white-tshirt.jpg b/16_filter_and_search_01/white-tshirt.jpg new file mode 100644 index 0000000..3d64bb6 Binary files /dev/null and b/16_filter_and_search_01/white-tshirt.jpg differ