diff --git a/controllers/productsCtrlFile.js b/controllers/productsCtrlFile.js
index 771b7d85a8f36fdee73edc6e4e359dbc710a7dda..39b2f9af836cf1ae82adee902dbbab45556814e5 100644
--- a/controllers/productsCtrlFile.js
+++ b/controllers/productsCtrlFile.js
@@ -1,14 +1,5 @@
const { productList } = require('../products');
-/*exports.productCtrlFunction = (req, res) => {
- try{
- res.status(200).json({
- products: productList
- });
- }catch(error){
- console.log(error);
- }
-} */
// productsCtrlFile.js
const productsCtrlFunction = (req, res) => {
diff --git a/package.json b/package.json
index caabb467ecc244a5f9557e6fdce068da4c712194..fdc6dac6f560033a31ef3a38eb20beb5aeda4c9e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
"dependencies": {
"express": "^4.18.2",
"hbs": "^4.2.0",
- "nodemon": "^3.0.3"
+ "nodemon": "^3.0.3",
+ "type": "module",
+ "content-type": "1.0.5"
}
}
diff --git a/products.js b/products.js
index 5a01b6d77cb164b2115f9b10c8e38fe31152f83f..df4dc4773f0b5ab5ccfdd32fd956369ceea7f1ba 100644
--- a/products.js
+++ b/products.js
@@ -304,4 +304,6 @@ exports.productList = [
Image: 'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
}
]
-];
\ No newline at end of file
+];
+
+//module.exports = productList;
\ No newline at end of file
diff --git a/public/search.js b/public/search.js
index 1c65271f4879b8b4eee5506b950efddd0e29fb72..f5e68257bf0d8186be6920ba2c65d705e690fab1 100644
--- a/public/search.js
+++ b/public/search.js
@@ -1,175 +1,79 @@
-/* // Please note: This code is meant to be run in a browser environment, not in Node.js
+//let products = []; // Declare the products variable
-let postsData = [];
-const postsContainer = document.querySelector(".posts-container");
+const characterList = document.getElementById('characterList');
+const searchBar = document.getElementById('search-input');
-fetch(
- //this to be replaced with the actual website link in later stage.
- "http://localhost:5000/products"
-)
- .then(response => response.json())
- .then(data => {
- postsData = data;
- postsData.map(post => createPost(post));
- });
-
-const createPost = postData => {
- const { title, link, image, categories } = postData;
- const post = document.createElement("div");
- post.className = "post";
- post.innerHTML = `
- <a class="post-preview" href="${link}" target="_blank">
- <img class="post-image" src="${image}" alt="Post Image"></img>
- </a>
- <div class="post-content">
- <p class="post-title">${title}</p>
- <div class="post-tags">
- ${categories.map(category => `<span class="post-tag">${category}</span>`).join("")}
- </div>
- </div>
- `;
- postsContainer.append(post);
-};
-
-const search = document.getElementById("search-input");
-
-let timer;
-const debounce = (callback, time) => {
- window.clearTimeout(timer);
- timer = window.setTimeout(callback, time);
-};
+console.log('search running');
+console.log(searchBar);
-search.addEventListener(
- 'input',
- event => {
- const query = event.target.value;
- debounce(() => handleSearchPosts(query), 500);
- },
- false
-);
+searchBar.addEventListener('keyup', (event) => {
+ console.log(event.target.value);
+ const searchString = event.target.value.toLowerCase(); // Convert to lower case for case-insensitive comparison
+ const filteredProducts = products.filter((product) => {
+ return (
+ product.name.toLowerCase().includes(searchString) ||
+ product.tag.toLowerCase().includes(searchString)
+ );
+ });
-const handleSearchPosts = query => {
- const searchQuery = query.trim().toLowerCase();
- let searchResults = postsData.filter(
- post =>
- post.categories.some(category => category.toLowerCase().includes(searchQuery)) ||
- post.title.toLowerCase().includes(searchQuery)
- );
+ console.log(filteredProducts);
+ displayCart(filteredProducts); // Pass filtered products to displayCart
+});
- const searchDisplay = document.querySelector('.search-display');
- if (searchResults.length === 0) {
- searchDisplay.innerHTML = "No results found";
- } else if (searchResults.length === 1) {
- searchDisplay.innerHTML = `1 result found for your query: ${query}`;
+ displayCart = (products) => {
+ console.log('Products:', products);
+ if (Array.isArray(products)) {
+ const htmlString = products.map((product) => {
+ return `
+ <div class="product">
+ <div class="product-card">
+ <h2 class="name">${product.name}</h2>
+ <span class="price">£${product.price}</span>
+ <a class="popup-btn">Quick View</a>
+ <img src="${product.Image}" class="product-img" alt="${product.description}">
+ </div>
+ <div class="popup-view">
+ <div class="popup-card">
+ <a><i class="fas fa-times close-btn"></i></a>
+ <div class="product-img">
+ <img src="${product.Image}" alt="${product.description}">
+ </div>
+ <div class="info">
+ <h2>Your fashion<br><span>Modern styles</span></h2>
+ <p>${product.description}</p>
+ <span class="price">£${product.price}</span>
+ <a href="#" class="add-cart-btn">Add to Cart</a>
+ <a href="#" class="add-wish">Add to Wishlist</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ `;
+ }).join('');
+ characterList.innerHTML = htmlString;
} else {
- searchDisplay.innerHTML = `${searchResults.length} results found for your query: ${query}`;
+ console.error('Products is not an array:', products);
}
-
- postsContainer.innerHTML = "";
- searchResults.map(post => createPost(post));
};
-const resetPosts = () => {
- const searchDisplay = document.querySelector('.search-display');
- searchDisplay.innerHTML = "";
- postsContainer.innerHTML = "";
- postsData.map(post => createPost(post));
-};
- */
-document.addEventListener("DOMContentLoaded", function() {
-
-
- let postsData = [];
- const postsContainer = document.querySelector(".posts-container");
- const searchInput = document.getElementById("search-input");
- const searchDisplay = document.querySelector('.search-display');
- let debounceTimer;
-
- // Fetch posts data from the server
- const fetchPosts = async () => {
- try {
- const response = await fetch("http://localhost:5000/products");
- if (!response.ok) {
- throw new Error('Failed to fetch data');
- }
- const data = await response.json();
- if (!Array.isArray(data)) {
- throw new Error('Data is not an array');
- }
- postsData = data;
- displayPosts(postsData);
- } catch (error) {
- console.log('Error fetching data:', error.message);
+const loadProducts = async () => {
+ try {
+ const res = await fetch('http://localhost:5000');
+ if (!res.ok) {
+ throw new Error('Network response was not ok');
}
- };
-
- // Display posts in the UI
- const displayPosts = (data) => {
- postsContainer.innerHTML = "";
- data.forEach(post => {
- const postElement = createPostElement(post);
- postsContainer.appendChild(postElement);
- });
- };
-
- // Create HTML element for a single post
- const createPostElement = (postData) => {
- const { title, link, image, categories } = postData;
- const post = document.createElement("div");
- post.className = "post";
- post.innerHTML = `
- <a class="post-preview" href="${link}" target="_blank">
- <img class="post-image" src="${image}" alt="Post Image"></img>
- </a>
- <div class="post-content">
- <p class="post-title">${title}</p>
- <div class="post-tags">
- ${categories.map(category => `<span class="post-tag">${category}</span>`).join("")}
- </div>
- </div>
- `;
- return post;
- };
+ const data = await res.json();
+ const products = Object.values(data).flat(); // Extract products from the object and flatten them into a single array
+ console.log('Products:', products);
+ displayCart(products);
+ } catch (err) {
+ console.error('Error fetching products:', err);
+ }
+};
- // Handle search input
- const handleSearchInput = () => {
- const query = searchInput.value.trim().toLowerCase();
- const searchResults = postsData.filter(post =>
- post.categories.some(category => category.toLowerCase().includes(query)) ||
- post.title.toLowerCase().includes(query)
- );
- displaySearchResults(searchResults, query);
- };
- // Display search results in the UI
- const displaySearchResults = (results, query) => {
- if (results.length === 0) {
- searchDisplay.textContent = "No results found";
- } else if (results.length === 1) {
- searchDisplay.textContent = `1 result found for your query: ${query}`;
- } else {
- searchDisplay.textContent = `${results.length} results found for your query: ${query}`;
- }
- displayPosts(results);
- };
+loadProducts();
- // Debounce search input to reduce function calls
- //let debounceTimer;
- const debounceSearch = () => {
- clearTimeout(debounceTimer);
- debounceTimer = setTimeout(handleSearchInput, 500);
- };
- // Event listener for search input
- searchInput.addEventListener('input', debounceSearch);
- // Reset posts to initial state
- const resetPosts = () => {
- searchDisplay.textContent = "";
- searchInput.value = "";
- displayPosts(postsData);
- };
- // Initial fetch of posts data
- fetchPosts();
-});
diff --git a/server.js b/server.js
index e04d77c8f4682e12b5272234e2559ca874d0814d..a12614209814a11063a72fbd5cfe351553240f6b 100644
--- a/server.js
+++ b/server.js
@@ -2,6 +2,7 @@ const express = require('express');
const path = require('path');
const app = express();
const publicDirectory = path.join(__dirname, './public');
+
/* console.log(__dirname);
console.log(publicDirectory); */
app.use(express.static(publicDirectory));
@@ -10,6 +11,15 @@ app.set('view engine', 'hbs');
app.use('/', require('./routes/pages'));
app.use('/products', require('./routes/productsRouteFile'));
+const productList = require('./products');
+
+// Route to get products
+app.get('/products', (req, res) => {
+ // Send the products as JSON
+ res.setHeader('Content-Type', 'application/json');
+ res.json(productList);
+ });
+
app.listen(5000, () => {
console.log("Server is listening on port 5000");
-})
\ No newline at end of file
+});
diff --git a/views/index.hbs b/views/index.hbs
index 2b813a59acba5124a694e5ca2fb8dac0d147ae41..b179a274993d58fe8200708ff7bd7ac21b7ae680 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -69,6 +69,7 @@
</header>
<main class="cont">
<div class="search-display"></div>
+ <div id="characterList"></div>
<div class="posts-container"></div>
</main>
<br>
diff --git a/views/men.hbs b/views/men.hbs
index da655631f6eaf580f24456fab394206a6d2b3450..ba94f322981ca9471377adc23ae6d4d78c47f2a2 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -66,154 +66,17 @@
</div>
+
</header>
<br>
- <div class="container-1-1">
- {{!-- <div class="product">
- <div class="product-card">
- <h2 class="name">Blue Shirt</h2>
- <span class="price">£29.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://img.fruugo.com/product/2/90/617160902_max.jpg" class="product-img" alt="https://images.app.goo.gl/uHt6sGNihxAXW8h1A">
- </div>
- <div class="popup-view">
- <div class="popup-card">
- <a><i class="fas fa-times close-btn"></i></a>
- <div class="product-img">
- <img src="https://img.fruugo.com/product/2/90/617160902_max.jpg" alt="https://images.app.goo.gl/uHt6sGNihxAXW8h1A">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£29.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Black Shirt</h2>
- <span class="price">£23.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946" class="product-img" alt="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946">
- </div>
- <div class="popup-view">
- <div class="popup-card">
- <a><i class="fas fa-times close-btn"></i></a>
- <div class="product-img">
- <img src="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946" alt="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£23.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">White Shirt</h2>
- <span class="price">£89.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://img.fruugo.com/product/6/45/507046456_max.jpg" class="product-img" alt="https://img.fruugo.com/product/6/45/507046456_max.jpg">
- </div>
- <div class="popup-view">
- <div class="popup-card">
- <a><i class="fas fa-times close-btn"></i></a>
- <div class="product-img">
- <img src="https://img.fruugo.com/product/6/45/507046456_max.jpg" alt="https://img.fruugo.com/product/6/45/507046456_max.jpg">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£89.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Denim jeans</h2>
- <span class="price">£150.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg" class="product-img" alt="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg">
- </div>
- <div class="popup-view">
- <div class="popup-card">
- <a><i class="fas fa-times close-btn"></i></a>
- <div class="product-img">
- <img src="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg" alt="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£150.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Light blue jeans</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486" class="product-img" alt="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486">
- </div>
- <div class="popup-view">
- <div class="popup-card">
- <a><i class="fas fa-times close-btn"></i></a>
- <div class="product-img">
- <img src="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486" alt="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£50.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Cotton jeans</h2>
- <span class="price">£200.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg" class="product-img" alt="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg">
- </div>
- <div class="popup-view">
- <div class="popup-card">
- <a><i class="fas fa-times close-btn"></i></a>
- <div class="product-img">
- <img src="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg" alt="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£200.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div> --}}
- </div>
+ <div id="characterList"></div>
+ <div class="container-1-1" id="container"></div>
{{!-- <script src="/product-cards.js"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
- <script src="/search.js"></script>
+ <script type="module" src="/search.js"></script>
<script src="/shopping-basket.js"></script>
</body>