Skip to content
Snippets Groups Projects
Commit 62efb018 authored by Tim Adams's avatar Tim Adams
Browse files

all pages are fetching products from the DB

parent 9b8ed1bd
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
public/shopping-basket.js
+ 12
− 5
View file @ 62efb018
......@@ -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,6 +114,14 @@ 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.");
}
});
......
server.js
+ 13
− 1
View file @ 62efb018
......@@ -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}`);
});
......
views/kids-shoes.hbs
+ 8
− 148
View file @ 62efb018
......@@ -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>
......
views/kids.hbs
+ 3
− 3
View file @ 62efb018
......@@ -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>
......
views/men-shoes.hbs
+ 1
− 1
View file @ 62efb018
......@@ -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>
......
views/men.hbs
+ 7
− 5
View file @ 62efb018
......@@ -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
views/women-shoes.hbs
+ 2
− 2
View file @ 62efb018
......@@ -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>
......
views/women.hbs
+ 5
− 4
View file @ 62efb018
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

GitLab by CIM Team | RHUL