From eef36780e17bea40708e596be1e42d3870792234 Mon Sep 17 00:00:00 2001
From: Tim Adams <zfac125@live.rhul.ac.uk>
Date: Fri, 15 Mar 2024 22:28:14 +0000
Subject: [PATCH] diary has been edited and cleaning up the code
---
controllers/productsCtrlFile.js | 18 --
diary.md | 4 +
products.js | 406 --------------------------------
public/shopping-basket.js | 4 +-
routes/productsRouteFile.js | 8 -
views/activate.hbs | 78 ++++++
views/authenticate.hbs | 60 +++++
views/cart.hbs | 4 +-
views/common/navbar.hbs | 62 +++++
views/index.hbs | 47 +---
views/kids-shoes.hbs | 64 ++---
views/kids.hbs | 204 ++--------------
views/men-shoes.hbs | 68 ++----
views/men.hbs | 127 +++-------
views/women-shoes.hbs | 64 ++---
views/women.hbs | 65 ++---
16 files changed, 331 insertions(+), 952 deletions(-)
delete mode 100644 controllers/productsCtrlFile.js
delete mode 100644 products.js
delete mode 100644 routes/productsRouteFile.js
create mode 100644 views/activate.hbs
create mode 100644 views/authenticate.hbs
create mode 100644 views/common/navbar.hbs
diff --git a/controllers/productsCtrlFile.js b/controllers/productsCtrlFile.js
deleted file mode 100644
index 39b2f9a..0000000
--- a/controllers/productsCtrlFile.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const { productList } = require('../products');
-
-
-// productsCtrlFile.js
-const productsCtrlFunction = (req, res) => {
- try{
- res.status(200).json({
- products: productList
- });
- }catch(error){
- console.log(error);
- }
- // res.send('This is the products page');
-};
-
-module.exports = {
- productsCtrlFunction: productsCtrlFunction
-};
diff --git a/diary.md b/diary.md
index ad51051..446030a 100644
--- a/diary.md
+++ b/diary.md
@@ -75,6 +75,10 @@ Today 20/01/24 completed the payment functionality but still face a minor issue
18/02/2024 solved most of the search function issues and only one step left to complete this feature which is flatten the products array and the matching the input string with the relevant item.
24/02/2024 solved displaying items on the cart page issue but still another issue with displaying items on the other pages to be sorted and the solution might be by moving all item to the databse so it can be queried accordingly.
02/03/2024 most of the pages are now fetching products from the database, but still have to refactor the function that adding and displaying products to the basket page so that it will functional again.
+04/03/2024 work stopped due to health issue, seeking medical help so the work could continue ASAP.
+10/03/2024 Start working on the project again, sorting the fetching issue by refactoring the Shopping basket file and deleting the files that is not wanted anymore such as products file.
+12/03/2024 created login/register system as well as creating STMP for the notification emails.
+
## Support
For any question please contact me on zfac125@live.rhul.ac.uk
diff --git a/products.js b/products.js
deleted file mode 100644
index 6f17703..0000000
--- a/products.js
+++ /dev/null
@@ -1,406 +0,0 @@
-/* async function populateProducts(endpoint) {
- const container = document.querySelector('.container');
-
-
-
- try {
- const response = await fetch(endpoint);
- const products = await response.json();
-
-
- container.innerHTML = '';
-
-
- products.forEach(product => {
- const productsHtml = document.createElement('div');
- productsHtml.innerHTML = `
- <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="Image of ${product.name}">
- </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}" class="product-img" alt="Image of ${product.name}">
- </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>
- `;
- container.appendChild(productsHtml);
-
- if (products.image) {
- const img = new Image();
- img.src = product.image;
- productsHtml.querySelector('.product-img').appendChild(img);
- }
-
-
- if(container){
- container.appendChild(productsHtml);
- }else{
- console.error('Container element not found');
- }
- });
- } catch (error) {
- console.error('Failed to populate products:', error);
- }
- //console.log(container);
- addCartActions(container);
-}
-
-async function getProducts(endpoint = 'http://localhost:7000/products') {
- try {
- const response = await fetch(endpoint);
-
- if (!response.ok) {
- throw new Error(`HTTP error! Status: ${response.status}`);
- }
- const products = await response.json();
-
- // const data = await response.json();
- //products = data.products;
-
- populateProducts(products);
- // console.log(data.products);
- // console.log('Products:', products);
- } catch (error) {
- console.error('error fetching products:', error);
- }
-
-
-}
-
-
- const ProductsLink = getProducts('products');
- // getProducts();
-
- if (ProductsLink) {
- ProductsLink.addEventListener('click', (e) => {
- e.preventDefault(); // Prevent the default link behavior
- populateProducts('/products');
- });
- } else {
- console.error("products link not found.");
- } */
-
-/* exports.productList =
-[
-
- {
- name: 'Blue Shirt',
- description: '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.',
- tag: 'BlueShirt',
- price: 29.99,
- inCart: 0,
- Image: '/images/BlueShirt.jpg'
- },
- {
- name: 'Black Shirt',
- description: '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.',
- tag: 'BlackShirt',
- price: 23.99,
- inCart: 0,
- Image: '/images/BlackShirt.jpg',
-
- },
- {
- name: 'White Shirt',
- description: '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.',
- tag: 'WhiteShirt',
- price: 89.99,
- inCart: 0,
- Image: '/images/WhiteShirt.jpg'
- },
- {
- name: 'Denim jeans',
- description: '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.',
- tag: 'DenimJeans',
- price: 150.00,
- inCart: 0,
- Image: '/images/DenimJeans.jpg'
- },
- {
- name: 'Light blue jeans',
- description: '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.',
- tag: 'LightBlue',
- price: 50.00,
- inCart: 0,
- Image: '/images/LightBlue.jpg'
- },
- {
- name: 'Cotton jeans',
- description: '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.',
- tag: 'Cottonjeans',
- price: 200.00,
- inCart: 0,
- Image: '/images/Cottonjeans.jpg'
- },
-
-
- {
- name: 'Blue blouse',
- description: 'This is a Blue blouse',
- tag: 'Blueblouse',
- price: 59.99,
- inCart: 0,
- Image: '/images/BlueBlouse.jpg'
- },
- {
- name: 'Off White blouse',
- description: 'This is an Off White blouse',
- tag: 'OffWhiteblouse',
- price: 73.99,
- inCart: 0,
- Image: '/images/OffWhiteblouse.jpg'
- },
- {
- name: 'White blouse',
- description: 'This is a White blouse',
- tag: 'Whiteblouse',
- price: 89.99,
- inCart: 0,
- Image: '/images/white-blouse.jpg'
- },
- {
- name: 'Brown trouser',
- description: 'This is a Brown trouser',
- tag: 'Browntrouser',
- price: 140.00,
- inCart: 0,
- Image: '/images/brown-trouser.jpg'
- },
- {
- name: 'Cream trouser',
- description: 'This is a Cream trouser',
- tag: 'Creamtrouser',
- price: 59.00,
- inCart: 0,
- Image: '/images/creamTrouser.jpg'
- },
- {
- name: 'Grey trouser',
- description: 'This is a Grey trouser',
- tag: 'Greytrouser',
- price: 201.00,
- inCart: 0,
- Image: '/images/greyTrouser.jpg'
- },
-
-
- {
- name: 'Girls dress',
- description: '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.',
- tag: 'GirlsDress',
- price: 64.00,
- inCart: 0,
- Image: '/images/girls-dress.jpg'
- },
- {
- name: 'Girls dress',
- description: '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.',
- tag: 'GirlsDress',
- price: 57.00,
- inCart: 0,
- Image: '/images/girls-dress1.webp',
-
- },
- {
- name: 'Girls dress',
- description: '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.',
- tag: 'GirlsDress',
- price: 89.99,
- inCart: 0,
- Image: '/images/girls-dress2.webp'
- },
- {
- name: 'Boys jumper',
- description: '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.',
- tag: 'BoysJumper',
- price: 80.00,
- inCart: 0,
- Image: '/images/boys-jumper.avif'
- },
- {
- name: 'Boys jumper',
- description: '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.',
- tag: 'BoysJumper',
- price: 50.00,
- inCart: 0,
- Image: '/images/boys-jumper1.webp'
- },
- {
- name: 'Boys jumper',
- description: '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.',
- tag: 'BoysJumper',
- price: 70.00,
- inCart: 0,
- Image: '/images/boys-jumper2.webp'
- },
-
- // from this position down to be fixed at a later date or until a better solution is found
- {
- name: 'Blue Shirt',
- description: '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.',
- tag: 'BlueShirt',
- price: 29.99,
- inCart: 0,
- Image: '' //'https://img.fruugo.com/product/2/90/617160902_max.jpg'
- },
- {
- name: 'Black Shirt',
- description: '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.',
- tag: 'BlackShirt',
- price: 23.99,
- inCart: 0,
- Image: '' //'https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946',
-
- },
- {
- name: 'White Shirt',
- description: '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.',
- tag: 'WhiteShirt',
- price: 89.99,
- inCart: 0,
- Image: '' //'https://img.fruugo.com/product/6/45/507046456_max.jpg'
- },
- {
- name: 'Denim jeans',
- description: '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.',
- tag: 'DenimJeans',
- price: 150.00,
- inCart: 0,
- Image: '' //'https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg'
- },
- {
- name: 'Light blue jeans',
- description: '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.',
- tag: 'LightBlue',
- price: 50.00,
- inCart: 0,
- Image: '' //'https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486'
- },
- {
- name: 'Cotton jeans',
- description: '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.',
- tag: 'Cottonjeans',
- price: 200.00,
- inCart: 0,
- Image: '' //'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
- },
-
-
- {
- name: 'Blue Shirt',
- description: '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.',
- tag: 'BlueShirt',
- price: 29.99,
- inCart: 0,
- Image: '' //'https://img.fruugo.com/product/2/90/617160902_max.jpg'
- },
- {
- name: 'Black Shirt',
- description: '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.',
- tag: 'BlackShirt',
- price: 23.99,
- inCart: 0,
- Image: '' //'https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946',
-
- },
- {
- name: 'White Shirt',
- description: '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.',
- tag: 'WhiteShirt',
- price: 89.99,
- inCart: 0,
- Image: '' // 'https://img.fruugo.com/product/6/45/507046456_max.jpg'
- },
- {
- name: 'Denim jeans',
- description: '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.',
- tag: 'DenimJeans',
- price: 150.00,
- inCart: 0,
- Image: '' //'https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg'
- },
- {
- name: 'Light blue jeans',
- description: '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.',
- tag: 'LightBlue',
- price: 50.00,
- inCart: 0,
- Image: '' //'https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486'
- },
- {
- name: 'Cotton jeans',
- description: '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.',
- tag: 'Cottonjeans',
- price: 200.00,
- inCart: 0,
- Image:'' //'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
- },
-
-
- {
- name: 'Blue Shirt',
- description: '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.',
- tag: 'BlueShirt',
- price: 29.99,
- inCart: 0,
- Image:'' //'https://img.fruugo.com/product/2/90/617160902_max.jpg'
- },
- {
- name: 'Black Shirt',
- description: '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.',
- tag: 'BlackShirt',
- price: 23.99,
- inCart: 0,
- Image:'' //'https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946',
-
- },
- {
- name: 'White Shirt',
- description: '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.',
- tag: 'WhiteShirt',
- price: 89.99,
- inCart: 0,
- Image:'' //'https://img.fruugo.com/product/6/45/507046456_max.jpg'
- },
- {
- name: 'Denim jeans',
- description: '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.',
- tag: 'DenimJeans',
- price: 150.00,
- inCart: 0,
- Image:'' // 'https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg'
- },
- {
- name: 'Light blue jeans',
- description: '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.',
- tag: 'LightBlue',
- price: 50.00,
- inCart: 0,
- Image:'' //'https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486'
- },
- {
- name: 'Cotton jeans',
- description: '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.',
- tag: 'Cottonjeans',
- price: 200.00,
- inCart: 0,
- Image:'' //'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
- }
-
-]; */
-
diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index b106a83..a40cd96 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -57,8 +57,8 @@ async function getProducts() {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
- const copied = Array(20).fill(data[0])
- populateProducts(copied);
+ //const copied = Array(20).fill(data[0])
+ populateProducts(data);
} catch (error) {
console.error('error fetching products:', error);
}
diff --git a/routes/productsRouteFile.js b/routes/productsRouteFile.js
deleted file mode 100644
index 397b372..0000000
--- a/routes/productsRouteFile.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const express = require('express');
-const { productsCtrlFunction } = require('../controllers/productsCtrlFile');
-
-const router = express.Router();
-
-router.get('/', productsCtrlFunction);
-
-module.exports = router;
\ No newline at end of file
diff --git a/views/activate.hbs b/views/activate.hbs
new file mode 100644
index 0000000..56fc63f
--- /dev/null
+++ b/views/activate.hbs
@@ -0,0 +1,78 @@
+<DOCTYPE! html>
+ <html>
+
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <link rel="stylesheet" href="/style.css">
+
+ <style>
+ .c {
+ display:flex;
+ display:flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ }
+
+ .title {
+ font-size:24px;
+ margin-bottom:16px;
+ }
+ </style>
+ </head>
+
+ <body>
+ <div class="c">
+ <div class="title">
+ <p>
+ Input your email and the code you received to activate your account
+ </p>
+ </div>
+ <div>
+ <div class="input-group mb-3">
+ <input type="email" class="form-control" placeholder="example@example.com" id="email" aria-label="Email" aria-describedby="basic-addon1">
+ </div>
+ </div>
+ <div>
+ <div class="input-group mb-3">
+ <input type="text" id="code" class="form-control" placeholder="code" aria-label="code" aria-describedby="basic-addon1">
+ </div>
+ </div>
+
+ <button onclick="sendCode()" type="button" class="btn btn-secondary">Send code</button>
+
+ </div>
+ </body>
+ <script>
+ async function sendCode(){
+ const options = {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ code: document.getElementById('code').value,
+ email: document.getElementById('email').value
+ })
+ };
+
+ const url = `http://localhost:7000/activate-account`
+
+ const response = await fetch(url, options);
+ if (!response.ok) {
+ alert('Could not activate account')
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+
+ alert('Account activated, you can log in now')
+ window.location.href = "/";
+ }
+ </script>
+ </html>
\ No newline at end of file
diff --git a/views/authenticate.hbs b/views/authenticate.hbs
new file mode 100644
index 0000000..eb794d3
--- /dev/null
+++ b/views/authenticate.hbs
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+ <html>
+
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+ <title>Your Fashion</title>
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <link rel="stylesheet" href="/style.css">
+
+
+
+ <!--<script type="text/javascript" src="js/LocalLogin.js"></script>-->
+
+ </head>
+
+ <body class="responsive">
+
+
+ <header>
+ {{> common/navbar}}
+ </header>
+
+ <div class="authenticate-form">
+
+ <div class="input-group mb-3">
+ <span class="input-group-text" id="email">Email</span>
+ <input type="email" class="form-control" placeholder="example@example.com" aria-label="email" aria-describedby="basic-addon1">
+ </div>
+ <div class="input-group mb-3">
+ <span class="input-group-text" id="password">Password</span>
+ <input type="password" class="form-control" aria-label="password" aria-describedby="basic-addon1">
+ </div>
+ <div class="input-group mb-3" id="c-pass-container">
+ <span class="input-group-text" id="cpassword">Confirm Password</span>
+ <input type="password" class="form-control" aria-label="confirm-password" aria-describedby="basic-addon1">
+ </div>
+ <div class="input-group mb-3" id="c-username-container">
+ <span class="input-group-text" id="username">Username</span>
+ <input type="text" class="form-control" aria-label="username" placeholder="optional" aria-describedby="basic-addon1">
+ </div>
+ <div>
+ <button onclick="handleClick()" type="button" id="btn" class="btn btn-secondary"></button>
+ </div>
+
+
+
+
+
+
+{{!-- 2. login with username password confirm password email , with notification to confirm account --}}
+
+
+ </body>
+ <script src="/authenticate.js"></script>
+ </html>
\ No newline at end of file
diff --git a/views/cart.hbs b/views/cart.hbs
index d0fddd7..a3d68fb 100644
--- a/views/cart.hbs
+++ b/views/cart.hbs
@@ -33,7 +33,7 @@
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
- <a href="index.hbs" class="actives"><i class="fa fa-home"></i></a>
+ <a href="/" class="actives"><i class="fa fa-home"></i></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
@@ -44,7 +44,7 @@
<li class="nav-item">
- <a class="nav-link" id="men-products" href="men.hbs">Men</a>
+ <a class="nav-link" id="men-products" href="/men">Men</a>
</li>
<li class="nav-item">
<a class="nav-link" id="women-products" href="/women">Women</a>
diff --git a/views/common/navbar.hbs b/views/common/navbar.hbs
new file mode 100644
index 0000000..7b2a8e5
--- /dev/null
+++ b/views/common/navbar.hbs
@@ -0,0 +1,62 @@
+ <div>
+ <div class="your-fashion-text-box">
+ <a href="/" class="shopname">Your Fashion</a>
+ </div>
+
+
+ <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
+ <div class="container-fluid">
+ <a href="/" class="actives"><i class="fa fa-home"></i></a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="collapsibleNavbar">
+
+ <ul class="navbar-nav">
+
+
+ <li class="nav-item" onclick="handleAnchorClick('/men')">
+ <a class="nav-link" id="men-products" href="/men">Men</a>
+ </li>
+ <li class="nav-item" onclick="handleAnchorClick('/women')">
+ <a class="nav-link" id="women-products" href="/women">Women</a>
+ </li>
+ <li class="nav-item" onclick="handleAnchorClick('/kids')">
+ <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 onclick="handleAnchorClick('/men-shoes')"><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
+ <li onclick="handleAnchorClick('/women-shoes')"><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
+ <li onclick="handleAnchorClick('/kids-shoes')"><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <a class="login-button" href="/authenticate?mode=register">Register</a>
+ <a class="login-button" href="/authenticate?mode=login">Login</a>
+ <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
+ </div>
+ </nav>
+ <div class="search-bar">
+ <input class="search" type="text" id="search-input" placeholder="🔍 Start typing to search" list="container" autocomplete="off"/>
+ </div>
+ <script>
+ function handleAnchorClick(category){
+ window.location.href = category;
+ }
+
+ const user = JSON.parse(localStorage.getItem('user'))
+
+ if(user) {
+ document.querySelectorAll(".login-button").forEach(el => {
+ el.style.display = "none"
+ })
+ }
+ </script>
+
+ <script src="/init-shoppingcart.js"></script>
+
+ </div>
\ No newline at end of file
diff --git a/views/index.hbs b/views/index.hbs
index 92a4537..a67b52a 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -22,52 +22,7 @@
<header>
-
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="/" class="actives"><i class="fa fa-home"></i></a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
- <span class="navbar-toggler-icon"></span>
- </button>
-
- <div class="collapse navbar-collapse" id="collapsibleNavbar">
-
- <ul class="navbar-nav">
-
-
- <li class="nav-item">
- <a class="nav-link" id="men-products" href="/men">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="women-products" href="/women">Women</a>
- </li>
- <li class="nav-item">
- <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" 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>
- </div>
- <a class="login-button" href="#">login</a>
- <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
- </div>
- </nav>
- <div class="your-fashion-text-box">
- <a href="/" class="shopname">Your Fashion</a>
- </div>
- <div class="search-bar">
- <input class="search" type="text" id="search-input" placeholder="🔍 Start typing to search"
- list="container" autocomplete="off" />
- </div>
-
+ {{> common/navbar}}
</header>
<div id="characterList" class="characterLists"></div>
<main class="cont">
diff --git a/views/kids-shoes.hbs b/views/kids-shoes.hbs
index cc59128..24b8024 100644
--- a/views/kids-shoes.hbs
+++ b/views/kids-shoes.hbs
@@ -9,10 +9,11 @@
<title>Your Fashion</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet">
+
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
@@ -21,58 +22,25 @@
<body class="responsive">
-
+
<header>
- <div class="your-fashion-text-box">
- <a href="/" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="/" class="actives"><i class="fa fa-home"></i></a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="collapsibleNavbar">
- <ul class="navbar-nav">
- <li class="nav-item">
- <a class="nav-link" id="men-products" href="/men">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="women-products" href="/women">Women</a>
- </li>
- <li class="nav-item">
- <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" 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>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
- </div>
- </nav>
- <div class="search-bar">
- <input class="search" type="text" id="search-input" placeholder="🔍 Start typing to search" list="container" autocomplete="off"/>
-
- </div>
-
+ {{> common/navbar}}
</header>
- <div id="characterList" class="characterLists"></div>
- <div class="container" id="container"></div>
+ <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="/search.js" type="module"></script>
<script src="/shopping-basket.js"></script>
- <script src="/search.js"></script>
+
</body>
+<footer>
+ <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎
+ 07469241247</a></p>
+</footer>
- </html>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/views/kids.hbs b/views/kids.hbs
index c831960..24b8024 100644
--- a/views/kids.hbs
+++ b/views/kids.hbs
@@ -9,10 +9,11 @@
<title>Your Fashion</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet">
+
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
@@ -21,198 +22,25 @@
<body class="responsive">
-
+
<header>
- <div class="your-fashion-text-box">
- <a href="/" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="/" class="actives"><i class="fa fa-home"></i></a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="collapsibleNavbar">
- <ul class="navbar-nav">
- <li class="nav-item">
- <a class="nav-link" id="men-products" href="/men">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="women-products" href="/women">Women</a>
- </li>
- <li class="nav-item">
- <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" 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>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
- </div>
- </nav>
- <div class="search-bar">
- <input class="search" type="text" id="search-input" placeholder="🔍 Start typing to search" list="container" autocomplete="off"/>
-
- </div>
-
+ {{> common/navbar}}
</header>
- <div id="characterList" class="characterLists"></div>
- <div class="container">
-{{!-- <div class="product">
- <div class="product-card">
- <h2 class="name">Girls dress</h2>
- <span class="price">£ 64.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/girls-dress.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-dress.jpg" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' 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">£ 64.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 dress</h2>
- <span class="price">£ 57.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/girls-dress1.webp" 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-dress1.webp" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' 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">Girls dress</h2>
- <span class="price">£89.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/girls-dress2.webp" 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="img/" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' 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">Boys jumper</h2>
- <span class="price">£80.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/boys-jumper.avif" 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-jumper.avif" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' 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">£80.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 jumper</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/boys-jumper1.webp" 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-jumper1.webp" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' 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">Boys jumper</h2>
- <span class="price">£70.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/boys-jumper2.webp" 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-jumper2.webp" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' 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">£70.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>
+ <br>
+ <div id="characterList" class="characterLists"></div>
+ <div class="container" id="container"></div>
- <script src="/product-cards.js"></script>
+
+ {{!-- <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" type="module"></script>
<script src="/shopping-basket.js"></script>
- <script src="/search.js"></script>
+
</body>
+<footer>
+ <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎
+ 07469241247</a></p>
+</footer>
- </html>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/views/men-shoes.hbs b/views/men-shoes.hbs
index 5b8eb32..24b8024 100644
--- a/views/men-shoes.hbs
+++ b/views/men-shoes.hbs
@@ -9,70 +9,38 @@
<title>Your Fashion</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet">
+
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+
</head>
<body class="responsive">
-
+
<header>
- <div class="your-fashion-text-box">
- <a href="/" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="/" class="actives"><i class="fa fa-home"></i></a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="collapsibleNavbar">
- <ul class="navbar-nav">
- <li class="nav-item">
- <a class="nav-link" id="men-products" href="/men">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="women-products" href="/women">Women</a>
- </li>
- <li class="nav-item">
- <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" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
- <li><a class="dropdown-item" id="women-s-producrs" 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>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
- </div>
- </nav>
- <div class="search-bar">
- <input class="search" type="text" id="search-input" placeholder="🔍 Start typing to search" list="container" autocomplete="off"/>
-
- </div>
-
+ {{> common/navbar}}
</header>
- <div id="characterList" class="characterLists"></div>
- <div class="container" id="container"></div>
+ <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="/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" type="module"></script>
<script src="/shopping-basket.js"></script>
- <script src="/search.js"></script>
+
</body>
+<footer>
+ <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎
+ 07469241247</a></p>
+</footer>
- </html>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/views/men.hbs b/views/men.hbs
index b080519..24b8024 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -1,92 +1,43 @@
<!DOCTYPE html>
-<html>
-
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
- <title>Your Fashion</title>
- <link rel="stylesheet" type="text/css" href="/style.css">
- <link rel="preconnect" href="https://fonts.gstatic.com">
-
- <link rel="stylesheet" type="text/css" href="/style.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-
-
-
-
-
-</head>
-
-<body class="responsive">
-
-
- <header>
- <div class="your-fashion-text-box">
- <a href="/" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="/" class="actives"><i class="fa fa-home"></i></a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="collapsibleNavbar">
- <ul class="navbar-nav">
- <li class="nav-item">
- <a class="nav-link" id="men-products" href="/men">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="women-products" href="/women">Women</a>
- </li>
- <li class="nav-item">
- <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" 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>
-
- </div>
- <a class="login-button" href="#">login</a>
- <div class="add-cart">
- <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
- </div>
- </div>
- </nav>
- <div class="search-bar">
- <input class="search" type="search" id="search-input" placeholder="🔍 Start typing to search"
- list="container" autocomplete="off" />
-
- </div>
-
-
- </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="/search.js" type="module"></script>
- <script src="/shopping-basket.js"></script>
-
-</body>
+ <html>
+
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+ <title>Your Fashion</title>
+ <link rel="stylesheet" type="text/css" href="/style.css">
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+
+ <link rel="stylesheet" type="text/css" href="/style.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+
+
+
+
+ </head>
+
+ <body class="responsive">
+
+
+ <header>
+ {{> common/navbar}}
+ </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="/search.js" type="module"></script>
+ <script src="/shopping-basket.js"></script>
+
+ </body>
<footer>
<p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎
07469241247</a></p>
diff --git a/views/women-shoes.hbs b/views/women-shoes.hbs
index 7db54d6..24b8024 100644
--- a/views/women-shoes.hbs
+++ b/views/women-shoes.hbs
@@ -9,68 +9,38 @@
<title>Your Fashion</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet">
+
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+
</head>
<body class="responsive">
+
<header>
- <div class="your-fashion-text-box">
- <a href="/" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="/" class="actives"><i class="fa fa-home"></i></a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="collapsibleNavbar">
- <ul class="navbar-nav">
- <li class="nav-item">
- <a class="nav-link" id="men-products" href="/men">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="women-products" href="/women">Women</a>
- </li>
- <li class="nav-item">
- <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" 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>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
- </div>
- </nav>
- <div class="search-bar">
- <input class="search" type="text" id="search-input" placeholder="🔍 Start typing to search" list="container" autocomplete="off"/>
-
- </div>
-
+ {{> common/navbar}}
</header>
- <div id="characterList" class="characterLists"></div>
- <div class="container" id="container"></div>
+ <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="/search.js" type="module"></script>
<script src="/shopping-basket.js"></script>
- <script src="/search.js"></script>
+
</body>
+<footer>
+ <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎
+ 07469241247</a></p>
+</footer>
- </html>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/views/women.hbs b/views/women.hbs
index 59324d3..24b8024 100644
--- a/views/women.hbs
+++ b/views/women.hbs
@@ -9,10 +9,11 @@
<title>Your Fashion</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet">
+
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
@@ -21,59 +22,25 @@
<body class="responsive">
+
<header>
- <div class="your-fashion-text-box">
- <a href="/" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="/" class="actives"><i class="fa fa-home"></i></a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="collapsibleNavbar">
- <ul class="navbar-nav">
- <li class="nav-item">
- <a class="nav-link" id="men-products" href="/men">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="women-products" href="/women">Women</a>
- </li>
- <li class="nav-item">
- <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" 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>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
- </div>
- </nav>
- <div class="search-bar">
- <input class="search" type="text" id="search-input" placeholder="🔍 Start typing to search" list="container" autocomplete="off"/>
-
- </div>
-
+ {{> common/navbar}}
</header>
- <div class="container" id="container"></div>
- <div id="characterList" class="characterLists"></div>
-
+ <br>
+ <div id="characterList" class="characterLists"></div>
+ <div class="container" id="container"></div>
- <script src="/product-cards.js"></script>
+
+ {{!-- <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" type="module"></script>
<script src="/shopping-basket.js"></script>
- <script src="/search.js"></script>
+
</body>
+<footer>
+ <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎
+ 07469241247</a></p>
+</footer>
- </html>
\ No newline at end of file
+</html>
\ No newline at end of file
--
GitLab