diff --git a/index.html b/index.html index af8a160c..9abf953a 100644 --- a/index.html +++ b/index.html @@ -446,8 +446,9 @@

- + + diff --git a/js/appliances-script.js b/js/appliances-script.js index 139aabfb..63e98b1b 100644 --- a/js/appliances-script.js +++ b/js/appliances-script.js @@ -20,17 +20,31 @@ document.addEventListener('DOMContentLoaded', () => { // Function to create a product card function createapplianceProductCard(product) { - return ` - -
-
- ${product.id} -
-
${product.name}
-
Price: ₹${product.price}
+ const discont=(Math.floor(product.rating*(parseInt((product.price.toString()).slice(0,2)))/10)) + const afterDiscontPrice=Math.round((100-discont)*product.price/100) + + function formatIndianRupee(number) { + const parts = number.toString().split("."); + const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart; + return formattedNumber; + } + + return ` + + +
+
+ ${product.id}
- - `; +
${product.name.slice(0, 20)} ${product.name.length > 20 ? "...":""}
+
${product.rating}  
+
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off
+
+ +`; } diff --git a/js/beautyToys&more-script.js b/js/beautyToys&more-script.js index db1681d8..61be547f 100644 --- a/js/beautyToys&more-script.js +++ b/js/beautyToys&more-script.js @@ -22,17 +22,31 @@ document.addEventListener('DOMContentLoaded', () => { // Function to create a product card function createbeautyToysProductCard(product) { + const discont=(Math.floor(product.rating*(parseInt((product.price.toString()).slice(0,2)))/10)) + const afterDiscontPrice=Math.round((100-discont)*product.price/100) + + function formatIndianRupee(number) { + const parts = number.toString().split("."); + const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart; + return formattedNumber; + } + return ` - + +
-
- ${product.id} -
-
${product.name}
-
Price: ₹${product.price}
-
- - `; +
+ ${product.id} +
+
${product.name.slice(0, 20)} ${product.name.length > 20 ? "...":""}
+
${product.rating}  
+
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off
+
+ + `; } diff --git a/js/electronics-script.js b/js/electronics-script.js index 0b5fc314..2e1208f1 100644 --- a/js/electronics-script.js +++ b/js/electronics-script.js @@ -21,17 +21,31 @@ document.addEventListener('DOMContentLoaded', () => { // Function to create a product card function createelectronicsProductCard(product) { - return ` - -
-
- ${product.id} -
-
${product.name}
-
Price: ₹${product.price}
+ const discont=(Math.floor(product.rating*(parseInt((product.price.toString()).slice(0,2)))/10)) + const afterDiscontPrice=Math.round((100-discont)*product.price/100) + + function formatIndianRupee(number) { + const parts = number.toString().split("."); + const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart; + return formattedNumber; + } + + return ` + + +
+
+ ${product.id}
- - `; +
${product.name.slice(0, 20)} ${product.name.length > 20 ? "...":""}
+
${product.rating}  
+
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off
+
+ +`; } diff --git a/js/fashion-script.js b/js/fashion-script.js index 2397cf62..6906fb0a 100644 --- a/js/fashion-script.js +++ b/js/fashion-script.js @@ -21,17 +21,31 @@ document.addEventListener('DOMContentLoaded', () => { // Function to create a product card function createfashionsProductCard(product) { - return ` - -
-
- ${product.id} -
-
${product.name}
-
Price: ₹${product.price}
+ const discont=(Math.floor(product.rating*(parseInt((product.price.toString()).slice(0,2)))/10)) + const afterDiscontPrice=Math.round((100-discont)*product.price/100) + + function formatIndianRupee(number) { + const parts = number.toString().split("."); + const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart; + return formattedNumber; + } + + return ` + + +
+
+ ${product.id}
- - `; +
${product.name.slice(0, 20)} ${product.name.length > 20 ? "...":""}
+
${product.rating}  
+
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off
+
+ +`; } diff --git a/js/fetchProductOfIndex.js b/js/fetchProductOfIndex.js new file mode 100644 index 00000000..01cc1c24 --- /dev/null +++ b/js/fetchProductOfIndex.js @@ -0,0 +1,202 @@ + +// product fetch +// Function to create a product card +function createProductCard(product) { + const discont=(Math.floor(product.rating*(parseInt((product.price.toString()).slice(0,2)))/10)) + const afterDiscontPrice=Math.round((100-discont)*product.price/100) + + function formatIndianRupee(number) { + const parts = number.toString().split("."); + const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart; + return formattedNumber; + } + + return ` + + +
+
+ ${product.id} +
+
${product.name.slice(0, 20)} ${product.name.length > 20 ? "...":""}
+
${product.rating}  
+
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off
+
+ + `; + } + + // Function to populate rendom products + function rendom_products(products) { + const productList = document.getElementById("rendom-product"); + productList.innerHTML = products + .map((product) => createProductCard(product)) + .join(""); + } + + // Function to best deal products + function best_deal_products(products) { + const productList = document.getElementById("best-deal-product"); + productList.innerHTML = products + .map((product) => createProductCard(product)) + .join(""); + } + // Function to best top-selection-product + function top_selection_products(products) { + const productList = document.getElementById("top-selection-product"); + productList.innerHTML = products + .map((product) => createProductCard(product)) + .join(""); + } + + // Function to under 15000 rs mobile + function mobileUnder15000(products) { + const productList = document.getElementById("mobileUnder15000-product"); + productList.innerHTML = products + .map((product) => createProductCard(product)) + .join(""); + } + + + + // Function to s2-product + function s2_products(products) { + const productList = document.getElementById("s2-product"); + productList.innerHTML = products + .map((product) => createProductCard(product)) + .join(""); + } + + // Function to under 500 Product + function shopUnder500(products) { + const productList = document.getElementById("shopUnder500-product"); + productList.innerHTML = products + .map((product) => createProductCard(product)) + .join(""); + } + + // best of Electronics + function bestOfEelecronics_products(products) { + const productList = document.getElementById("bestOfElectronics-product"); + productList.innerHTML = products + .map((product) => createProductCard(product)) + .join(""); + } + + // seletcYourChoice-product + function seletcYourChoice_products(products) { + const productList = document.getElementById("seletcYourChoice-product"); + productList.innerHTML = products + .map((product) => createProductCard(product)) + .join(""); + } + + // General function to fetch and shuffle data + function fetchAndShuffleData(url, callback, numberOfProducts) { + fetch(url) + .then((response) => response.json()) + .then((data) => { + // Shuffle the array using the Fisher-Yates algorithm + for (let i = data.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [data[i], data[j]] = [data[j], data[i]]; + } + + // Select the desired number of products from the shuffled array + const selectedProducts = data.slice(0, numberOfProducts); + + // Call the callback function with the selected products + callback(selectedProducts); + }) + .catch((error) => console.error("Error fetching data:", error)); + } + + + // General function to fetch 15000 rs mobile data + function fetchAndShuffleDataMobile15000(url, callback, numberOfProducts) { + fetch(url) + .then((response) => response.json()) + .then((data) => { + + const f_data = data.filter(product => product.price<=15000 && product.category=='mobile'); + // Shuffle the array using the Fisher-Yates algorithm + for (let i = f_data.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [f_data[i], f_data[j]] = [f_data[j], f_data[i]]; + } + + // Select the desired number of products from the shuffled array + const selectedProducts = f_data.slice(0, numberOfProducts); + + // Call the callback function with the selected products + callback(selectedProducts); + }) + .catch((error) => console.error("Error fetching data:", error)); + } + + + // best of electronics + function bestOfEelecronics(url, callback, numberOfProducts) { + fetch(url) + .then((response) => response.json()) + .then((data) => { + + const f_data = data.filter(product => product.category=='electronics'); + // Shuffle the array using the Fisher-Yates algorithm + for (let i = f_data.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [f_data[i], f_data[j]] = [f_data[j], f_data[i]]; + } + + // Select the desired number of products from the shuffled array + const selectedProducts = f_data.slice(0, numberOfProducts); + + // Call the callback function with the selected products + callback(selectedProducts); + }) + .catch((error) => console.error("Error fetching data:", error)); + } + + + // General function to fetch under 500 data + function fetchAndShuffleDataUnder(url, callback, numberOfProducts) { + fetch(url) + .then((response) => response.json()) + .then((data) => { + + const f_data = data.filter(product => product.price<=500); + // Shuffle the array using the Fisher-Yates algorithm + for (let i = f_data.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [f_data[i], f_data[j]] = [f_data[j], f_data[i]]; + } + + // Select the desired number of products from the shuffled array + const selectedProducts = f_data.slice(0, numberOfProducts); + + // Call the callback function with the selected products + callback(selectedProducts); + }) + .catch((error) => console.error("Error fetching data:", error)); + } + + + + // mobileUnder15000Data() + // Fetch data for best-deal products rendom products & top selection + bestOfEelecronics("json-api/product.json", bestOfEelecronics_products, 6); + + fetchAndShuffleData("json-api/product.json", rendom_products, 12); + fetchAndShuffleData("json-api/product.json", best_deal_products, 18); + fetchAndShuffleData("json-api/product.json", top_selection_products, 12); + fetchAndShuffleData("json-api/product.json", s2_products, 12); + fetchAndShuffleData("json-api/product.json", seletcYourChoice_products, 120); + + fetchAndShuffleDataMobile15000("json-api/product.json", mobileUnder15000, 12); + fetchAndShuffleDataUnder("json-api/product.json", shopUnder500, 18); + + + \ No newline at end of file diff --git a/js/grocery-store-script.js b/js/grocery-store-script.js index 8fe0f47c..1a69893d 100644 --- a/js/grocery-store-script.js +++ b/js/grocery-store-script.js @@ -22,17 +22,31 @@ document.addEventListener("DOMContentLoaded", () => { // Function to create a product card function createGroceryProductCard(product) { - return ` - -
-
- ${product.id} -
-
${product.name}
-
Price: ₹${product.price}
+ const discont=(Math.floor(product.rating*(parseInt((product.price.toString()).slice(0,2)))/10)) + const afterDiscontPrice=Math.round((100-discont)*product.price/100) + + function formatIndianRupee(number) { + const parts = number.toString().split("."); + const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart; + return formattedNumber; + } + + return ` + + +
+
+ ${product.id} +
+
${product.name.slice(0, 20)} ${product.name.length > 20 ? "...":""}
+
${product.rating}  
+
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off
- - `; + + `; } diff --git a/js/home&furniture-script.js b/js/home&furniture-script.js index ee1d903b..aaa8eb7d 100644 --- a/js/home&furniture-script.js +++ b/js/home&furniture-script.js @@ -20,17 +20,31 @@ document.addEventListener('DOMContentLoaded', () => { // Function to create a product card function createhomefurnitureProductCard(product) { - return ` - -
-
- ${product.id} -
-
${product.name}
-
Price: ₹${product.price}
+ const discont=(Math.floor(product.rating*(parseInt((product.price.toString()).slice(0,2)))/10)) + const afterDiscontPrice=Math.round((100-discont)*product.price/100) + + function formatIndianRupee(number) { + const parts = number.toString().split("."); + const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart; + return formattedNumber; + } + + return ` + + +
+
+ ${product.id}
- - `; +
${product.name.slice(0, 20)} ${product.name.length > 20 ? "...":""}
+
${product.rating}  
+
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off
+
+ +`; } diff --git a/js/index.js b/js/index.js index f7d50bf2..f06b8104 100644 --- a/js/index.js +++ b/js/index.js @@ -20,200 +20,7 @@ document.addEventListener("DOMContentLoaded", () => { -/* -
- -
- ${product.id} -
-
${product.name}
-
${product.rating}  
-
₹${product.price}
-
- - - `; -} - -// Function to populate rendom products -function rendom_products(products) { - const productList = document.getElementById("rendom-product"); - productList.innerHTML = products - .map((product) => createProductCard(product)) - .join(""); -} - -// Function to best deal products -function best_deal_products(products) { - const productList = document.getElementById("best-deal-product"); - productList.innerHTML = products - .map((product) => createProductCard(product)) - .join(""); -} -// Function to best top-selection-product -function top_selection_products(products) { - const productList = document.getElementById("top-selection-product"); - productList.innerHTML = products - .map((product) => createProductCard(product)) - .join(""); -} - -// Function to under 15000 rs mobile -function mobileUnder15000(products) { - const productList = document.getElementById("mobileUnder15000-product"); - productList.innerHTML = products - .map((product) => createProductCard(product)) - .join(""); -} - - - -// Function to s2-product -function s2_products(products) { - const productList = document.getElementById("s2-product"); - productList.innerHTML = products - .map((product) => createProductCard(product)) - .join(""); -} - -// Function to under 500 Product -function shopUnder500(products) { - const productList = document.getElementById("shopUnder500-product"); - productList.innerHTML = products - .map((product) => createProductCard(product)) - .join(""); -} - -// best of Electronics -function bestOfEelecronics_products(products) { - const productList = document.getElementById("bestOfElectronics-product"); - productList.innerHTML = products - .map((product) => createProductCard(product)) - .join(""); -} - -// seletcYourChoice-product -function seletcYourChoice_products(products) { - const productList = document.getElementById("seletcYourChoice-product"); - productList.innerHTML = products - .map((product) => createProductCard(product)) - .join(""); -} - -// General function to fetch and shuffle data -function fetchAndShuffleData(url, callback, numberOfProducts) { - fetch(url) - .then((response) => response.json()) - .then((data) => { - // Shuffle the array using the Fisher-Yates algorithm - for (let i = data.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [data[i], data[j]] = [data[j], data[i]]; - } - - // Select the desired number of products from the shuffled array - const selectedProducts = data.slice(0, numberOfProducts); - - // Call the callback function with the selected products - callback(selectedProducts); - }) - .catch((error) => console.error("Error fetching data:", error)); -} - - -// General function to fetch 15000 rs mobile data -function fetchAndShuffleDataMobile15000(url, callback, numberOfProducts) { - fetch(url) - .then((response) => response.json()) - .then((data) => { - - const f_data = data.filter(product => product.price<=15000 && product.category=='mobile'); - // Shuffle the array using the Fisher-Yates algorithm - for (let i = f_data.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [f_data[i], f_data[j]] = [f_data[j], f_data[i]]; - } - - // Select the desired number of products from the shuffled array - const selectedProducts = f_data.slice(0, numberOfProducts); - - // Call the callback function with the selected products - callback(selectedProducts); - }) - .catch((error) => console.error("Error fetching data:", error)); -} - - -// best of electronics -function bestOfEelecronics(url, callback, numberOfProducts) { - fetch(url) - .then((response) => response.json()) - .then((data) => { - - const f_data = data.filter(product => product.category=='electronics'); - // Shuffle the array using the Fisher-Yates algorithm - for (let i = f_data.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [f_data[i], f_data[j]] = [f_data[j], f_data[i]]; - } - - // Select the desired number of products from the shuffled array - const selectedProducts = f_data.slice(0, numberOfProducts); - - // Call the callback function with the selected products - callback(selectedProducts); - }) - .catch((error) => console.error("Error fetching data:", error)); -} - - -// General function to fetch under 500 data -function fetchAndShuffleDataUnder(url, callback, numberOfProducts) { - fetch(url) - .then((response) => response.json()) - .then((data) => { - - const f_data = data.filter(product => product.price<=500); - // Shuffle the array using the Fisher-Yates algorithm - for (let i = f_data.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [f_data[i], f_data[j]] = [f_data[j], f_data[i]]; - } - - // Select the desired number of products from the shuffled array - const selectedProducts = f_data.slice(0, numberOfProducts); - - // Call the callback function with the selected products - callback(selectedProducts); - }) - .catch((error) => console.error("Error fetching data:", error)); -} - - - -// mobileUnder15000Data() -// Fetch data for best-deal products rendom products & top selection -bestOfEelecronics("json-api/product.json", bestOfEelecronics_products, 6); - -fetchAndShuffleData("json-api/product.json", rendom_products, 12); -fetchAndShuffleData("json-api/product.json", best_deal_products, 18); -fetchAndShuffleData("json-api/product.json", top_selection_products, 12); -fetchAndShuffleData("json-api/product.json", s2_products, 12); -fetchAndShuffleData("json-api/product.json", seletcYourChoice_products, 120); - -fetchAndShuffleDataMobile15000("json-api/product.json", mobileUnder15000, 12); -fetchAndShuffleDataUnder("json-api/product.json", shopUnder500, 18); - - - - - - // Show or hide the "Go to Top" button based on scroll position +// Show or hide the "Go to Top" button based on scroll position window.addEventListener("scroll", function() { var scrollToTopBtn = document.getElementById("goToTopBtn"); if (window.scrollY > 100) { diff --git a/js/mobile-phones-store-script.js b/js/mobile-phones-store-script.js index 2e981fa6..99d262d3 100644 --- a/js/mobile-phones-store-script.js +++ b/js/mobile-phones-store-script.js @@ -22,19 +22,31 @@ document.addEventListener("DOMContentLoaded", () => { // Function to create a mobile card function createMobileCard(mobile) { - return ` - - -
-
${mobile.name} -
-
${mobile.name}
-
${mobile.rating}  
-
₹${mobile.price}
-
+ const discont=(Math.floor(mobile.rating*(parseInt((mobile.price.toString()).slice(0,2)))/10)) + const afterDiscontPrice=Math.round((100-discont)*mobile.price/100) + + function formatIndianRupee(number) { + const parts = number.toString().split("."); + const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart; + return formattedNumber; + } + + return ` + + +
+
+ ${mobile.id} +
+
${mobile.name.slice(0, 20)} ${mobile.name.length > 20 ? "...":""}
+
${mobile.rating}  
+
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(mobile.price)} ${discont}% off
+
- `; + `; } // Function to populate Apple mobiles diff --git a/js/searchForProducts.js b/js/searchForProducts.js index 2e542fef..135a5c2f 100644 --- a/js/searchForProducts.js +++ b/js/searchForProducts.js @@ -1,86 +1,81 @@ -const searchJSON = (query) => { - // Fetch JSON data from the data.json file - return fetch("json-api/product.json") - .then((response) => response.json()) - .then((data) => { - const results = data.filter((item) => { - return ( - item.name.toLowerCase().includes(query.toLowerCase()) || - item.category.toLowerCase().includes(query.toLowerCase()) - ); - }); +document.addEventListener("DOMContentLoaded", () => { + const components = [ + { id: "footer-searchtab", url: "../footer/footer.html" }, + { id: "header-searchtab", url: "../header/header.html" }, + ]; + + components.forEach((component) => { + fetch(component.url) + .then((response) => response.text()) + .then((data) => { + document.getElementById(component.id).innerHTML = data; + }) + .catch((error) => + console.error(`Error loading ${component.url}:`, error) + ); + }); +}); - return results; - }) - .catch((error) => console.error("Error fetching JSON:", error)); -}; -document.addEventListener("DOMContentLoaded", function () { - const searchInput = document.getElementById("input_data"); - const autocompleteResults = document.getElementById("autocompleteResults"); - const searchButton = document.getElementById("searchButton"); - const resultsContainer = document.getElementById("results"); - searchInput.addEventListener("input", function () { - const query = searchInput.value.trim(); - searchJSON(query).then((autocompleteSuggestions) => { - // Clear previous autocomplete suggestions - autocompleteResults.innerHTML = ""; +// Function to get query parameter +function getQueryParameter(name) { + const urlParams = new URLSearchParams(window.location.search); + return urlParams.get(name); +} + +// Function to create product card +function createSearchProductCard(product) { + const discont=(Math.floor(product.rating*(parseInt((product.price.toString()).slice(0,2)))/10)) + const afterDiscontPrice=Math.round((100-discont)*product.price/100) + + function formatIndianRupee(number) { + const parts = number.toString().split("."); + const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart; + return formattedNumber; + } + + return ` + + +
+
+ ${product.id} +
+
${product.name.slice(0, 20)} ${product.name.length > 20 ? "...":""}
+
${product.rating}  
+
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off
+
+ + `; +} + +// Function to display search results +function searchFetch(products) { + const searchList = document.getElementById('results'); + searchList.innerHTML = products.map(product => createSearchProductCard(product)).join(''); +} - // Display autocomplete suggestions - if (query.length > 0 && autocompleteSuggestions.length > 0) { - autocompleteSuggestions.forEach((result) => { - const suggestionItem = document.createElement("div"); - suggestionItem.classList.add("autocomplete-item"); - suggestionItem.textContent = `${result.name} - ${result.category}`; - suggestionItem.addEventListener("click", function () { - searchInput.value = result.name; - autocompleteResults.style.display = "none"; - }); - autocompleteResults.appendChild(suggestionItem); - }); - autocompleteResults.style.display = "block"; - } else { - autocompleteResults.style.display = "none"; +// Fetch data from the JSON file and filter products based on the query +fetch('../json-api/product.json') + .then(response => response.json()) + .then(data => { + const query = getQueryParameter('query'); + if(query=="men"){ + const filteredProducts = data.filter(product => product.category.toLowerCase().includes(query.toLowerCase()) && !product.category.toLowerCase().includes("women")|| product.name.toLowerCase().includes(query) && !product.name.toLowerCase().includes('women')); + searchFetch(filteredProducts); + }else{ + const filteredProducts = data.filter(product => product.category.toLowerCase().includes(query.toLowerCase()) || product.name.toLowerCase().includes(query)); + searchFetch(filteredProducts); } - }); - }); + }) + .catch(error => console.error('Error fetching data:', error)); - searchButton.addEventListener("click", function () { - autocompleteResults.style.display = "none"; - const query = searchInput.value.trim(); - if (query === "") { - resultsContainer.innerHTML = ""; - } else { - searchJSON(query).then((searchResults) => { - // Clear previous results - resultsContainer.innerHTML = ""; - // Display results - if (searchResults.length === 0) { - resultsContainer.innerHTML = "No results found."; - } else { - searchResults.forEach((result) => { - const resultElement = document.createElement("div"); - resultElement.classList.add("col-md-2"); - resultElement.classList.add("col-sm-4"); - resultElement.classList.add("col-6"); - resultElement.classList.add("p-2"); - resultElement.innerHTML = ` - -
- ${result.name} -
-
${result.name}
-
Price: ₹${result.price}
- - `; - resultsContainer.appendChild(resultElement); - }); - } - }); - } - }); -}); + + + diff --git a/js/searchIndexProducts.js b/js/searchIndexProducts.js index b27fc33d..2e542fef 100644 --- a/js/searchIndexProducts.js +++ b/js/searchIndexProducts.js @@ -1,61 +1,86 @@ -document.addEventListener("DOMContentLoaded", () => { - const components = [ - { id: "footer-searchtab", url: "../footer/footer.html" }, - { id: "header-searchtab", url: "../header/header.html" }, - ]; - - components.forEach((component) => { - fetch(component.url) - .then((response) => response.text()) - .then((data) => { - document.getElementById(component.id).innerHTML = data; - }) - .catch((error) => - console.error(`Error loading ${component.url}:`, error) - ); - }); -}); - +const searchJSON = (query) => { + // Fetch JSON data from the data.json file + return fetch("json-api/product.json") + .then((response) => response.json()) + .then((data) => { + const results = data.filter((item) => { + return ( + item.name.toLowerCase().includes(query.toLowerCase()) || + item.category.toLowerCase().includes(query.toLowerCase()) + ); + }); + return results; + }) + .catch((error) => console.error("Error fetching JSON:", error)); +}; -// Function to get query parameter -function getQueryParameter(name) { - const urlParams = new URLSearchParams(window.location.search); - return urlParams.get(name); -} +document.addEventListener("DOMContentLoaded", function () { + const searchInput = document.getElementById("input_data"); + const autocompleteResults = document.getElementById("autocompleteResults"); + const searchButton = document.getElementById("searchButton"); + const resultsContainer = document.getElementById("results"); -// Function to create product card -function createSearchProductCard(product) { - return ` - -
-
- ${product.id} -
-
${product.name}
-
${product.rating}  
-
Price: ₹${product.price}
-
- - `; -} + searchInput.addEventListener("input", function () { + const query = searchInput.value.trim(); + searchJSON(query).then((autocompleteSuggestions) => { + // Clear previous autocomplete suggestions + autocompleteResults.innerHTML = ""; -// Function to display search results -function searchFetch(products) { - const searchList = document.getElementById('results'); - searchList.innerHTML = products.map(product => createSearchProductCard(product)).join(''); -} - -// Fetch data from the JSON file and filter products based on the query -fetch('../json-api/product.json') - .then(response => response.json()) - .then(data => { - const query = getQueryParameter('query'); - const filteredProducts = data.filter(product => product.category.toLowerCase().includes(query.toLowerCase()) || product.name.toLowerCase().includes(query)); - searchFetch(filteredProducts); - }) - .catch(error => console.error('Error fetching data:', error)); + // Display autocomplete suggestions + if (query.length > 0 && autocompleteSuggestions.length > 0) { + autocompleteSuggestions.forEach((result) => { + const suggestionItem = document.createElement("div"); + suggestionItem.classList.add("autocomplete-item"); + suggestionItem.textContent = `${result.name} - ${result.category}`; + suggestionItem.addEventListener("click", function () { + searchInput.value = result.name; + autocompleteResults.style.display = "none"; + }); + autocompleteResults.appendChild(suggestionItem); + }); + autocompleteResults.style.display = "block"; + } else { + autocompleteResults.style.display = "none"; + } + }); + }); + searchButton.addEventListener("click", function () { + autocompleteResults.style.display = "none"; + const query = searchInput.value.trim(); + if (query === "") { + resultsContainer.innerHTML = ""; + } else { + searchJSON(query).then((searchResults) => { + // Clear previous results + resultsContainer.innerHTML = ""; - \ No newline at end of file + // Display results + if (searchResults.length === 0) { + resultsContainer.innerHTML = "No results found."; + } else { + searchResults.forEach((result) => { + const resultElement = document.createElement("div"); + resultElement.classList.add("col-md-2"); + resultElement.classList.add("col-sm-4"); + resultElement.classList.add("col-6"); + resultElement.classList.add("p-2"); + resultElement.innerHTML = ` + +
+ ${result.name} +
+
${result.name}
+
Price: ₹${result.price}
+ + `; + resultsContainer.appendChild(resultElement); + }); + } + }); + } + }); +}); diff --git a/js/twoWheelers-script.js b/js/twoWheelers-script.js index f8240d6a..10d3027a 100644 --- a/js/twoWheelers-script.js +++ b/js/twoWheelers-script.js @@ -21,17 +21,31 @@ document.addEventListener('DOMContentLoaded', () => { // Function to create a product card function createtwoWheelersProductCard(product) { + const discont=(Math.floor(product.rating*(parseInt((product.price.toString()).slice(0,2)))/10)) + const afterDiscontPrice=Math.round((100-discont)*product.price/100) + + function formatIndianRupee(number) { + const parts = number.toString().split("."); + const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart; + return formattedNumber; + } + return ` - + +
-
- ${product.id} +
+ ${product.id}
-
${product.name}
-
Price: ₹${product.price}
-
- - `; +
${product.name.slice(0, 20)} ${product.name.length > 20 ? "...":""}
+
${product.rating}  
+
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off
+
+ + `; } diff --git a/search/index.html b/search/index.html index 7d42b846..07792f60 100644 --- a/search/index.html +++ b/search/index.html @@ -20,7 +20,7 @@
-

Showing Results

+
Showing Results for
@@ -29,7 +29,7 @@

Showing Results

- +