How to Create Product Filter and Search
with HTML CSS and JavaScript
To make this task, we really want HTML, CSS and Javascript. Since this is a seriously progressed project, I wouldn't suggest it for javascript fledglings. In the event that you are a javascript halfway or master you can doubtlessly continue and make this one.
Allow us to take an outline of what this task really is. The venture comprises of a lot of item cards. Every one of these cards has a name, cost and class relegated to them. Over these cards, there is a hunt bar where the client can look through an item founded on its name.
Video Tutorial of Product Filter and Search
Product Filter and Search [Source Codes]
To Create Product Filter and Search with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Product Filter And Search</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="wrapper">
- <h1>Product Filter With Search Box</h1>
- <div id="search-container">
- <input
- type="search"
- id="search-input"
- placeholder="Search product here..">
- <button id="search">Search</button>
- </div>
- <div id="buttons">
- <button class="button-value" onclick="filterProduct('all')">All</button>
- <button class="button-value" onclick="filterProduct('camera')">
- camera
- </button>
- <button class="button-value" onclick="filterProduct('iPhone')">
- iPhone
- </button>
- <button class="button-value" onclick="filterProduct('smart-watch')">
- smart watch
- </button>
- <button class="button-value" onclick="filterProduct('laptop')">
- laptop
- </button>
- </div>
- <div id="products"></div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- border: none;
- outline: none;
- font-family: "Open Sans", sans-serif;
- }
- body {
- background-color: #282A35;
- }
- h1{
- color: azure;
- margin-top: 15px;
- }
- .wrapper {
- width: 95%;
- margin: 0 auto;
- }
- #search-container {
- margin: 1em 0;
- }
- #search-container input {
- background-color: transparent;
- width: 20%;
- border: 2px solid #fff;
- border-radius: 8px;
- padding: 1em 0.3em;
- }
- #search-container input:focus {
- border: 1px solid #fff;
- }
- #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: #f2f2f2;
- max-width: 18em;
- margin-top: 1em;
- padding: 1em;
- border-radius: 8px;
- }
- .image-container {
- text-align: center;
- }
- img {
- max-width: 100%;
- object-fit: contain;
- height: 16em;
- }
- .container {
- padding-top: 1em;
- color: #110f29;
- }
- .container h5 {
- font-weight: 500;
- }
- .hide {
- display: none;
- }
- @media screen and (max-width: 720px) {
- img {
- max-width: 100%;
- object-fit: contain;
- height: 10em;
- }
- .card {
- max-width: 10em;
- margin-top: 1em;
- }
- #products {
- grid-template-columns: auto auto;
- grid-column-gap: 1em;
- }
- }
-
Now paste the following codes into your script.js file
- let products = {
- data: [
- {
- productName: "camera",
- category: "camera",
- price: "430",
- image: "img/7.jpg",
- },
- {
- productName: "iPhone",
- category: "iPhone",
- price: "249",
- image: "img/4.jpg",
- },
- {
- productName: "laptop",
- category: "laptop",
- price: "399",
- image: "img/1.jpg",
- },
- {
- productName: "camera",
- category: "camera",
- price: "329",
- image: "img/8.jpg",
- },
- {
- productName: "smart watch",
- category: "smart-watch",
- price: "123",
- image: "img/2.jpg",
- },
- {
- productName: "iPhone",
- category: "iPhone",
- price: "289",
- image: "img/5.jpg",
- },
- {
- productName: "smart watch",
- category: "smart-watch",
- price: "154",
- image: "img/3.jpg",
- },
- {
- productName: "iPhone",
- category: "iPhone",
- price: "249",
- image: "img/6.jpg",
- },
- ],
- };
-
- for (let i of products.data) {
-
- let card = document.createElement("div");
-
- card.classList.add("card", i.category, "hide");
-
- let imgContainer = document.createElement("div");
- imgContainer.classList.add("image-container");
-
- let image = document.createElement("img");
- image.setAttribute("src", i.image);
- imgContainer.appendChild(image);
- card.appendChild(imgContainer);
-
- let container = document.createElement("div");
- container.classList.add("container");
-
- let name = document.createElement("h5");
- name.classList.add("product-name");
- name.innerText = i.productName.toUpperCase();
- container.appendChild(name);
-
- let price = document.createElement("h6");
- price.innerText = "$" + i.price;
- container.appendChild(price);
-
- card.appendChild(container);
- document.getElementById("products").appendChild(card);
- }
-
-
- function filterProduct(value) {
-
- let buttons = document.querySelectorAll(".button-value");
- buttons.forEach((button) => {
-
- if (value.toUpperCase() == button.innerText.toUpperCase()) {
- button.classList.add("active");
- } else {
- button.classList.remove("active");
- }
- });
-
- let elements = document.querySelectorAll(".card");
-
- elements.forEach((element) => {
-
- if (value == "all") {
- element.classList.remove("hide");
- } else {
-
- if (element.classList.contains(value)) {
-
- element.classList.remove("hide");
- } else {
-
- element.classList.add("hide");
- }
- }
- });
- }
-
- document.getElementById("search").addEventListener("click", () => {
-
- let searchInput = document.getElementById("search-input").value;
- let elements = document.querySelectorAll(".product-name");
- let cards = document.querySelectorAll(".card");
-
-
- elements.forEach((element, index) => {
-
- if (element.innerText.includes(searchInput.toUpperCase())) {
-
- cards[index].classList.remove("hide");
- } else {
-
- cards[index].classList.add("hide");
- }
- });
- });
-
-
- window.onload = () => {
- filterProduct("all");
- };
-
If you face any difficulties while creating Product Filter and Search or your code is not working as expected, you can download the source code files by clicking download button.