diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..1e02f656fc6fc23cf89576f8f0f7bf7f65a6c474
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,694 @@
+* {
+ box-sizing: border-box;
+}
+/* Reset some default styles */
+body, h1, h2, p {
+ margin: 0;
+ padding: 0;
+}
+
+/* Basic page styles */
+body {
+ font-family: Arial, sans-serif;
+}
+
+.your-fashion-text-box {
+ text-align: center;
+ text-decoration-line: none;
+ top: 3%;
+ left: 10%;
+ transform: translate(-10%, -10%);
+}
+
+.shopname{
+ margin: 0;
+ padding-left: 100px;
+ color: #ffffff;;
+ font-size: 24px;
+ text-transform: uppercase;
+ text-decoration-line: none;
+ letter-spacing: 1px;
+}
+header{
+ background-image:linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3));
+ background-size: cover;
+ background-position: center;
+ margin-bottom: -360px;
+ height: 400px;
+}
+
+
+/* Navbar styles */
+.navbar {
+ background-color: linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3));
+ color: #fff;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 20px;
+ float: none;
+}
+
+.navbar .container-fluid {
+ font-size: 24px;
+}
+
+.navbar ul.navbar-nav {
+ list-style: none;
+ display: flex;
+}
+
+.navbar ul.navbar-nav li {
+ margin-right: 60;
+}
+
+.navbar ul.navbar-nav li a {
+ text-decoration: none;
+ color: #fff;
+}
+.navbar ul.navbar-nav li a:hover {
+ opacity: 0.5;
+ color: #fff;
+}
+/* Add an active class to highlight the current page */
+.actives {
+ background-color:linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3));
+ color: white;
+ padding: 10px 20px;
+ margin-right: 60;
+ text-decoration: none;
+ border-radius: 8px;
+ }
+
+ .actives:hover{
+ opacity: 0.5;
+ color: #141313;
+ }
+/* Search bar styles */
+
+.search-bar {
+ text-align: center;
+ margin: 2px 10;
+}
+
+.search-bar input[type="search"] {
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ width: 60%;
+ background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
+}
+
+
+/*.search-bar button {
+ padding: 10px 20px;
+ background-color: #333;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+
+}
+.search-bar button:hover{
+ opacity: 0.5;
+ color: #fff;
+}*/
+/* dropdown menu styles */
+/*.navbar ul.navbar-nav li a {
+ text-decoration: none;
+ color: #fff;
+}*/
+
+.nav-item ul.dropdown-menu li a {
+ text-decoration: none;
+ color: #141313;
+}
+
+.nav-item ul.dropdown-menu li a:hover {
+ text-decoration: none;
+ color: #0a550a;
+}
+
+/* Login button styles */
+.login-button, .add-cart-btn, .add-cart {
+ padding: 10px 20px;
+ /*background-color: #333;*/
+ color: #fff;
+ border: none;
+ border-radius: 8px;
+ text-decoration: none;
+
+}
+.login-button:hover{
+ opacity: 0.5;
+ color: #ccc;
+}
+.add-cart-btn:hover{
+ opacity: 0.5;
+ color: #ccc;
+}
+.add-cart:hover{
+ opacity: 0.5;
+ color: #ccc;
+}
+
+/* Product card styles (for the products page) */
+.container, .prods-container {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100vh;
+ top: 200px;
+}
+
+/*Styles for product card*/
+
+.product .product-card {
+ z-index: 1;
+ background: #1d212b;
+ position: relative;
+ width: 300px;
+ height: 500px;
+ margin: 40px;
+ border-radius: 10px;
+}
+
+.product .product-card:before {
+ content: "";
+ background: rgba(255, 255, 255, 0.1);
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 50%;
+ height: 100%;
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+}
+
+.product .product-card .product-img {
+ z-index: 1;
+ position: absolute;
+ max-width: 370px;
+ max-height: 430px;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.product .product-card .name {
+ z-index: 2;
+ color: #f1efef;
+ position: absolute;
+ width: 100%;
+ text-align: center;
+ bottom: 100px;
+ font-size: 20px;
+ letter-spacing: 1px;
+}
+
+.product .product-card .price {
+ z-index: 2;
+ color: #f1efef;
+ position: absolute;
+ width: 100%;
+ text-align: center;
+ bottom: 50px;
+ font-size: 30px;
+ font-weight: 300;
+}
+
+.product .product-card .popup-btn {
+ z-index: 2;
+ color: #fff;
+ background: #555;
+ position: absolute;
+ bottom: 5px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 14px;
+ text-transform: uppercase;
+ text-decoration: none;
+ letter-spacing: 1px;
+ padding: 10px 15px;
+ border-radius: 20px;
+ cursor: pointer;
+}
+
+/*Styles for popup view*/
+
+.product .popup-view {
+ z-index: 2;
+ background: rgba(255, 255, 255, 0.5);
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 0;
+ visibility: hidden;
+ transition: 0.5s;
+}
+
+.product .popup-view.active {
+ opacity: 1;
+ visibility: visible;
+}
+
+.product .popup-card {
+ position: relative;
+ display: flex;
+ width: 800px;
+ height: 500px;
+ margin: 20px;
+}
+
+.product .popup-card .product-img {
+ z-index: 2;
+ background: #1d212b;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 45%;
+ height: 90%;
+ transform: translateY(25px);
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+}
+
+.product .popup-card .product-img img {
+ z-index: 2;
+ position: relative;
+ width: 450px;
+ left: -50px;
+}
+
+.product .popup-card .info {
+ z-index: 2;
+ background: #fff;
+ display: flex;
+ flex-direction: column;
+ width: 55%;
+ height: 100%;
+ box-sizing: border-box;
+ padding: 40px;
+ border-radius: 10px;
+}
+
+.product .popup-card .close-btn {
+ color: #0a0101;
+ z-index: 3;
+ position: absolute;
+ right: 0;
+ font-size: 20px;
+ margin: 20px;
+ cursor: pointer;
+}
+
+.product .popup-card .info h2 {
+ font-size: 10px;
+ line-height: 20px;
+ margin: 10px;
+}
+
+.product .popup-card .info h2 span {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+}
+
+.product .popup-card .info h2 {
+ font-size: 20px;
+ line-height: 20px;
+ margin: 10px;
+}
+
+.product .popup-card .info h2 span {
+ font-size: 15px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+}
+
+.product .popup-card .info p {
+ font-size: 15px;
+ margin: 10px;
+}
+
+.product .popup-card .info .price {
+ font-size: 45px;
+ font-weight: 300;
+ margin: 10px;
+}
+
+.product .popup-card .info .add-cart-btn {
+ color: #fff;
+ background: #009dd2;
+ font-size: 16px;
+ font-weight: 600;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ margin: 10px auto;
+ padding: 10px 50px;
+ border-radius: 20px;
+}
+
+.product .popup-card .info .add-wish {
+ color: #009dd2;
+ font-size: 16px;
+ text-align: center;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+/*Responsive styles*/
+
+@media (max-width: 900px) {
+ .product .popup-card {
+ flex-direction: column;
+ width: 550px;
+ height: auto;
+ }
+
+ .product .popup-card .product-img {
+ z-index: 3;
+ width: 100%;
+ height: 200px;
+ transform: translateY(0);
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ }
+
+ .product .popup-card .product-img img {
+ left: initial;
+ max-width: 100%;
+ }
+
+ .product .popup-card .info {
+ width: 100%;
+ height: auto;
+ padding: 20px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ .product .popup-card .info h2 {
+ margin: 20px 5px 5px 5px;
+ font-size: 25px;
+ }
+
+ .product .popup-card .info h2 span {
+ font-size: 10px;
+ }
+
+ .product .popup-card .info p {
+ margin: 5px;
+ font-size: 13px;
+ }
+
+ .product .popup-card .info .price {
+ margin: 5px;
+ font-size: 30px;
+ }
+
+ .product .popup-card .info .add-cart-btn {
+ margin: 5px auto;
+ padding: 5px 40px;
+ font-size: 14px;
+ }
+
+ .product .popup-card .info .add-wish {
+ font-size: 14px;
+ }
+
+ .product .popup-card .close-btn {
+ z-index: 4;
+ }
+}
+
+@media only screen and (max-width:620px) {
+ /* For mobile phones: */
+ .menu, .container, .login-button, .shopname {
+ width:100%;
+ }
+ }
+ @media screen and (max-width:1250px){
+ .container ul li, .login-button{
+ width:40%;
+ margin-left: 40px;
+
+ }
+ }
+
+ /*******Carousel styles************/
+ .scene {
+ border: 1px solid #CCC;
+ position: relative;
+ width: 360px;
+ height: 290px;
+ margin: 40px auto;
+ perspective: 1000px;
+ top: 30%;
+ }
+
+ .carousel {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ transform: translateZ(-588px);
+ transform-style: preserve-3d;
+ transition: transform 1s;
+ }
+
+ .carousel__cell {
+ position: absolute;
+ width: 390px;
+ height: 320px;
+ left: 10px;
+ top: 10px;
+ border: none;
+ line-height: 116px;
+ font-size: 80px;
+ font-weight: bold;
+ color: white;
+ text-align: center;
+ }
+
+ .slides{
+ width: 390px;
+ height: 320px;
+ opacity: 90%;
+ border-radius: 8px;
+ }
+
+ .carousel__cell:nth-child(1) { transform: rotateY( 0deg) translateZ(588px); }
+ .carousel__cell:nth-child(2) { transform: rotateY( 40deg) translateZ(588px); }
+ .carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(588px); }
+ .carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(588px); }
+ .carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(588px); }
+ .carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(588px); }
+ .carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(588px); }
+ .carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(588px); }
+ .carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(588px); }
+
+ .previous-button{
+ border-radius: 8px;
+ position: absolute;
+ top: 90%;
+ left: 48%;
+ }
+ .next-button{
+ border-radius: 8px;
+ position: absolute;
+ top: 90%;
+ right: 45%;
+ }
+ /* slideshow styles */
+/* * {box-sizing: border-box;}
+body {font-family: Verdana, sans-serif;}
+.mySlides {display: none;}
+img {vertical-align: middle;}
+
+/* Slideshow container */
+/*.slideshow-container {
+ max-width: 1000px;
+ position: relative;
+ margin: auto;
+ margin-top:25rem;
+}
+
+/* Caption text */
+/*.text {
+ color: #f2f2f2;
+ font-size: 15px;
+ padding: 8px 12px;
+ position: absolute;
+ bottom: 8px;
+ width: 100%;
+ text-align: center;
+}
+
+/* Number text (1/3 etc) */
+/*.numbertext {
+ color: #f2f2f2;
+ font-size: 12px;
+ padding: 8px 12px;
+ position: absolute;
+ top: 0;
+}
+
+/* The dots/bullets/indicators */
+/*.dot {
+ height: 15px;
+ width: 15px;
+ margin: 0 2px;
+ background-color: #bbb;
+ border-radius: 50%;
+ display: inline-block;
+ transition: background-color 0.6s ease;
+}
+
+.active {
+ background-color: #717171;
+}
+
+/* Fading animation */
+/*.fade {
+ animation-name: fade;
+ animation-duration: 2s;
+}*/
+
+
+
+/* On smaller screens, decrease text size */
+@media only screen and (max-width: 100px) {
+ .text {font-size: 8px}
+}
+
+
+
+/* ---------------Cart page--------------*/
+.prods-container{
+ max-width: 650px;
+ justify-content: space-around;
+ margin: 0 auto;
+}
+
+.prods-container .gg-close-o{
+ font-size: 25px;
+ margin-left: 10px;
+ margin-right: 10px;
+ cursor: pointer;
+}
+
+.prods-container .gg-add{
+ font-size: 25px;
+ margin-left: 10px;
+ margin-right: 10px;
+ cursor: pointer;
+}
+
+.prods-container .gg-remove{
+ font-size: 25px;
+ margin-left: 10px;
+ margin-right: 10px;
+ cursor: pointer;
+}
+
+.prod-header{
+ width: 100%;
+ max-width: 650px;
+ display: flex;
+ justify-content: flex-start;
+ border-bottom: 4px solid #5a5e5f;
+ margin: 0 auto;
+ position: relative;
+}
+
+.prod-title{
+ width: 45%;
+}
+
+.price{
+ width: 15%;
+ display: flex;
+ align-items: center;
+ border-bottom: 4px solid #5a5e5f;
+}
+
+.quantity{
+ width: 30%;
+ display: flex;
+ align-items: center;
+ border-bottom: 4px solid #5a5e5f;
+}
+
+.total{
+ width: 10%;
+ border-bottom: 4px solid #5a5e5f;
+ display: flex;
+ align-items: center;
+}
+
+.prod{
+ width: 45%;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ padding: 10px 0;
+ border-bottom: 1px solid #5a5e5f;
+}
+
+.prods{
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.prod img{
+ width: 75px;
+}
+
+.basketTotalContainer{
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+ padding: 10px 0;
+}
+
+.basketTotalTitle{
+ width: 30%;
+}
+
+.basketTotal{
+ width: 10%;
+}
+
+.buy{
+ margin-bottom: 20px;
+ padding-bottom: 39px;
+}
+
+#buy-now{
+ border: none;
+ 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%;
+
+}
\ No newline at end of file
diff --git a/images/BlackShirt.jpg b/images/BlackShirt.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5c90c98a591085cf041b594cd054a9a87a6c4316
Binary files /dev/null and b/images/BlackShirt.jpg differ
diff --git a/images/BlueBlouse.jpg b/images/BlueBlouse.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ebfd330f0ca335a96c9a9d4f562c927ee99c2dc2
Binary files /dev/null and b/images/BlueBlouse.jpg differ
diff --git a/images/BlueShirt.jpg b/images/BlueShirt.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..821e7157f2f3b61754dd4991a559ad2ffe4b5eb1
Binary files /dev/null and b/images/BlueShirt.jpg differ
diff --git a/images/Browntrouser.jpg b/images/Browntrouser.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8c79aae0129ba1d3c5f167399801540b0c5178ee
Binary files /dev/null and b/images/Browntrouser.jpg differ
diff --git a/images/Cottonjeans.jpg b/images/Cottonjeans.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6c779ef9e1a2852bbc0b09234bafd6830407c44a
Binary files /dev/null and b/images/Cottonjeans.jpg differ
diff --git a/images/DenimJeans.jpg b/images/DenimJeans.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7c56899f9841aff26614ac315005872e88aea330
Binary files /dev/null and b/images/DenimJeans.jpg differ
diff --git a/images/LightBlue.jpg b/images/LightBlue.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..71b27c8a20d513e0a0190b2f95ec5ffbefeeb34b
Binary files /dev/null and b/images/LightBlue.jpg differ
diff --git a/images/OffWhiteblouse.jpg b/images/OffWhiteblouse.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9aac168766337b901af472e6e477e6605eea5204
Binary files /dev/null and b/images/OffWhiteblouse.jpg differ
diff --git a/images/WhiteShirt.jpg b/images/WhiteShirt.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..637f3ea2f2b96577815b9e21147bed49034ed193
Binary files /dev/null and b/images/WhiteShirt.jpg differ
diff --git a/images/boys-jumper.avif b/images/boys-jumper.avif
new file mode 100644
index 0000000000000000000000000000000000000000..8893f7d5930bf09d16654e8937c69e71adff5581
Binary files /dev/null and b/images/boys-jumper.avif differ
diff --git a/images/boys-jumper1.webp b/images/boys-jumper1.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9cb5b0e5fc605f80ed13ec63ee50eec04468d6a5
Binary files /dev/null and b/images/boys-jumper1.webp differ
diff --git a/images/boys-jumper2.webp b/images/boys-jumper2.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3f1c7b5f23aaf5aae14eae9a622562889958ff08
Binary files /dev/null and b/images/boys-jumper2.webp differ
diff --git a/images/boys-shoes.jpg b/images/boys-shoes.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..647b35842e8aa94f4460be5f74d17119fd9dc59f
Binary files /dev/null and b/images/boys-shoes.jpg differ
diff --git a/images/boys-shoes1.jpg b/images/boys-shoes1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..94dd4f5e88ba21fb5f47ba9130f0423a2c6dcb64
Binary files /dev/null and b/images/boys-shoes1.jpg differ
diff --git a/images/boys-shoes2.jpg b/images/boys-shoes2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7efe579be47c17d9777d79d13e0e64d784b9b7f0
Binary files /dev/null and b/images/boys-shoes2.jpg differ
diff --git a/images/brown-trouser.jpg b/images/brown-trouser.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8c79aae0129ba1d3c5f167399801540b0c5178ee
Binary files /dev/null and b/images/brown-trouser.jpg differ
diff --git a/images/creamTrouser.jpg b/images/creamTrouser.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9916dcfcff90270ba5448793674981c7af21151f
Binary files /dev/null and b/images/creamTrouser.jpg differ
diff --git a/images/girls-dress.jpg b/images/girls-dress.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4f229a85a3d86c6419df51804033db8dce26e7bd
Binary files /dev/null and b/images/girls-dress.jpg differ
diff --git a/images/girls-dress1.webp b/images/girls-dress1.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9815fb880bd66b79fdae75077776902d056a224e
Binary files /dev/null and b/images/girls-dress1.webp differ
diff --git a/images/girls-dress2.webp b/images/girls-dress2.webp
new file mode 100644
index 0000000000000000000000000000000000000000..74065b841683c1e242536ba33b53c74ed92b9457
Binary files /dev/null and b/images/girls-dress2.webp differ
diff --git a/images/girls-shoes.jpg b/images/girls-shoes.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..20388f8c7cb2f129a19d3255a5935e605e33195a
Binary files /dev/null and b/images/girls-shoes.jpg differ
diff --git a/images/girls-shoes1.jpg b/images/girls-shoes1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3049c090f455afcd7f2a873e1b3353d7ab0bed54
Binary files /dev/null and b/images/girls-shoes1.jpg differ
diff --git a/images/girls-shoes2.jpg b/images/girls-shoes2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cc90f3da63acc1caac50b75a3f87e8697d673df7
Binary files /dev/null and b/images/girls-shoes2.jpg differ
diff --git a/images/greyTrouser.jpg b/images/greyTrouser.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..30401f0cc732adc704bc5ab6281800e86356b0b1
Binary files /dev/null and b/images/greyTrouser.jpg differ
diff --git a/images/kidsClothes.jpg b/images/kidsClothes.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2d52d3fce23e65e2db22c7937a37830ccf8203a5
Binary files /dev/null and b/images/kidsClothes.jpg differ
diff --git a/images/men-jeans3.jpeg b/images/men-jeans3.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..fe615696adca0abe1f3b99aaed2ef53a157566c4
Binary files /dev/null and b/images/men-jeans3.jpeg differ
diff --git a/images/men-jeans5.webp b/images/men-jeans5.webp
new file mode 100644
index 0000000000000000000000000000000000000000..35d74aad70f31ef79470e1787ed3cf524f10e73c
Binary files /dev/null and b/images/men-jeans5.webp differ
diff --git a/images/men-shoes.jpg b/images/men-shoes.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ff8c66bdf523f330651eb3554e070c1e73a8f253
Binary files /dev/null and b/images/men-shoes.jpg differ
diff --git a/images/men-shoes1.jpg b/images/men-shoes1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9e1b396111f1314f6c710731986b1878a4314c71
Binary files /dev/null and b/images/men-shoes1.jpg differ
diff --git a/images/men-shoes2.jpg b/images/men-shoes2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d17b5107f0ea0808cb5f9badfeb3293cf3bf7bf8
Binary files /dev/null and b/images/men-shoes2.jpg differ
diff --git a/images/men-shoes3.webp b/images/men-shoes3.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c96da26318e6a2ff58c6971311fe132bd9f74ee3
Binary files /dev/null and b/images/men-shoes3.webp differ
diff --git a/images/men-shoes4.jpg b/images/men-shoes4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..afbc102dc0c9ed704bf665c1a6891b15a8d2d981
Binary files /dev/null and b/images/men-shoes4.jpg differ
diff --git a/images/men-shoes5.jpg b/images/men-shoes5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..459e414ba253d51049ec48dc7985be594f55bb1a
Binary files /dev/null and b/images/men-shoes5.jpg differ
diff --git a/images/menClothes.jpg b/images/menClothes.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..896d33cb5faa655bed125c75911ecc1a760afe2a
Binary files /dev/null and b/images/menClothes.jpg differ
diff --git a/images/modern-womens.jpg b/images/modern-womens.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..74cbc388c7a295460e6e33a9c733065f1a6ecace
Binary files /dev/null and b/images/modern-womens.jpg differ
diff --git a/images/w-c1.jpg b/images/w-c1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..387f999ce1137531b07d62f437e8b479d464a6c0
Binary files /dev/null and b/images/w-c1.jpg differ
diff --git a/images/white-blouse.jpg b/images/white-blouse.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2a69666d5aae7f114316cb53228ac54f2cc302e4
Binary files /dev/null and b/images/white-blouse.jpg differ
diff --git a/images/women-blouse.webp b/images/women-blouse.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c06cf3075ef9d1e86dd685730870fa17565d659d
Binary files /dev/null and b/images/women-blouse.webp differ
diff --git a/images/women-blouse1.webp b/images/women-blouse1.webp
new file mode 100644
index 0000000000000000000000000000000000000000..44410b43a3d0f9ba41558f2ba448de8fc16eacf8
Binary files /dev/null and b/images/women-blouse1.webp differ
diff --git a/images/women-clothing.jpg b/images/women-clothing.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f9501b7b26ccc9bf7fd30cbdd1756debc13cc470
Binary files /dev/null and b/images/women-clothing.jpg differ
diff --git a/images/women-shoes.jpg b/images/women-shoes.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b665bd0b874303e65aba5ea445d958ee17d094f0
Binary files /dev/null and b/images/women-shoes.jpg differ
diff --git a/images/women-shoes1.jpeg b/images/women-shoes1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..1ad9b2eced26f8dd880020144bd62b9813359751
Binary files /dev/null and b/images/women-shoes1.jpeg differ
diff --git a/images/women-shoes2.webp b/images/women-shoes2.webp
new file mode 100644
index 0000000000000000000000000000000000000000..99303419869a9c81906792122626f0d83b2bee92
Binary files /dev/null and b/images/women-shoes2.webp differ
diff --git a/images/women-shoes3.jpg b/images/women-shoes3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c47ab9979edf8cc1367dfbe5b817fc997ed2559f
Binary files /dev/null and b/images/women-shoes3.jpg differ
diff --git a/images/women-shoes4.jpeg b/images/women-shoes4.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..e23e97eadd2c350d2ec077d9f592f5361621c0c1
Binary files /dev/null and b/images/women-shoes4.jpeg differ
diff --git a/images/women-shoes5.webp b/images/women-shoes5.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4ca327e920d2d3977e718c1829811acb7fa5a1e6
Binary files /dev/null and b/images/women-shoes5.webp differ
diff --git a/images/women-trouser1.webp b/images/women-trouser1.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6d82ec3095974d6d9cbfae71c26a82d1fb2e4c42
Binary files /dev/null and b/images/women-trouser1.webp differ
diff --git a/images/women-trouser2.jpg b/images/women-trouser2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..83b1b60af2d0e0f5b041b70f7f977e99a70b89e8
Binary files /dev/null and b/images/women-trouser2.jpg differ
diff --git a/images/womenClothes.avif b/images/womenClothes.avif
new file mode 100644
index 0000000000000000000000000000000000000000..8f8d0647d04d322184cc73642c898dcec21458ca
Binary files /dev/null and b/images/womenClothes.avif differ
diff --git a/js/dbAPI.js b/js/dbAPI.js
new file mode 100644
index 0000000000000000000000000000000000000000..56c6128bc69dda91a5188d3efb857b7562f6970e
--- /dev/null
+++ b/js/dbAPI.js
@@ -0,0 +1,16 @@
+var http = require('http');
+var url = require('url');
+var fs = require('fs');
+http.createServer(function (req, res) {
+ var q = url.parse(req.url, true);
+ var filename = "." + q.pathname;
+ fs.readFile(filename, function(err, data) {
+ if(err){
+ res.writeHead(404, {'Content-type': 'text/html'});
+ return res.end("404 Not Found");
+ }
+ res.writeHead(200, {'Content-Type': 'text/html'});
+ res.write(data);
+ return res.end();
+ });
+}).listen(8080);
\ No newline at end of file
diff --git a/js/payment.js b/js/payment.js
new file mode 100644
index 0000000000000000000000000000000000000000..49c06eed99356106386c0a7e12ed6e3b3d62fdc9
--- /dev/null
+++ b/js/payment.js
@@ -0,0 +1,101 @@
+//const response = require("koa/lib/response");
+
+
+/**
+ * Google Pay API Configuration
+ */
+const tokenizationSpecification = {
+ type: 'PAYMENT_GATEWAY',
+ parameters: {
+ gateway: 'example',
+ gatewayMerchantId: 'gatewayMerchantId',
+ }
+}
+
+
+const cardPaymentMethod = {
+ type: 'CARD' ,
+ tokenizationSpecification: tokenizationSpecification,
+ parameters: {
+ allowedCardNetworks: ['VISA', 'MASTERCARD'],
+ allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+ }
+};
+const googlePayConfiguration = {
+ apiVersion: 2,
+ apiVersionMinor: 0,
+ allowedPaymentMethods: [cardPaymentMethod],
+}
+
+let googlePayClient;
+
+/**
+ * Defines and handles the main operations related to the integration of Google Pay.
+ * This function is executed when the Google Pay library scrpit has finished loading.
+ */
+
+function onGooglePayLoaded(){
+ googlePayClient = new google.payments.api.PaymentsClient({
+ environment: 'TEST',
+ });
+
+ googlePayClient.isReadyToPay(googlePayConfiguration)
+ .then(response => {
+ if (response.result) {
+ createAndAddButton();
+ }else{
+ //The current user cannot pay using GPay. Offer another
+ // method to pay.
+ }
+ })
+ .catch(error => console.error('isReadyToPay error: ', error));
+}
+
+
+/**
+ * Handles the creation of the button to pay with Google Pay.
+ * Once created, this button is appended to the DOM, under the element
+ * "buy-now".
+ */
+function createAndAddButton() {
+ const googlePayButton = googlePayClient.createButton({
+ onClick: onGooglePayButtonClicked,
+ });
+
+ document.getElementById('buy-now').appendChild(googlePayButton);
+}
+
+/**
+ * Handles the click of the Google Pay button.
+ * Takes care of defining the payment data request in order to load
+ * the user payments methods available.
+ */
+
+function onGooglePayButtonClicked() {
+ const paymentDataRequest = { ...googlePayConfiguration };
+ paymentDataRequest.merchantInfo = {
+ merchantId: 'BCR2DN4T3G6PVU2S',
+ merchantName: 'Your Fashion',
+ };
+
+ paymentDataRequest.transactionInfo = {
+ totalPriceStatus: 'FINAL',
+ totalPrice: localStorage.getItem('totalCost'), //item.inCart * item.price
+ currencyCode: 'GBP',
+ countryCode: 'UK',
+ };
+
+ googlePayClient.loadPaymentData(paymentDataRequest)
+ .then(paymentData => processPaymentData(paymentData))
+ .catch(error => console.error('loadPaymentData error: ', error));
+}
+
+function processPaymentData(paymentData) {
+ fetch(orderEndpointURL, {
+ method: 'POST',
+ headers: {
+ 'Content-Type' : 'application/json'
+ },
+ body: paymentData
+ })
+}
\ No newline at end of file
diff --git a/js/product-cards.js b/js/product-cards.js
new file mode 100644
index 0000000000000000000000000000000000000000..9872568a6a269b82d52755c4985a6a8363c4c2a8
--- /dev/null
+++ b/js/product-cards.js
@@ -0,0 +1,20 @@
+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');
+ });
+ });
+});
\ No newline at end of file
diff --git a/js/shopping-basket.js b/js/shopping-basket.js
new file mode 100644
index 0000000000000000000000000000000000000000..de9c0f0b1c145818b4be615de6cd76783a366652
--- /dev/null
+++ b/js/shopping-basket.js
@@ -0,0 +1,258 @@
+
+
+const carts = document.querySelectorAll('.add-cart-btn');
+
+const products = [
+ {
+ name: 'Blue Shirt',
+ tag: 'BlueShirt',
+ price: 29.99,
+ inCart: 0
+ },
+ {
+ name: 'Black Shirt',
+ tag: 'BlackShirt',
+ price: 23.99,
+ inCart: 0
+ },
+ {
+ name: 'White Shirt',
+ tag: 'WhiteShirt',
+ price: 89.99,
+ inCart: 0
+ },
+ {
+ name: 'Denim jeans',
+ tag: 'DenimJeans',
+ price: 150.00,
+ inCart: 0
+ },
+ {
+ name: 'Light blue jeans',
+ tag: 'LightBlue',
+ price: 50.00,
+ inCart: 0
+ },
+ {
+ name: 'Cotton jeans',
+ tag: 'Cottonjeans',
+ price: 200.00,
+ inCart: 0
+ },
+ {
+ name: 'Blue blouse',
+ tag: 'Blueblouse',
+ price: 59.99,
+ inCart: 0
+ },
+ {
+ name: 'Off White blouse',
+ tag: 'OffWhiteblouse',
+ price: 73.99,
+ inCart: 0
+ },
+ {
+ name: 'White blouse',
+ tag: 'Whiteblouse',
+ price: 89.99,
+ inCart: 0
+ },
+ {
+ name: 'Brown trouser',
+ tag: 'Browntrouser',
+ price: 140.00,
+ inCart: 0
+ },
+ {
+ name: 'Cream trouser',
+ tag: 'Creamtrouser',
+ price: 59.00,
+ inCart: 0
+ },
+ {
+ name: 'Grey trouser',
+ tag: 'Greytrouser',
+ price: 201.00,
+ inCart: 0
+ }
+
+]
+
+
+for (let i = 0; i < carts.length; i++) {
+ carts[i].addEventListener('click', () => {
+ cardsNumbers(products[i]);
+ totalCost(products[i]);
+ });
+}
+
+function onLoadCardsNumbers() {
+ let productNumber = localStorage.getItem('cardsNumbers');
+ if (productNumber) {
+ document.querySelector('.add-cart span').textContent = productNumber;
+ }
+}
+
+function cardsNumbers(product) {
+ let productNumber = localStorage.getItem('cardsNumbers');
+ productNumber = parseInt(productNumber) || 0;
+ if (productNumber) {
+ localStorage.setItem('cardsNumbers', productNumber + 1);
+ document.querySelector('.add-cart span').textContent = productNumber + 1;
+ } else {
+ localStorage.setItem('cardsNumbers', 1);
+ document.querySelector('.add-cart span').textContent = 1;
+ }
+
+ setItems(product);
+}
+
+function generateProductId() {
+ return Math.random().toString(36).substr(2, 9);
+}
+
+function setItems(product) {
+ let cartItems = localStorage.getItem('productsInCart');
+ cartItems = JSON.parse(cartItems);
+
+ if (cartItems != null) {
+ if (cartItems[product.tag] == undefined) {
+ cartItems = {
+ ...cartItems,
+ [product.tag]: {
+ ...product,
+ id: generateProductId() // Adds a unique identifier to each product
+ }
+ };
+ }
+ cartItems[product.tag].inCart += 1;
+ } else {
+ product.inCart = 1;
+ product.id = generateProductId();
+ cartItems = {
+ [product.tag]: product
+ };
+ }
+
+ localStorage.setItem('productsInCart', JSON.stringify(cartItems));
+}
+
+
+function displayCart() {
+ let cartItems = localStorage.getItem('productsInCart');
+ cartItems = JSON.parse(cartItems);
+
+ let productContainer = document.querySelector('.prods');
+ let cartCost = 0; // Initialize cartCost to 0
+
+
+
+ if (cartItems && productContainer) {
+ productContainer.innerHTML = '';
+
+ Object.values(cartItems).map((item, index) => {
+ const closeBtnId = `close-btn-${item.id}`; // Update the close button's unique identifier
+ const addBtnId = `add-btn-${item.id}`;
+ const removeBtnId = `remove-btn-${item.id}`;
+ productContainer.innerHTML += `
+ <div class="prod">
+ <link href='https://unpkg.com/css.gg@2.0.0/icons/css/close-o.css' rel='stylesheet'>
+ <i class="gg-close-o ${closeBtnId}"></i>
+ <img src="./images/${item.tag}.jpg">
+ <span>${item.name}</span>
+ </div>
+ <div class="price">£${item.price}</div>
+ <div class="quantity">
+ <link href='https://unpkg.com/css.gg@2.0.0/icons/css/add.css' rel='stylesheet'>
+ <i class="gg-add ${addBtnId}"></i>
+ <span>${item.inCart}</span>
+ <link href='https://unpkg.com/css.gg@2.0.0/icons/css/remove.css' rel='stylesheet'>
+ <i class="gg-remove ${removeBtnId}"></i>
+ </div>
+ <div class="total">
+ £${item.inCart * item.price}
+ </div>
+ `;
+
+ // Increment cartCost for each item in the cart
+ cartCost += item.inCart * item.price;
+ console.log('clicked 00');
+ // Add event listeners for add and remove buttons
+
+
+ document.querySelector(`.${removeBtnId}`).addEventListener('click', () => {
+ // Decrease the quantity of the selected item, but ensure it doesn't go below 1
+ cartItems[item.tag].inCart = Math.max(cartItems[item.tag].inCart - 1, 1);
+ // Update localStorage and redisplay the cart
+ localStorage.setItem('productsInCart', JSON.stringify(cartItems));
+ displayCart();
+ });
+ });
+
+ productContainer.innerHTML += `
+ <div class="basketTotalContainer">
+ <h4 class="basketTotalTitle">
+ Total
+ </h4>
+ <h4 class="basketTotal">
+ £${cartCost}
+ </h4>
+ </div>
+ `;
+ }
+
+ // Update localStorage with the recalculated total cost
+ localStorage.setItem('totalCost', cartCost.toString());
+
+ let removeItems = document.getElementsByClassName('gg-close-o');
+
+ for (let i = 0; i < removeItems.length; i++) {
+ let button = removeItems[i];
+ button.addEventListener('click', (event) => {
+ // Get the unique identifier of the clicked close button
+ const productId = event.target.className.split(' ').find(cls => cls.startsWith('close-btn-')).split('-')[2];
+
+ // Remove the corresponding product from the cartItems
+ const updatedCartItems = { ...cartItems };
+ for (const key in updatedCartItems) {
+ if (updatedCartItems[key].id === productId) {
+ cartCost -= updatedCartItems[key].inCart * updatedCartItems[key].price;
+ delete updatedCartItems[key];
+ break;
+ }
+ }
+
+ // Update localStorage and display the updated cart
+ localStorage.setItem('productsInCart', JSON.stringify(updatedCartItems));
+ localStorage.setItem('totalCost', cartCost.toString());
+ displayCart();
+ });
+ }
+
+ let addItem = document.getElementsByClassName('gg-add');
+ for (let i = 0; i < addItem.length; i++) {
+ let button = addItem[i];
+ button.addEventListener('click', (event) => {
+ // Get the unique identifier of the clicked add button
+ const productId = event.target.className.split(' ').find(cls => cls.startsWith('add-btn-')).split('-')[2];
+
+ //Increaments the quantity of the selected item
+ const productToUpdate = Object.values(cartItems).find(item => item.id === productId);
+ if (productToUpdate) {
+ productToUpdate.inCart += 1;
+ }
+
+ // Update localStorage and display the updated cart
+ localStorage.setItem('productsInCart', JSON.stringify(cartItems));
+ localStorage.setItem('totalCost', cartCost.toString());
+ displayCart();
+ });
+ }
+}
+
+
+
+onLoadCardsNumbers();
+displayCart();
+
+
diff --git a/js/slides.js b/js/slides.js
new file mode 100644
index 0000000000000000000000000000000000000000..c60e5fc469ba699c0f3b791462677ab9a51428da
--- /dev/null
+++ b/js/slides.js
@@ -0,0 +1,63 @@
+/*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;
+var selectedIndex = 0;
+
+function rotateCarousel() {
+ var angle = selectedIndex / cellCount * -360;
+ carousel.style.transform = 'translateZ(-288px) rotateY(' + angle + 'deg)';
+}
+
+var prevButton = document.querySelector('.previous-button');
+prevButton.addEventListener( 'click', function() {
+ selectedIndex--;
+ rotateCarousel();
+});
+
+var nextButton = document.querySelector('.next-button');
+nextButton.addEventListener( 'click', function() {
+ selectedIndex++;
+ rotateCarousel();
+});
+
+let isDragging = false;
+let initialX;
+
+//const carousel = document.getElementById('carousel');
+
+carousel.addEventListener('touchstart', (e) => {
+ isDragging = true;
+ initialX = e.touches[0].clientX;
+});
+
+carousel.addEventListener('touchmove', (e) => {
+ if (!isDragging) return;
+
+ const deltaX = e.touches[0].clientX - initialX;
+ const rotation = (deltaX / carousel.clientWidth) * 360;
+
+ carousel.style.transform = `rotateY(${rotation}deg)`;
+});
+
+carousel.addEventListener('touchend', () => {
+ isDragging = false;
+});
\ No newline at end of file
diff --git a/products.js b/products.js
index 45c7cdc3eeb411fee4af468e13ade93dbe3a5fba..cbccd6f61fd385895e6154baefc7828bc3a6dcbd 100644
--- a/products.js
+++ b/products.js
@@ -1,12 +1,12 @@
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'
+ Image: '/images/BlueShirt.jpg'
},
{
name: 'Black Shirt',
@@ -14,7 +14,7 @@ exports.productList = [
tag: 'BlackShirt',
price: 23.99,
inCart: 0,
- Image: 'images/BlackShirt.jpg',
+ Image: '/images/BlackShirt.jpg',
},
{
@@ -23,7 +23,7 @@ exports.productList = [
tag: 'WhiteShirt',
price: 89.99,
inCart: 0,
- Image: 'images/WhiteShirt.jpg'
+ Image: '/images/WhiteShirt.jpg'
},
{
name: 'Denim jeans',
@@ -31,7 +31,7 @@ exports.productList = [
tag: 'DenimJeans',
price: 150.00,
inCart: 0,
- Image: 'images/DenimJeans.jpg'
+ Image: '/images/DenimJeans.jpg'
},
{
name: 'Light blue jeans',
@@ -39,7 +39,7 @@ exports.productList = [
tag: 'LightBlue',
price: 50.00,
inCart: 0,
- Image: 'images/LightBlue.jpg'
+ Image: '/images/LightBlue.jpg'
},
{
name: 'Cotton jeans',
@@ -47,17 +47,17 @@ exports.productList = [
tag: 'Cottonjeans',
price: 200.00,
inCart: 0,
- Image: 'images/Cottonjeans.jpg'
- }
-],
-[
+ Image: '/images/Cottonjeans.jpg'
+ },
+
+
{
name: 'Blue blouse',
description: 'This is a Blue blouse',
tag: 'Blueblouse',
price: 59.99,
inCart: 0,
- Image: 'images/BlueBlouse.jpg'
+ Image: '/images/BlueBlouse.jpg'
},
{
name: 'Off White blouse',
@@ -65,7 +65,7 @@ exports.productList = [
tag: 'OffWhiteblouse',
price: 73.99,
inCart: 0,
- Image: 'images/OffWhiteblouse.jpg'
+ Image: '/images/OffWhiteblouse.jpg'
},
{
name: 'White blouse',
@@ -73,7 +73,7 @@ exports.productList = [
tag: 'Whiteblouse',
price: 89.99,
inCart: 0,
- Image: 'images/white-blouse.jpg'
+ Image: '/images/white-blouse.jpg'
},
{
name: 'Brown trouser',
@@ -81,7 +81,7 @@ exports.productList = [
tag: 'Browntrouser',
price: 140.00,
inCart: 0,
- Image: 'images/brown-trouser.jpg'
+ Image: '/images/brown-trouser.jpg'
},
{
name: 'Cream trouser',
@@ -89,7 +89,7 @@ exports.productList = [
tag: 'Creamtrouser',
price: 59.00,
inCart: 0,
- Image: 'images/creamTrouser.jpg'
+ Image: '/images/creamTrouser.jpg'
},
{
name: 'Grey trouser',
@@ -97,10 +97,10 @@ exports.productList = [
tag: 'Greytrouser',
price: 201.00,
inCart: 0,
- Image: 'images/greyTrouser.jpg'
- }
-],
-[
+ 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.',
@@ -149,9 +149,9 @@ exports.productList = [
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
+ },
+
+ // 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.',
@@ -200,9 +200,9 @@ exports.productList = [
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.',
@@ -251,9 +251,9 @@ exports.productList = [
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.',
@@ -303,7 +303,7 @@ exports.productList = [
inCart: 0,
Image:'' //'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
}
-]
+
];
//module.exports = productList;
\ No newline at end of file
diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index 42295eb1c924a179f99aa1b88cbbe6599513c756..e822799acd89f791849c9df637a7774367fd8f86 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -11,78 +11,71 @@ async function getProducts() {
}
const data = await response.json(); // Parse response body as JSON
products = data.products;
-
+ //console.log(data.products);
+
// Split products into pages and sections
- const numPages = 6;
- const numSectionsPerPage = 6;
- products = chunckArray(products, numPages * numSectionsPerPage);
-
+ // const numPages = 6;
+ //const numSectionsPerPage = 6;
+ // products = ({tag, name}) => products.find(a => a.some(o => o.tag === tag || o.name === name));
+ //let getArray = ({tag, name}) => products.find(a => a.some(o => o.tag === tag || o.name === name));
populateProducts();
} catch (error) {
console.error('Error fetching products:', error);
}
+ console.log('Products:', products);
}
getProducts();
//splits an array into chuncks
-function chunckArray(arr, chunckSize) {
- const chunckedArray = [];
- for (let i = 0; i < arr.length; i += chunckSize) {
- chunckedArray.push(arr.slice(i, i + chunckSize));
+/* function chunkArray(arr, chunkSize) {
+ const chunkedArray = [];
+ for (let i = 0; i < arr.length; i += chunkSize) {
+ chunkedArray.push(arr.slice(i, i + chunkSize));
}
- return chunckedArray;
-}
+ return chunkedArray;
+} */
function populateProducts() {
- for (let page = 0; page < products.length; page++) {
- for (let section = 0; section < products[page].length; section++) {
- const container = document.querySelector('.container-' + (page + 1) + '-' + (section + 1));
-
- const productsHtml = products[page][section].map((product, i) => {
-
- return (
- `
-
- <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="${product.description}">
- </div>
- <div class="popup-view">
- <div class="popup-card">
+ const container = document.querySelector('.container');
+
+ if (container) {
+ const productsHtml = products.map(product => `
+ <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}" alt="${product.description}">
+ <img src="${product.Image}" 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>
+ <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>
-
- `
- )
+ </div>
+ </div>
+ `).join('');
+ container.innerHTML = productsHtml;
+ addCartActions(container);
+ }
+}
- });
- if (container) {
- container.innerHTML = productsHtml.toString();
- addCartActions(container);
- }
- }
- }
-}
+
+
@@ -166,10 +159,11 @@ function setItems(product) {
}
let cartItems = localStorage.getItem('productsInCart');
+
cartItems = JSON.parse(cartItems);
-
+
const productTag = product.tag; // Get the tag property once
-
+
if (cartItems != null) {
if (cartItems[productTag] == undefined) {
cartItems = {
@@ -188,24 +182,23 @@ function setItems(product) {
[productTag]: product
};
}
-
+
localStorage.setItem('productsInCart', JSON.stringify(cartItems));
}
-function totalCost(products) {
- let total = 0;
- for (let i = 0; i < products.length; i++) {
- total += products[i].inCart * products[i].price;
- }
+function totalCost() {
+ let cartItems = localStorage.getItem('productsInCart');
+ cartItems = JSON.parse(cartItems) || {};
+ let total = Object.values(cartItems).reduce((acc, item) => acc + (item.inCart * item.price), 0);
+ localStorage.setItem('totalCost', total.toString());
return total;
}
function displayCart() {
- let cartItems = localStorage.getItem('productsInCart');
- cartItems = JSON.parse(cartItems);
-
+ let cartItems = JSON.parse(localStorage.getItem('productsInCart')) || {};
+
let productContainer = document.querySelector('.prods');
let cartCost = 0; // Initialize cartCost to 0
@@ -218,13 +211,13 @@ function displayCart() {
const closeBtnId = `close-btn-${item.id}`; // Update the close button's unique identifier
const addBtnId = `add-btn-${item.id}`;
const removeBtnId = `remove-btn-${item.id}`;
-
- const imageUrl = item.tag ? `/images/${item.Image}.jpg` : 'default-image.jpg';
+
+ //const imageUrl = item.tag ? `/images/${item.tag}.jpg` : 'default-image.jpg';
productContainer.innerHTML += `
<div class="prod">
<link href='https://unpkg.com/css.gg@2.0.0/icons/css/close-o.css' rel='stylesheet'>
<i class="gg-close-o ${closeBtnId}"></i>
- <img src="./images/${imageUrl}">
+ <img src="./images/${item.tag}.jpg">
<span>${item.name}</span>
</div>
<div class="price">£${item.price}</div>
diff --git a/public/style.css b/public/style.css
index 3e3ff29da19856f058f0e85bd61fa98b0ba8bde0..8ee3929bf68c2e2e8de014cb3df8608820bb4c04 100644
--- a/public/style.css
+++ b/public/style.css
@@ -172,7 +172,7 @@ header{
top: 200px;
}
-.container-1-1, .container-1-2, .container-1-3, .container-1-4, .container-1-5, .container-1-6{
+.container{
position: relative;
display: flex;
flex-wrap: wrap;
diff --git a/server.js b/server.js
index ecfaf87187fad78a0e52102682314ae405e5e020..d060f1ab86ac5e8e53f2738c7ae145a8351bf8b0 100644
--- a/server.js
+++ b/server.js
@@ -10,6 +10,7 @@ app.set('view engine', 'hbs');
app.use('/', require('./routes/pages'));
app.use('/products', require('./routes/productsRouteFile'));
+app.use('/images', express.static('./public/images'));
app.listen(5000, () => {
console.log("Server is listening on port 5000");
diff --git a/views/kids.hbs b/views/kids.hbs
index 2704a0e989dcfae1235eefe3e0065ec0fb481f5e..7b2051ad5ca93d6c522b5c5500b32a3717471a0a 100644
--- a/views/kids.hbs
+++ b/views/kids.hbs
@@ -67,7 +67,7 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container-1-3">
+ <div class="container">
{{!-- <div class="product">
<div class="product-card">
<h2 class="name">Girls dress</h2>
diff --git a/views/men-shoes.hbs b/views/men-shoes.hbs
index dd40d99e95f9fa2cd88bc151676d9444cfb39c01..6a9bde244c6008b0c3660b5e2e0f6845397c5619 100644
--- a/views/men-shoes.hbs
+++ b/views/men-shoes.hbs
@@ -66,7 +66,7 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container-1-4">
+ <div class="container">
{{!-- <div class="product">
<div class="product-card">
<h2 class="name">Men Shoes</h2>
diff --git a/views/men.hbs b/views/men.hbs
index f3c1cf8c824eef1dfc5124e4eb64cd85930fae3b..f9038097a473f5b1606b784d666e97eafbe35351 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -58,7 +58,9 @@
</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">
@@ -70,7 +72,7 @@
</header>
<br>
<div id="characterList" class="characterLists"></div>
- <div class="container-1-1" id="container"></div>
+ <div class="container" id="container"></div>
diff --git a/views/women.hbs b/views/women.hbs
index 0efca6a49a868fa0b9e4a62a30c04064030e5050..7024c1825cec9209e88f70d0804518b7613ed7c8 100644
--- a/views/women.hbs
+++ b/views/women.hbs
@@ -66,7 +66,7 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container-1-2"></div>
+ <div class="container"></div>
<script src="/product-cards.js"></script>