diff --git a/public/shopping-basket.js b/public/shopping-basket.js index 7d55ca5f7b14acba927a3964335d1e97a534b334..71b39646e7d69ae8b3d99782471b3a01a102128d 100644 --- a/public/shopping-basket.js +++ b/public/shopping-basket.js @@ -70,6 +70,7 @@ async function populateProducts(endpoint) { document.addEventListener('DOMContentLoaded', (event) => { const menProductsLink = document.getElementById('men-products'); const womenProductsLink = document.getElementById('women-products'); + const kidsProductsLink = document.getElementById('kids-products'); if (menProductsLink) { menProductsLink.addEventListener('click', (e) => { @@ -88,6 +89,14 @@ document.addEventListener('DOMContentLoaded', (event) => { } else { console.error("Women's products link not found."); } + if (kidsProductsLink) { + kidsProductsLink.addEventListener('click', (e) => { + e.preventDefault(); // Prevent the default link behavior + populateProducts('/kids-products'); + }); + } else { + console.error("Kids' products link not found."); + } }); diff --git a/server.js b/server.js index a40f42f79570ed096da17d8d37e17118eccda7cd..d0a8490f0daddda4c7141a674b624248ea7cb5c8 100644 --- a/server.js +++ b/server.js @@ -57,6 +57,18 @@ app.get('/women-products', async (req, res) => { } }); +app.get('/kids-products', async (req, res) => { + try{ + const client = await pool.connect(); + const { rows } = await client.query("SELECT * FROM products WHERE category = 'kids'"); + 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.hbs b/views/kids.hbs index 7b2051ad5ca93d6c522b5c5500b32a3717471a0a..8a9b3b86e3f282e18817bedcf7188d802a1ad259 100644 --- a/views/kids.hbs +++ b/views/kids.hbs @@ -37,13 +37,13 @@ <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> diff --git a/views/men.hbs b/views/men.hbs index 683610e64cf140f68fdb3389ca977da1c6633beb..0a3384f947c9bb0fcf34963c134018a6a4d68149 100644 --- a/views/men.hbs +++ b/views/men.hbs @@ -44,7 +44,7 @@ <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> diff --git a/views/women.hbs b/views/women.hbs index 3b0e6c42a6b4bf02809ce9067440b5acd6934e84..6e99fd94b326e27888d570b2be1e8b7c8e8f6e98 100644 --- a/views/women.hbs +++ b/views/women.hbs @@ -36,13 +36,13 @@ <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>