index.js

// let products = JSON.parse(localStorage.getItem("cart")) || [];

// let searchForm = document.querySelector("form");

// let allData = [];

// function getData() {

//   fetch("./products_data/product.json")
//     .then((res) => {
//       return res.json();

//     }).then((res) => {
//       console.log(res.data);
//       allData = [...res.data];
//       console.log("allData:", allData)
//       appendData(res.data);
//     })
//     .catch((err) => {
//       console.log(err);
//     })
// }

// function appendData(data) {
//   document.getElementById("product-container").innerHTML = "";

//   data.forEach((el, index) => {
//     let child = document.createElement("div");
//     let img = document.createElement("img");
//     img.src = el.img;
//     let brand = document.createElement("h2");
//     brand.innerText = el.brand;
//     let price = document.createElement("h3");
//     price.innerText = `₹${el.price}`;
//     let desc = document.createElement("p");
//     desc.innerText = el.details;
//     let category = document.createElement("p");
//     category.innerText = el.category;
//     let btn = document.createElement("button");
//     btn.innerText = "Add To Cart";
//     btn.addEventListener("click", () => {
//       let flag = false;
//       for (let i = 0; i < products.length; i++) {
//         if (products[i].id === el.id) {
//           flag = true;
//         }
//       }
//       if (flag === false) {
//         let payload = { ...el, qty: 1 }
//         products.push(payload);
//         localStorage.setItem("cart", JSON.stringify(products));
//         alert("Product Added To Cart");
//       } else {
//         alert("Product Already in Cart");
//       }
//     })

//     child.append(img, brand, price, desc, category, btn);
//     document.getElementById("product-container").append(child);
//   });

// }



// // document.getElementById("filter").addEventListener("change", async (e) => {

// //   let filterBy = e.target.value;

// //   // if(filterBy == ""){
// //   //   return appendData(arr);
// //   // }else{
// //   //   let arr = allData.filter((el, index) => {
// //   //   return el.category === filterBy;
// //   // })
// //   // }


// //   let arr = allData.filter((el, index) => {
// //     return el.category === filterBy;
// //   })

// //   appendData(arr);
// // })

// getData();

// searchForm.addEventListener("submit", (e) => {
//   e.preventDefault();
//   let searchParams = searchForm.search.value;

//   let filtered = allData.filter((element) => {
//     if (
//       element.category.toUpperCase().includes(searchParams.toUpperCase()) ===
//       true
//     ) {
//       return true;
//     } else {
//       return false;
//     }
//   });
//   appendData(filtered);
// });