diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index a305c2677fd862fc97b240421353d7a5524cc1c7..fdddd2b69f1ad65381569f0a1c520e0292247631 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -11,9 +11,7 @@ async function populateProducts(endpoint) {
try{
const response = await fetch(endpoint);
const products = await response.json();
-/* const response1 = await fetch('/women-products');
- const womenProducts = await response1.json();
- const products = menProducts.concat(womenProducts); */
+
container.innerHTML = '';
@@ -73,6 +71,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
const kidsProductsLink = document.getElementById('kids-products');
const menShoesProductsLink = document.getElementById('men-s-products');
const womenShoesProductsLink = document.getElementById('women-s-products');
+ const kidsShoesProductsLink = document.getElementById('kids-s-products');
if (menProductsLink) {
menProductsLink.addEventListener('click', (e) => {
@@ -115,7 +114,15 @@ document.addEventListener('DOMContentLoaded', (event) => {
} else {
console.error("Women Shoes products link not found.");
}
-});
+ if (kidsShoesProductsLink) {
+ kidsShoesProductsLink.addEventListener('click', (e) => {
+ e.preventDefault(); // Prevent the default link behavior
+ populateProducts('/kids-s-products');
+ });
+ } else {
+ console.error("Women Shoes products link not found.");
+ }
+});
@@ -370,4 +377,4 @@ function displayCart() {
onLoadCardsNumbers();
-displayCart();
+displayCart();
\ No newline at end of file
diff --git a/server.js b/server.js
index 17f02ebc7369b88148d985e0b1f2f85afab10e67..ed6cf1e48354c9e3d8cea617608c012361dafd14 100644
--- a/server.js
+++ b/server.js
@@ -2,7 +2,7 @@ const express = require('express');
const path = require('path');
const {Pool} = require('pg');
const app = express();
-const port = 5000;
+const port = 7000;
const pool = new Pool({
host: 'localhost',
@@ -93,6 +93,18 @@ app.get('/women-s-products', async (req, res) => {
}
});
+ app.get('/kids-s-products', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ const { rows } = await client.query("SELECT * FROM products WHERE category = 'K-shoes'");
+ res.json(rows);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Error exucting query', err.stack);
+ }
+});
+
app.listen(port, () => {
console.log(`Server is listening on port ${port}`);
});
diff --git a/views/kids-shoes.hbs b/views/kids-shoes.hbs
index 51082c4cde9f4611599dc7341f8d53c0d6aca98b..6230f7ceb35d9465bc6cf5a1321a3f2c493314d6 100644
--- a/views/kids-shoes.hbs
+++ b/views/kids-shoes.hbs
@@ -37,20 +37,20 @@
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
- <a class="nav-link" href="/men">Men</a>
+ <a class="nav-link" id="men-products" href="/men">Men</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="/women">Women</a>
+ <a class="nav-link" id="women-products" href="/women">Women</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="/kids">Kids</a>
+ <a class="nav-link" id="kids-products" href="/kids">Kids</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a>
<ul class="dropdown-menu" id="submenu">
- <li><a class="dropdown-item" href="/men-shoes">Men Shoes</a></li>
- <li><a class="dropdown-item" href="/women-shoes">Women Shoes</a></li>
- <li><a class="dropdown-item" href="/kids-shoes">Kids Shoes</a></li>
+ <li><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
+ <li><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
+ <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
</ul>
</li>
</ul>
@@ -67,150 +67,10 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container">
- <div class="product">
- <div class="product-card">
- <h2 class="name">Boys Shoes</h2>
- <span class="price">£31.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/boys-shoes.jpg" class="product-img" alt="">
- </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="/images/boys-shoes.jpg" alt="">
- </div>
- <div class="info">
- <h2>Boys Shoes<br><span>Foot 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">£31.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">Boys Shoes</h2>
- <span class="price">£25.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/boys-shoes1.jpg" class="product-img" alt="">
- </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="/images/boys-shoes1.jpg" alt="">
- </div>
- <div class="info">
- <h2>Boys Shoes<br><span>Foot 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">£25.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">Boys Shoes</h2>
- <span class="price">£40.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/boys-shoes2.jpg" class="product-img" alt="">
- </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="/images/boys-shoes2.jpg" alt="">
- </div>
- <div class="info">
- <h2>Boys Shoes<br><span>Foot 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">£40.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">Girls Shoes</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/girls-shoes.jpg" class="product-img" alt="">
- </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="/images/girls-shoes.jpg" alt="">
- </div>
- <div class="info">
- <h2>Girls Shoes<br><span>Foot 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">Girls Shoes</h2>
- <span class="price">£55.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/girls-shoes1.jpg" class="product-img" alt="">
- </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="/images/girls-shoes1.jpg" alt="">
- </div>
- <div class="info">
- <h2>Girls Shoes<br><span>Foot 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">£55.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">Girls Shoes</h2>
- <span class="price">£28.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/girls-shoes2.jpg" class="product-img" alt="">
- </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="/images/girls-shoes2.jpg" alt="">
- </div>
- <div class="info">
- <h2>Girls Shoes<br><span>Foot 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">£28.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 class="container" 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="/product-cards.js"></script> --}}
<script src="/shopping-basket.js"></script>
<script src="/search.js"></script>
</body>
diff --git a/views/kids.hbs b/views/kids.hbs
index 8a9b3b86e3f282e18817bedcf7188d802a1ad259..be1703852179f30ebaf38395cbe33647053074f5 100644
--- a/views/kids.hbs
+++ b/views/kids.hbs
@@ -48,9 +48,9 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a>
<ul class="dropdown-menu" id="submenu">
- <li><a class="dropdown-item" href="/men-shoes">Men Shoes</a></li>
- <li><a class="dropdown-item" href="/women-shoes">Women Shoes</a></li>
- <li><a class="dropdown-item" href="/kids-shoes">Kids Shoes</a></li>
+ <li><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
+ <li><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
+ <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
</ul>
</li>
</ul>
diff --git a/views/men-shoes.hbs b/views/men-shoes.hbs
index 42f02534b7e71b648882c578bf6feffa8136e217..6deb12a23f87cfb43329fb13649b12990b2ffb98 100644
--- a/views/men-shoes.hbs
+++ b/views/men-shoes.hbs
@@ -66,7 +66,7 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container"></div>
+ <div class="container" id="container"></div>
<script src="/product-cards.js"></script>
diff --git a/views/men.hbs b/views/men.hbs
index 0a3384f947c9bb0fcf34963c134018a6a4d68149..322028d819d6ed3769cb48eec749d88e9f0da794 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -49,9 +49,9 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a>
<ul class="dropdown-menu" id="submenu">
- <li><a class="dropdown-item" href="/men-shoes">Men Shoes</a></li>
- <li><a class="dropdown-item" href="/women-shoes">Women Shoes</a></li>
- <li><a class="dropdown-item" href="/kids-shoes">Kids Shoes</a></li>
+ <li><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
+ <li><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
+ <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
</ul>
</li>
</ul>
@@ -71,15 +71,17 @@
</header>
<br>
+
<div id="characterList" class="characterLists"></div>
- <div class="container" 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="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" type="module"></script>
<script src="/shopping-basket.js"></script>
+ <div class="container" id="container"></div>
</body>
</html>
\ No newline at end of file
diff --git a/views/women-shoes.hbs b/views/women-shoes.hbs
index cc5538218058daa4a9ed6fa94b20d1c89246d05e..5de542800a8b85c14e60b26a45644f87033e7f71 100644
--- a/views/women-shoes.hbs
+++ b/views/women-shoes.hbs
@@ -65,10 +65,10 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container"></div>
+ <div class="container" id="container"></div>
- <script src="/product-cards.js"></script>
+ {{!-- <script src="/product-cards.js"></script> --}}
<script src="/shopping-basket.js"></script>
<script src="/search.js"></script>
</body>
diff --git a/views/women.hbs b/views/women.hbs
index 6e99fd94b326e27888d570b2be1e8b7c8e8f6e98..134bff4dbe86a86c1ccc3b04df2a7450e5bafa03 100644
--- a/views/women.hbs
+++ b/views/women.hbs
@@ -47,9 +47,9 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a>
<ul class="dropdown-menu" id="submenu">
- <li><a class="dropdown-item" href="/men-shoes">Men Shoes</a></li>
- <li><a class="dropdown-item" href="/women-shoes">Women Shoes</a></li>
- <li><a class="dropdown-item" href="/kids-shoes">Kids Shoes</a></li>
+ <li><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
+ <li><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
+ <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
</ul>
</li>
</ul>
@@ -65,8 +65,9 @@
</div>
</header>
- <div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div>
+ <div id="characterList" class="characterLists"></div>
+
<script src="/product-cards.js"></script>