From 27e1eaffe73ae2e02d6d137a759cfb7b6e7674be Mon Sep 17 00:00:00 2001
From: Tim Adams <zfac125@live.rhul.ac.uk>
Date: Thu, 28 Mar 2024 22:22:25 +0000
Subject: [PATCH] code is done just some alteration needed
---
controllers/pagesCtrlFile.js | 2 +
public/authenticate.js | 8 +-
public/cart.js | 11 +-
public/checkout.js | 1 -
public/init-shoppingcart.js | 33 +---
public/main-search.js | 304 +++++++++++++++++------------------
public/payment.js | 79 ++++++++-
public/search.js | 20 +++
public/shopping-basket.js | 42 ++---
public/slides.js | 20 ++-
public/style.css | 119 +++++++-------
server.js | 95 ++++++++---
views/activate.hbs | 2 +-
views/cart.hbs | 10 +-
views/checkout.hbs | 142 ++++++++--------
views/common/navbar.hbs | 125 +++++++-------
views/index.hbs | 125 ++++++--------
views/kids-shoes.hbs | 19 +--
views/kids.hbs | 22 +--
views/men-shoes.hbs | 72 ++++-----
views/men.hbs | 85 +++++-----
views/women-shoes.hbs | 16 +-
views/women.hbs | 17 +-
23 files changed, 738 insertions(+), 631 deletions(-)
diff --git a/controllers/pagesCtrlFile.js b/controllers/pagesCtrlFile.js
index 7ea8cb8..a5a8b6e 100644
--- a/controllers/pagesCtrlFile.js
+++ b/controllers/pagesCtrlFile.js
@@ -42,3 +42,5 @@ exports.activateAccountCtrlFunction = (req, res) => {
exports.checkouttCtrlFunction = (req, res) => {
res.render('checkout');
}
+
+
diff --git a/public/authenticate.js b/public/authenticate.js
index 00a3cb7..418d600 100644
--- a/public/authenticate.js
+++ b/public/authenticate.js
@@ -83,10 +83,14 @@ async function handleClick(){
throw new Error(`HTTP error! Status: ${response.status}`);
}
- const user = await response.json()
- console.log(user)
+ const {user, products} = await response.json()
localStorage.setItem("user", JSON.stringify(user))
+ let shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || []
+ shoppingCardItems = shoppingCardItems.concat(products)
+
+ localStorage.setItem('shoppingCardItems', JSON.stringify(shoppingCardItems))
+
window.location.href = "/"
}
}
diff --git a/public/cart.js b/public/cart.js
index 59b0805..7d66d28 100644
--- a/public/cart.js
+++ b/public/cart.js
@@ -2,6 +2,7 @@ document.querySelector('.search-bar').style.display = 'none';
const table = document.querySelector('table')
table.innerHTML =`
+
<tr>
<th>Product</th>
<th>Image</th>
@@ -16,8 +17,8 @@ let shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) ||
let idItemMap = {}
shoppingCardItems.forEach(item => {
- if (!idItemMap[item.id]) idItemMap[item.id]= [];
- idItemMap[item.id].push(item)
+ if (!idItemMap[item.productid]) idItemMap[item.productid]= [];
+ idItemMap[item.productid].push(item)
})
const uniqueEntries = []
@@ -33,11 +34,11 @@ uniqueEntries.forEach(item => {
<td>${item.name}</td>
<td><img src="${item.image}" height="70" width="70"/></td>
<td>${item.price}</td>
- <td>${idItemMap[item.id].length}</td>
- <td>${idItemMap[item.id].length * item.price}</td>
+ <td>${idItemMap[item.productid].length}</td>
+ <td>${idItemMap[item.productid].length * item.price}</td>
</tr>
`
- totalCost += idItemMap[item.id].length * item.price
+ totalCost += idItemMap[item.productid].length * item.price
})
table.innerHTML +=`
diff --git a/public/checkout.js b/public/checkout.js
index ea2c056..ba20698 100644
--- a/public/checkout.js
+++ b/public/checkout.js
@@ -16,6 +16,5 @@ function checkComplete() {
if (isComplete) {
document.querySelector('.buy-now button').disabled = false;
document.querySelector('.g-warning').innerText = "";
-
}
}
\ No newline at end of file
diff --git a/public/init-shoppingcart.js b/public/init-shoppingcart.js
index dfd1ce6..2ea05f3 100644
--- a/public/init-shoppingcart.js
+++ b/public/init-shoppingcart.js
@@ -1,34 +1,11 @@
-async function initCart(product) {
- const loggedInuser = JSON.parse(localStorage.getItem('user'))
- if (!loggedInuser) {
- setShoppingCart()
- return
- }
-
- try {
- const url = `http://localhost:7000/users/${loggedInuser.id}/shoppingCart`
-
- const response = await fetch(url);
- if (!response.ok) {
- throw new Error(`HTTP error! Status: ${response.status}`);
- }
-
- const shoppingCartItems = await response.json()
-
- setShoppingCart(shoppingCartItems)
-
- } catch (error) {
- console.error(error);
- }
-
-}
-
-function setShoppingCart(items = []){
+function initCart(){
let shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || []
-
- shoppingCardItems = shoppingCardItems.concat(items)
+ localStorage.setItem('shoppingCardItems', JSON.stringify(shoppingCardItems))
document.querySelector('.add-cart span').textContent = shoppingCardItems.length;
}
+
+
+
initCart()
diff --git a/public/main-search.js b/public/main-search.js
index 8a03fb1..4a650c9 100644
--- a/public/main-search.js
+++ b/public/main-search.js
@@ -1,13 +1,13 @@
function debounce(callback, delay) {
- let timerId;
- return function(...args) {
- clearTimeout(timerId);
- return new Promise(resolve => {
- timerId = setTimeout(() => {
- resolve(callback(...args));
- }, delay);
- });
- };
+ let timerId;
+ return function(...args) {
+ clearTimeout(timerId);
+ return new Promise(resolve => {
+ timerId = setTimeout(() => {
+ resolve(callback(...args));
+ }, delay);
+ });
+ };
}
const urlObj = new URL(window.location.href);
@@ -21,165 +21,165 @@ const container = document.querySelector(selector).innerHTML;
const debouncedHandleSearchChangeAsync = debounce(fetchAndPopulateProducts, 300);
document.getElementById('search-input').addEventListener('keyup', () => {
- debouncedHandleSearchChangeAsync();
+ debouncedHandleSearchChangeAsync();
});
async function fetchAndPopulateProducts() {
- const query = document.getElementById('search-input').value
-
- if (query.trim() === "" && !path.split("/")[1]) {
- document.querySelector(selector).innerHTML = container;
- return;
- }
-
- const mapping = {
- men:'men',
- women:'women',
- kids:'kids',
- 'kids-shoes':'K-shoes',
- 'men-shoes':'M-shoes',
- 'women-shoes':'W-shoes',
- }
- const url = `http://localhost:7000/products?q=${query}&cat=${mapping[path.split("/")[1]] ?? ""}`
-
- const response = await fetch(url);
- if (!response.ok) {
- alert('Could not search for products')
- throw new Error(`HTTP error! Status: ${response.status}`);
- }
-
- const products = await response.json()
-
- populateProducts(products)
+ const query = document.getElementById('search-input').value
+
+ if (query.trim() === "" && !path.split("/")[1]) {
+ document.querySelector(selector).innerHTML = container;
+ return;
+ }
+
+ const mapping = {
+ men:'men',
+ women:'women',
+ kids:'kids',
+ 'kids-shoes':'K-shoes',
+ 'men-shoes':'M-shoes',
+ 'women-shoes':'W-shoes',
+ }
+ const url = `http://localhost:7000/products?q=${query}&cat=${mapping[path.split("/")[1]] ?? ""}`
+
+ const response = await fetch(url);
+ if (!response.ok) {
+ alert('Could not search for products')
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+
+ const products = await response.json()
+
+ populateProducts(products)
}
function populateProducts(products) {
- const container = document.querySelector(selector);
- container.style.flexDirection = 'row';
- container.style.flexWrap = 'wrap'
- container.style.justifyContent = 'center'
-
- try {
- 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 = `data:image/jpeg;base64,${product.image.toString('base64')}`;
- productsHtml.appendChild(img);
- }
- if(container){
- container.appendChild(productsHtml);
- }else{
- console.error('Container element not found');
- }
- });
- } catch (error) {
- console.error('Failed to populate products:', error);
- }
- addCartActions(products);
+ const container = document.querySelector(selector);
+ container.style.flexDirection = 'row';
+ container.style.flexWrap = 'wrap'
+ container.style.justifyContent = 'center'
+
+ try {
+ 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 = `data:image/jpeg;base64,${product.image.toString('base64')}`;
+ productsHtml.appendChild(img);
+ }
+ if(container){
+ container.appendChild(productsHtml);
+ }else{
+ console.error('Container element not found');
+ }
+ });
+ } catch (error) {
+ console.error('Failed to populate products:', error);
+ }
+ addCartActions(products);
}
function addCartActions(products) {
-
- var popupViews = document.querySelectorAll('.popup-view');
- var popupBtns = document.querySelectorAll('.popup-btn');
- var closeBtns = document.querySelectorAll('.close-btn');
- //javascript for quick view button
- var popup = function (popupClick) {
- popupViews[popupClick].classList.add('active');
- }
- popupBtns.forEach((popupBtn, i) => {
- popupBtn.addEventListener("click", () => {
- popup(i);
- });
- });
- //javascript for close button
- closeBtns.forEach((closeBtn) => {
- closeBtn.addEventListener("click", () => {
- popupViews.forEach((popupView) => {
- popupView.classList.remove('active');
- });
- });
- });
- const carts = document.querySelectorAll('.add-cart-btn');
-
- for (let i = 0; i < carts.length; i++) {
-
- carts[i].addEventListener('click', () => {
- cardsNumbers(products[i]);
- });
- }
+
+ var popupViews = document.querySelectorAll('.popup-view');
+ var popupBtns = document.querySelectorAll('.popup-btn');
+ var closeBtns = document.querySelectorAll('.close-btn');
+ //javascript for quick view button
+ var popup = function (popupClick) {
+ popupViews[popupClick].classList.add('active');
+ }
+ popupBtns.forEach((popupBtn, i) => {
+ popupBtn.addEventListener("click", () => {
+ popup(i);
+ });
+ });
+ //javascript for close button
+ closeBtns.forEach((closeBtn) => {
+ closeBtn.addEventListener("click", () => {
+ popupViews.forEach((popupView) => {
+ popupView.classList.remove('active');
+ });
+ });
+ });
+ const carts = document.querySelectorAll('.add-cart-btn');
+
+ for (let i = 0; i < carts.length; i++) {
+
+ carts[i].addEventListener('click', () => {
+ cardsNumbers(products[i]);
+ });
+ }
}
async function cardsNumbers(product) {
- const loggedInuser = JSON.parse(localStorage.getItem('user'))
- if (!loggedInuser) {
- updateShoppingCart(product)
- return
- }
-
- try {
- const options = {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- userId: loggedInuser.id,
- productId: product.id
- })
- };
-
- const url = `http://localhost:7000/shopping-cart`
-
- const response = await fetch(url, options);
- if (!response.ok) {
- throw new Error(`HTTP error! Status: ${response.status}`);
- }
-
- updateShoppingCart(product)
-
- } catch (error) {
- console.error(error);
- }
-
+ const loggedInuser = JSON.parse(localStorage.getItem('user'))
+ if (!loggedInuser) {
+ updateShoppingCart(product)
+ return
+ }
+
+ try {
+ const options = {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ userId: loggedInuser.id,
+ productId: product.productid
+ })
+ };
+
+ const url = `http://localhost:7000/shopping-cart`
+
+ const response = await fetch(url, options);
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+
+ updateShoppingCart(product)
+
+ } catch (error) {
+ console.error(error);
+ }
+
}
function updateShoppingCart(product){
- const shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || []
- shoppingCardItems.push(product)
+ const shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || []
+ shoppingCardItems.push(product)
- localStorage.setItem('shoppingCardItems', JSON.stringify(shoppingCardItems))
- document.querySelector('.add-cart span').textContent = shoppingCardItems.length;
+ localStorage.setItem('shoppingCardItems', JSON.stringify(shoppingCardItems))
+ document.querySelector('.add-cart span').textContent = shoppingCardItems.length;
}
\ No newline at end of file
diff --git a/public/payment.js b/public/payment.js
index 49c06ee..85aafbb 100644
--- a/public/payment.js
+++ b/public/payment.js
@@ -1,4 +1,3 @@
-//const response = require("koa/lib/response");
/**
@@ -63,6 +62,14 @@ function createAndAddButton() {
});
document.getElementById('buy-now').appendChild(googlePayButton);
+ const inputs = document.querySelectorAll('input');
+ inputs.forEach(input => {
+ if (!input.value.trim()) {
+ document.querySelector('.buy-now button').disabled= true;
+ document.querySelector('.g-warning').innerText = 'Complete all the fields above in order to be able to pay with google pay'
+ }
+})
+
}
/**
@@ -87,15 +94,79 @@ function onGooglePayButtonClicked() {
googlePayClient.loadPaymentData(paymentDataRequest)
.then(paymentData => processPaymentData(paymentData))
+ .then(()=>updateDetails())
.catch(error => console.error('loadPaymentData error: ', error));
}
-function processPaymentData(paymentData) {
- fetch(orderEndpointURL, {
+async function processPaymentData(paymentData) {
+
+ const usr = JSON.parse(localStorage.getItem('user'))
+ if(usr){
+ await fetch(`http://localhost:7000/users/${usr.id}/products`, {
+ method: 'DELETE',
+ headers: {
+ 'Content-Type' : 'application/json'
+ },
+
+ })
+ }
+ localStorage.removeItem('shoppingCardItems')
+ document.querySelector('.add-cart span').textContent = 0;
+
+ const inputs = document.querySelectorAll('input')
+
+ const valuesMap = {}
+ inputs.forEach((input,ind) => {
+ if (!ind) return
+
+ valuesMap[input.getAttribute('name')] = input.value
+ })
+
+ await fetch(`http://localhost:7000/orders`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
- body: paymentData
+ body: JSON.stringify({
+ totalCost: localStorage.getItem('totalCost'),
+ userId: usr?.id,
+ date: new Date(),
+ ...valuesMap
+ })
+ })
+ localStorage.setItem('totalCost', 0)
+}
+
+async function updateDetails(){
+ const lu = JSON.parse(localStorage.getItem('user'))
+ if (!lu) return;
+ const inputs = document.querySelectorAll('input')
+
+ const valuesMap = {}
+ inputs.forEach((input,ind) => {
+ if (!ind) return
+
+ valuesMap[input.getAttribute('name')] = input.value
})
+
+ try {
+ const options = {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(
+ valuesMap
+ )
+ };
+
+ const url = `http://localhost:7000/users/${lu.id}/details`
+
+ const response = await fetch(url, options);
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+ } catch (error){
+ console.log(error)
+ }
}
\ No newline at end of file
diff --git a/public/search.js b/public/search.js
index e19f0b9..5a296a6 100644
--- a/public/search.js
+++ b/public/search.js
@@ -1,6 +1,22 @@
let products1 = [];
+// const searchBar = document.getElementById('search-input');
+/* searchBar.addEventListener('input', (e) => {
+ const searchString = e.target.value.toLowerCase();
+
+ if (products1 && products1.length) {
+ const filteredProducts = products1.filter((product) => {
+ return (
+ product.name?.toLowerCase().includes(searchString) ||
+ product.price?.toString().toLowerCase().includes(searchString)
+ );
+ });
+ displayCarts(filteredProducts);
+ } else {
+ console.log('Products array is empty or undefined. Waiting for data to load.');
+ }
+}); */
const displayCarts = (products) => {
const container = document.querySelector('.container-');
@@ -77,3 +93,7 @@ function initializeSearch() {
});
}
+// document.addEventListener('DOMContentLoaded', () => {
+// loadProducts();
+// });
+
diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index a40cd96..18d4c21 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -1,4 +1,4 @@
-async function populateProducts(products) {
+function populateProducts(products) {
const container = document.querySelector('.container');
try {
@@ -50,22 +50,6 @@ async function populateProducts(products) {
addCartActions(products);
}
-async function getProducts() {
- try {
- const response = await fetch(`http://localhost:7000/${location.pathname.split('/')[1]}-products`);
- if (!response.ok) {
- throw new Error(`HTTP error! Status: ${response.status}`);
- }
- const data = await response.json();
- //const copied = Array(20).fill(data[0])
- populateProducts(data);
- } catch (error) {
- console.error('error fetching products:', error);
- }
-
-
-}
-
function addCartActions(products) {
@@ -115,7 +99,7 @@ async function cardsNumbers(product) {
},
body: JSON.stringify({
userId: loggedInuser.id,
- productId: product.id
+ productId: product.productid
})
};
@@ -143,6 +127,28 @@ function updateShoppingCart(product){
}
+async function getProducts() {
+ const page = location.pathname.split('/')[1]
+ if (page==='cart') {
+
+
+ return;
+ }
+ try {
+ const response = await fetch(`http://localhost:7000/${page}-products`);
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+ const data = await response.json();
+ populateProducts(data);
+ } catch (error) {
+ console.error('error fetching products:', error);
+ }
+
+
+}
+
+
document.addEventListener('DOMContentLoaded', (event) => {
getProducts();
})
diff --git a/public/slides.js b/public/slides.js
index 0ce60d3..3d94614 100644
--- a/public/slides.js
+++ b/public/slides.js
@@ -1,4 +1,22 @@
-
+/*let slideIndex = 0;
+showSlides();
+
+function showSlides() {
+ let i;
+ let slides = document.getElementsByClassName("mySlides");
+ let dots = document.getElementsByClassName("dot");
+ for (i = 0; i < slides.length; i++) {
+ slides[i].style.display = "none";
+ }
+ slideIndex++;
+ if (slideIndex > slides.length) {slideIndex = 1}
+ for (i = 0; i < dots.length; i++) {
+ dots[i].className = dots[i].className.replace(" active", "");
+ }
+ slides[slideIndex-1].style.display = "block";
+ dots[slideIndex-1].className += " active";
+ setTimeout(showSlides, 2000); // Change image every 2 seconds
+}*/
var carousel = document.querySelector('.carousel');
var cellCount = 9;
diff --git a/public/style.css b/public/style.css
index b7a46fb..5eb13ee 100644
--- a/public/style.css
+++ b/public/style.css
@@ -9,8 +9,8 @@ body, h1, h2, p {
/* Basic page styles */
.responsive {
- font-family: Arial, sans-serif;
- background:rgba(0, 0, 0, 0.3);
+ font-family: Arial, sans-serif;
+ background:rgba(0, 0, 0, 0.2);
}
@@ -25,12 +25,13 @@ body, h1, h2, p {
.shopname{
margin: 0;
- padding-left: 10px;
+ padding-left: 60px;
color: #ffffff;;
- font-size: 24px;
-
+ font-size: 34px;
text-decoration-line: none;
letter-spacing: 1px;
+ text-shadow: 10px 5px 5px rgb(24, 23, 23);
+
}
header{
@@ -63,7 +64,7 @@ header{
.navbar ul.navbar-nav li {
margin-right: 60;
- padding: 10px 20px 10px 40px;
+padding: 10px 20px 10px 40px;
}
.navbar ul.navbar-nav li a {
@@ -76,7 +77,7 @@ header{
}
/* Add an active class to highlight the current page */
.actives {
-
+
color: white;
padding: 10px 20px;
margin-right: 60;
@@ -163,28 +164,6 @@ header{
margin-top: 50px;
}
-/*-------------register form--------------*/
-.authenticate-form {
- display:block;
- justify-content: center;
- padding: 240px 90px 24px 90px;
-
-}
-
-.input-group{
- width: 100%;
- min-width: 300px;
- padding: 12px 24px;
- border-radius: 24px;
- font-size: 16px;
- border: 0px;
- outline: none;
-}
-
-.btn{
- margin-left: 40px;
-}
-
/*Styles for product card*/
.product .product-card {
@@ -457,14 +436,12 @@ header{
@media only screen and (max-width:620px) {
/* For mobile phones: */
- .menu, .container, .login-button, .shopname, .previous-button, .next-button, .scene, .carousel, .carousel__cell, .footer, .containers,
- .carousel__cell:nth-child(1), .carousel__cell:nth-child(2), .carousel__cell:nth-child(3), .carousel__cell:nth-child(4), .carousel__cell:nth-child(5), .carousel__cell:nth-child(6),
- .carousel__cell:nth-child(7), .carousel__cell:nth-child(8), .carousel__cell:nth-child(9){
+ .menu, .container, .login-button, .shopname {
width:100%;
}
}
@media screen and (max-width:1250px){
- .container ul li, .login-button, .footer, .containers{
+ .container ul li, .login-button{
width:40%;
margin-left: 40px;
@@ -478,6 +455,8 @@ header{
width: 360px;
height: 290px;
margin: 40px auto;
+ cursor: pointer;
+ margin-top: -330px;
perspective: 1000px;
top: 200px;
}
@@ -489,7 +468,6 @@ header{
transform: translateZ(-588px);
transform-style: preserve-3d;
transition: transform 1s;
-
}
.carousel__cell {
@@ -504,6 +482,8 @@ header{
font-weight: bold;
color: white;
text-align: center;
+ box-shadow: 5px 5px 10px black;
+
}
.slides{
@@ -530,8 +510,10 @@ header{
left: 5%;
color: #000;
cursor: pointer;
- border-radius: 20px;
+ border-radius: 50px;
background-color: #f1efef;
+ box-shadow: 10px 5px 5px rgb(61, 60, 60);
+
}
.previous-button:hover{
@@ -544,21 +526,22 @@ header{
right: 5%;
color: #000;
cursor: pointer;
- border-radius: 20px;
+ border-radius: 50px;
background-color: #f1efef;
+ box-shadow: 10px 5px 5px rgb(61, 60, 60);
}
.next-button:hover{
background-color: #5a5e5f;
}
-/* footer style */
+/*********** footer style **************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
.containers{
max-width: 1170px;
- margin:auto;
-}
+ margin:auto;
+ }
.row{
display: flex;
flex-wrap: wrap;
@@ -568,11 +551,11 @@ ul{
}
.footer{
background-color: rgba(0, 0, 0, 0.8);
- padding: 50px 0;
- position: absolute;
- right: 0;
- left: 0;
- bottom: -1000px;
+ padding: 50px 0;
+ position: absolute;
+ right: 0;
+ left: 0;
+ margin-top: 800px;
}
.footer-col{
width: 25%;
@@ -588,8 +571,8 @@ ul{
}
.footer-col h4::before{
content: '';
- position: absolute;
- left:0;
+ position: absolute;
+ left:0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
@@ -614,8 +597,8 @@ ul{
padding-left: 8px;
}
.footer-col .social-links a{
- display: inline-block;
- height: 40px;
+ display: inline-block;
+ height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
@@ -650,7 +633,7 @@ ul{
/* On smaller screens, decrease text size */
@media only screen and (max-width: 100px) {
- .text {font-size: 8px}
+ .text {font-size: 8px}
}
@@ -762,13 +745,41 @@ ul{
background-color: #00ff6a;
color: #000;
padding: 0 0 0 0px;
- margin-bottom: 9px;
text-decoration: none;
justify-content: space-around;
border-radius: 8px;
- position:absolute;
text-align: center;
- right: 45%;
- top: 120%;
-
+ width:fit-content;
+}
+
+
+.authenticate-form {
+ display:flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ margin-top:400px;
+ margin-left: 30%;
+ max-width:800px;
+ margin: 400 auto 0 auto;
+}
+
+.logout-button {
+ background: none;
+ border: none;
+ color: white;
+}
+
+.car-con {
+ margin: 400px auto;
+ display: flex;
+ flex-direction: column;
+}
+
+
+.btn-con {
+ margin-top:50px;
+ display: flex;
+ width:100%;
+ justify-content: space-around;
}
\ No newline at end of file
diff --git a/server.js b/server.js
index d56208c..b62be4f 100644
--- a/server.js
+++ b/server.js
@@ -16,7 +16,7 @@ const pool = new Pool({
database: 'your-fashion-data'
});
-const transport = nodemailer.createTransport({
+var transport = nodemailer.createTransport({
host: "sandbox.smtp.mailtrap.io",
port: 2525,
auth: {
@@ -151,20 +151,6 @@ app.post('/shopping-cart', async (req, res) => {
}
});
-
- app.get('/users/:userId/shoppingCart', async (req, res) => {
- try{
- const client = await pool.connect();
- const { rows } = await client.query(`SELECT * FROM shopping_cart WHERE user_id = ${req.params.userId}`);
- res.json(rows);
- client.release();
- }catch(err){
- res.status(500).send('Server error');
- console.error('Error exucting query', err.stack);
- }
- });
-
-
app.post('/register', async (req, res) => {
try{
const client = await pool.connect();
@@ -173,7 +159,7 @@ app.post('/register', async (req, res) => {
username = username || email.split('@')[0]
const code = generateRandomSixDigitNumber()
await client.query(`INSERT INTO users (email, username, password, code) VALUES ('${email}', '${username}', '${sha256Hash(password)}', '${code}');`);
- await transporter.sendMail({
+ await transport.sendMail({
from: '<fashion-store@style.com>',
to: email,
subject: "Confirm your account",
@@ -217,9 +203,15 @@ app.post('/register', async (req, res) => {
const client = await pool.connect();
const { body:{ email, password } } = req;
const { rows } = await client.query(`SELECT * from users WHERE "users"."password" = '${sha256Hash(password)}'
- AND "users"."is_active" = true AND "users"."email" = '${email}'`);
+ AND "users"."is_active" = true AND "users"."email" = '${email}'
+ `);
+
if (rows.length) {
- res.json(rows[0]);
+ const { rows: products} = await client.query(`
+ SELECT p.* from shopping_cart sc left join products p on p.productid = sc.product_id
+ WHERE sc.user_id = ${rows[0].id};
+ `)
+ res.json({user:rows[0], products});
client.release();
return
}
@@ -234,6 +226,73 @@ app.post('/register', async (req, res) => {
});
+app.get('/products', async (req, res) => {
+ const { q, cat } = req.query
+ let andCondition = '';
+
+ if (cat) {
+ andCondition = ` AND category='${cat}'`
+ }
+ console.log(`SELECT * FROM products WHERE name ILIKE '%${q}%'${andCondition};`)
+ try{
+ const client = await pool.connect();
+ const { rows } = await client.query(`SELECT * FROM products WHERE name ILIKE '%${q}%'${andCondition};`);
+ res.json(rows);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Error exucting query', err.stack);
+ }
+});
+
+app.post('/users/:id/details', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ console.log(req.body)
+ await client.query(`UPDATE users set details='${JSON.stringify(req.body)}' WHERE "users"."id" = '${req.params.id}'`);
+ res.sendStatus(201);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Error exucting query', err.stack);
+ }
+});
+
+
+
+app.delete('/users/:id/products', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ await client.query(`Delete from shopping_cart where user_id = '${req.params.id}'`);
+ res.sendStatus(204);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Error exucting query', err.stack);
+ }
+});
+
+
+
+app.post('/orders', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ const code = generateRandomSixDigitNumber()
+ if (req.body.userId) {
+ await client.query(`INSERT INTO orders (user_id, details) VALUES ('${req.body.userId}', '${JSON.stringify(req.body)}');`);
+
+ } else {
+ await client.query(`INSERT INTO orders (details) VALUES ('${JSON.stringify(req.body)}');`);
+
+ }
+
+ res.sendStatus(201);
+ 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/activate.hbs b/views/activate.hbs
index 56fc63f..88cda30 100644
--- a/views/activate.hbs
+++ b/views/activate.hbs
@@ -1,4 +1,4 @@
-<DOCTYPE! html>
+<!DOCTYPE html>
<html>
<head>
diff --git a/views/cart.hbs b/views/cart.hbs
index 78efcfb..42043f3 100644
--- a/views/cart.hbs
+++ b/views/cart.hbs
@@ -16,7 +16,8 @@
<style>
.cart-container {
margin: 2%;
- border: 2px dashed #333;
+ box-shadow: 5px 5px 10px black;
+
border-radius: 4%;
padding: 2%;
}
@@ -77,14 +78,9 @@
<div class="checkout-container">
<button class="btn btn-primary" onclick="handleProceedCheckout()">Proceed to Checkout</button>
</div>
- {{!-- <div id="buy-now">Buy Now</div> --}}
-
-
- {{!-- <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 async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script> --}}
<script src="/cart.js"></script>
</body>
- {{> common/footer}}
+ {{> common/footer}}
</html>
\ No newline at end of file
diff --git a/views/checkout.hbs b/views/checkout.hbs
index e7d96fa..e59d493 100644
--- a/views/checkout.hbs
+++ b/views/checkout.hbs
@@ -1,91 +1,85 @@
<!DOCTYPE html>
-<html lang="en" charset="UTF-8">
-
-<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 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>
- .prod-container1 {
- display: flex;
+ <html lang="en" charset="UTF-8">
+
+ <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 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>
+ .prod-container {
+ display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
- width: 100%;
+ width:100%;
margin: 200 auto;
- margin-bottom: 50px;
- margin-top: 100px;
- }
-
- .form-group {
- width: 500px;
- }
+ margin-bottom:100px;
+ }
- .buy-now {
+ .form-group {
+ width:500px;
+ }
+ .buy-now {
display: flex;
justify-content: center;
position: relative
- }
- </style>
-
-
-
-
-</head>
-
-<body class="responsive">
-
-
- <header>
- {{> common/navbar}}
-
- </header>
-
- <div class="prod-container1">
- <div class="form-group">
- <label for="name">Full name *</label>
- <input type="text" class="form-control" id="name" placeholder="Enter your full name" required>
- </div>
- <div class="form-group">
- <label for="address">Address *</label>
- <input type="text" class="form-control" id="Address" placeholder="Enter your address" required>
+ }
+ </style>
+
+
+
+
+ </head>
+
+ <body class="responsive">
+
+
+ <header>
+ {{> common/navbar}}
+
+ </header>
+
+ <div class="prod-container">
+ <div class="form-group">
+ <label for="name">Full name</label>
+ <input type="text" class="form-control" id="name" name="fullName" placeholder="Enter your full name">
+ </div>
+ <div class="form-group">
+ <label for="address">Address</label>
+ <input type="text" class="form-control" id="Address" name="address" placeholder="Enter your address">
+ </div>
+ <div class="form-group">
+ <label for="city">City</label>
+ <input type="text" class="form-control" id="City" name="city" placeholder="Enter your city">
+ </div>
+ <div class="form-group">
+ <label for="city">Zip-code</label>
+ <input type="text" class="form-control" id="ZipCode" name="zipCode" placeholder="Enter your zip code">
+ </div>
+ <div class="form-group">
+ <label for="pnumber">Phone Number</label>
+ <input type="text" class="form-control" id="pNumber" name="phoneNumber" placeholder="Enter your phone number">
+ </div>
</div>
- <div class="form-group">
- <label for="city">City *</label>
- <input type="text" class="form-control" id="City" placeholder="Enter your city" required>
- </div>
- <div class="form-group">
- <label for="city">Post-code *</label>
- <input type="text" class="form-control" id="PostCode" placeholder="Enter your post code" required>
- </div>
- <div class="form-group">
- <label for="pnumber">Phone Number</label>
- <input type="text" class="form-control" id="pNumber" placeholder="Enter your phone number">
- </div>
- <br>
<div class="buy-now">
- <div id="buy-now">Buy Now</div>
+ <div id="buy-now">Buy Now</div>
</div>
- </div>
-
- <p class="g-warning" style="text-align:center;color:orange"></p>
+ <p class="g-warning" style="text-align:center;color:orange"></p>
- <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 async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>
- <script src="/checkout.js"></script>
- <script src="/payment.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 async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>
+ <script src="/checkout.js"></script>
+ <script src="/payment.js"></script>
-</body>
+ </body>
-</html>
\ No newline at end of file
+ </html>
\ No newline at end of file
diff --git a/views/common/navbar.hbs b/views/common/navbar.hbs
index 15202f1..52e715a 100644
--- a/views/common/navbar.hbs
+++ b/views/common/navbar.hbs
@@ -1,67 +1,72 @@
-<div>
+ <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="your-fashion-text-box">
+
+ <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>
+ <button type="button" class="logout-button" onclick="handleLogout()">Logout</button>
+ <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>
- <script>
- function handleAnchorClick(category) {
- window.location.href = category;
- }
+ <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"
+ })
+ } else {
+ document.querySelector('.logout-button').style.display = "none"
+ }
- const user = JSON.parse(localStorage.getItem('user'))
+ function handleLogout(){
+ localStorage.clear();
+ window.location.reload();
+ }
- if (user) {
- document.querySelectorAll(".login-button").forEach(el => {
- el.style.display = "none"
- })
- }
- </script>
- <script src="/init-shoppingcart.js"></script>
+ </script>
+ <script src="/init-shoppingcart.js"></script>
-</div>
\ No newline at end of file
+ </div>
\ No newline at end of file
diff --git a/views/index.hbs b/views/index.hbs
index d972be7..0af3134 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,75 +1,56 @@
<!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">
-
-
-
-</head>
-
-<body class="responsive">
-
-
- <header>
- {{> common/navbar}}
- </header>
- <div id="characterList" class="characterLists"></div>
- <main class="cont">
-
- <div id="characterList"></div>
- <div class="posts-container"></div>
- </main>
- <br>
-
- <div class="scene">
- <div class="carousel">
- <a class="carousel__cell" href="/women" ><img class="slides"
- src="https://www.telegraph.co.uk/content/dam/fashion/2022/10/25/TELEMMGLPICT000313960470_trans_NvBQzQNjv4Bq7Cadr0IoOOfMS5GpRLWfGbVvz_IXZinEqtDTKahtjvc.jpeg?imwidth=680">
- </a>
- <a class="carousel__cell" href="/women"><img class="slides"
- src="https://i.cbc.ca/1.4713184.1529440884!/fileImage/httpImage/image.png_gen/derivatives/16x9_780/petite.png">
- </a>
- <a class="carousel__cell" href="/women"><img class="slides"
- src="https://dlsb.co.uk/cdn/shop/collections/Women_s_Clothing.png?v=1662113551"></a>
- <a class="carousel__cell" href="/kids"><img class="slides"
- src="https://cdn.shopify.com/s/files/1/0878/3908/files/social_sharing_shopify.jpg?v=1667977060"></a>
- <a class="carousel__cell" href="/kids"><img class="slides"
- src="https://www.nextdirect.com/nxtcms/resource/blob/5587208/f0e6f37c9c409a172eb0ca2236449efb/hero1-kids-data.jpg">
- </a>
- <a class="carousel__cell" href="/kids"><img class="slides"
- src="https://i.ebayimg.com/images/g/9bEAAOSwmh9ez480/s-l1200.webp"></a>
- <a class="carousel__cell" href="/women"><img class="slides"
- src="https://www.nerdwallet.com/assets/blog/wp-content/uploads/2021/09/GettyImages-1174825598-2400x1440.jpg">
- </a>
- <a class="carousel__cell" href="/men"><img class="slides"
- src="https://www.realmenrealstyle.com/wp-content/uploads/2023/08/Promote-Positive-Communication.jpg"></a>
- <a class="carousel__cell" href="/men"><img class="slides" src="https://i.insider.com/62e40d594b455800188b5fca?width=700">
- </a>
- </div>
+ <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">
+
+
+
+ </head>
+
+ <body class="responsive">
+
+
+ <header>
+ {{> common/navbar}}
+
+ </header>
+ <div id="characterList" class="characterLists"></div>
+ <main class="cont">
+ <div id="characterList"></div>
+ <div class="posts-container"></div>
+ </main>
+ <br>
+<div class="car-con">
+ <div class="scene">
+ <div class="carousel">
+ <div class="carousel__cell" href="/women"><img class="slides" src="https://www.telegraph.co.uk/content/dam/fashion/2022/10/25/TELEMMGLPICT000313960470_trans_NvBQzQNjv4Bq7Cadr0IoOOfMS5GpRLWfGbVvz_IXZinEqtDTKahtjvc.jpeg?imwidth=680"></div>
+ <div class="carousel__cell" href="/women"><img class="slides" src="https://i.cbc.ca/1.4713184.1529440884!/fileImage/httpImage/image.png_gen/derivatives/16x9_780/petite.png"></div>
+ <div class="carousel__cell" href="/women"><img class="slides" src="https://dlsb.co.uk/cdn/shop/collections/Women_s_Clothing.png?v=1662113551"></div>
+ <div class="carousel__cell" href="/kids"><img class="slides" src="https://cdn.shopify.com/s/files/1/0878/3908/files/social_sharing_shopify.jpg?v=1667977060"></div>
+ <div class="carousel__cell" href="/kids"><img class="slides" src="https://www.nextdirect.com/nxtcms/resource/blob/5587208/f0e6f37c9c409a172eb0ca2236449efb/hero1-kids-data.jpg"></div>
+ <div class="carousel__cell" href="/kids"><img class="slides" src="https://i.ebayimg.com/images/g/9bEAAOSwmh9ez480/s-l1200.webp"></div>
+ <div class="carousel__cell" href="/women"><img class="slides" src="https://www.nerdwallet.com/assets/blog/wp-content/uploads/2021/09/GettyImages-1174825598-2400x1440.jpg"></div>
+ <div class="carousel__cell" href="/men"><img class="slides" src="https://www.realmenrealstyle.com/wp-content/uploads/2023/08/Promote-Positive-Communication.jpg"></div>
+ <div class="carousel__cell" href="/men"><img class="slides" src="https://i.insider.com/62e40d594b455800188b5fca?width=700"></div>
+ </div>
+ </div>
+ <div class="btn-con">
+ <button class="previous-button" style='font-size:50px;'>←</button>
+ <button class="next-button" style='font-size:50px;'>→</button>
</div>
- <p style="text-align: center;">
- <button class="previous-button"><span style="font-size: 36px;">🡨</span></button>
- <button class="next-button"><span style="font-size: 36px;">🡪</span></button>
- </p>
-
-
-
-
- <script src="/slides.js"></script>
- <script src="/main-search.js"></script>
- <script src="/shopping-basket.js"></script>
-
-</body>
-
-{{> common/footer}}
+</div>
+ {{> common/footer}}
+ </body>
+ <script src="/slides.js"></script>
+ <script src="/main-search.js"></script>
-</html>
\ No newline at end of file
+ </html>
\ No newline at end of file
diff --git a/views/kids-shoes.hbs b/views/kids-shoes.hbs
index 88f2a16..fc34ff8 100644
--- a/views/kids-shoes.hbs
+++ b/views/kids-shoes.hbs
@@ -9,11 +9,10 @@
<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">
-
@@ -22,20 +21,16 @@
<body class="responsive">
-
+
<header>
{{> common/navbar}}
+
</header>
- <br>
-
- <div id="characterList" class="characterLists"></div>
+ <div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div>
-
- {{> common/footer}}
- <script src="/main-search.js" type="module"></script>
+ {{> common/footer}}
<script src="/shopping-basket.js"></script>
-
+ <script src="/main-search.js"></script>
</body>
-
-</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 9e1ffbe..bb7a1b8 100644
--- a/views/kids.hbs
+++ b/views/kids.hbs
@@ -9,11 +9,10 @@
<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">
-
@@ -22,20 +21,15 @@
<body class="responsive">
-
+
<header>
{{> common/navbar}}
- </header>
- <br>
-
- <div id="characterList" class="characterLists"></div>
- <div class="container" id="container"></div>
-
+ </header>
+ <div id="characterList" class="characterLists"></div>
+ <div class="container"></div>
{{> common/footer}}
- <script src="/main-search.js"></script>
- <script src="/shopping-basket.js"></script>
-
+ <script src="/shopping-basket.js"></script>
+ <script src="/main-search.js"></script>
</body>
-
-</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 f1424cb..e7b7412 100644
--- a/views/men-shoes.hbs
+++ b/views/men-shoes.hbs
@@ -1,40 +1,38 @@
<!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>
- {{> common/navbar}}
- </header>
- <br>
-
- <div id="characterList" class="characterLists"></div>
- <div class="container" id="container"></div>
-
- {{> common/footer}}
- <script src="/main-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 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>
+ {{> common/navbar}}
+ </header>
+ <div id="characterList" class="characterLists"></div>
+ <div class="container" id="container"></div>
+
+ {{> common/footer}}
+ <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="/shopping-basket.js"></script>
+ <script src="/main-search.js"></script>
+</body>
</html>
\ No newline at end of file
diff --git a/views/men.hbs b/views/men.hbs
index 9e353d3..f5f68d6 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -1,48 +1,39 @@
<!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>
- {{> 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="/main-search.js" type="module"></script>
- <script src="/shopping-basket.js"></script>
-
-
-</body>
-
-{{> common/footer}}
-</html>
\ No newline at end of file
+ <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>
+ {{> common/footer}}
+ <script src="/main-search.js"></script>
+ <script src="/shopping-basket.js"></script>
+
+ </body>
+
+ </html>
\ No newline at end of file
diff --git a/views/women-shoes.hbs b/views/women-shoes.hbs
index 9e1ffbe..55ebeb7 100644
--- a/views/women-shoes.hbs
+++ b/views/women-shoes.hbs
@@ -9,33 +9,25 @@
<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>
{{> common/navbar}}
</header>
- <br>
-
- <div id="characterList" class="characterLists"></div>
+ <div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div>
-
{{> common/footer}}
- <script src="/main-search.js"></script>
<script src="/shopping-basket.js"></script>
-
+ <script src="/main-search.js"></script>
</body>
-
-</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 2c0d07c..154cde1 100644
--- a/views/women.hbs
+++ b/views/women.hbs
@@ -9,11 +9,10 @@
<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">
-
@@ -22,21 +21,15 @@
<body class="responsive">
-
<header>
{{> common/navbar}}
+
</header>
- <br>
-
- <div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div>
-
-
+ <div id="characterList" class="characterLists"></div>
{{> common/footer}}
- <script src="/main-search.js" type="module"></script>
<script src="/shopping-basket.js"></script>
-
+ <script src="/main-search.js"></script>
</body>
-
-</html>
\ No newline at end of file
+ </html>
\ No newline at end of file
--
GitLab