diff --git a/README.md b/README.md index 8d87b96..0da2d34 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,20 @@ +# ID-FED-Ahmed-Assignment-2 + # VOGUEVALLEY E-commerce Website + ### By Ahmed and Diontae Live Site: [ace-clothing.netlify.app](https://ace-clothing.netlify.app) -Ace Clothing offers a diverse range of products including clothing, perfumes, cosmetics, and accessories. With a gamification system and an AI chatbot, we aim to provide a unique and engaging shopping experience. - ## Design Process -Inspired by the need for a captivating online shopping experience, we blended modern web design with retro arcade elements. The design echoes a balance of nostalgia and modernity, tailored for users seeking an interactive and rewarding online shopping journey. +For this project we decieded to make a responsive e-commerce webstie called VogueValley. This online e-commerce shop allows users to see their favourite type of clothing and add them to cart if they want to buy them. VogueValley offers a diverse range of clothing such as pants t-shirt outerwear and even accessories. With a gamification system and an AI chatbot, we aim to provide a unique and engaging shopping experience. + +If you want to buy trending clothes in the market to impress you friends on your fasion sense this is the store where you should be buying your clothes. We have a wide range of clothes avaiblable and they all are very affordable.If you do not know how to match the clothes fred not, you can ask our Advanced Ai bot which will help you to choose the perfect fit for you! -Wireframe: [Figma Design](https://www.figma.com/file/98u1fmfw0utAd8NBSyRPS3/Error404-FED-Assignment?type=design&node-id=0%3A1&mode=design&t=nagg2nML9COIxDar-1) +This website meant for people who want to buy clothes and look better than all of thier friends.Our store will always have products that are on offer. We have got all the type of accesories such as sunglasses, hat,belts and even gloves for you to buy. You can buy all your products from 1 store. + +Wireframe Figma Design : https://www.figma.com/file/OHVeN2RdhKqYQnpTSjVxTW/FED-Assignment2?type=design&mode=design&t=Mfd5BDWml9jXUcGh-1 ## Features @@ -17,16 +22,38 @@ Wireframe: [Figma Design](https://www.figma.com/file/98u1fmfw0utAd8NBSyRPS3/Erro - **AI Chatbot**: Offers product recommendations, order tracking, and customer support. - **Responsive Design**: Ensures a seamless experience across all devices. - **User Reviews and Ratings**: Engage with the community through feedback. -- **Advanced Search and Filters**: Easily find products with robust sorting features. +- **Advanced Search and Filters**: Easily find products with robust sorting features.(you can sort by gender by type of clothing and even by price) + +## Features left to implement + +- Make it such that users can go to the check out page and actually buy the item. ## Technologies Used - HTML5 & CSS3 for markup and styling. -- Vite + React for efficient, modern web development. +- JS for the main contents and function - RESTDB for database management. - Lottie for engaging animations. - Bootstrap for responsive design. +## TESTING + +1. Login page: + i. Go to the login page + ii. Try to login to the page without entering a username and see if it send you a message to fill up the username + iii. Try to login to the page without entering a password and see if it send you a message to fill up the password + iv. Try to put in a valid username and password and press login. The website should promt you saying that the account doesnt exist + v. Try to put a already used account in the sign up page, the page will prompt you that the accoutn already exist. + + When you first launch the website you will be led to the login page where you either log in or sign up for an account. When you log in you will be see a promt welcoming you. + + Once you are in the home page you will see an welcome animation. After the animation ends you will be able to see the navigations at the top including the company name, popular products which are products that are often bought, products that have and offer and lastly the footer at the bottom with quick links a small about us description, the opening hours and the facebook and instagram page. + + In the products page you will be able to see all the products that are available in our store and the filter section which allows you to choose which type of clothings you want, which price range and which gender you want.When you press on the product car it will give you an enlarged version of the product so that you can see better and from there you will be able to add to card. + + In the cart page you will be able to see all the products that you have bought its price and pictures. + + In every page at the bottom of your screen you will be able to see that small icon which sybolizes the ai chat bot which you can talk to, to help you pick the products for you. ## Acknowledgments @@ -34,15 +61,18 @@ Inspiration drawn from Uniqlo and various website interfaces. Special thanks to ## Project Team -Diontae & Ahmed - For the creation and development of the VOGUE VALLEY e-commerce platform. - +Diontae & Ahmed - For the creation and development of the VOGUE VALLEY e-commerce platform from scratch. ## Sources + Product images: UNIQLO SINGAPORE ONLINE - THE LARGEST PRODUCT LINEUPS AVAILABLE -Navigation bar : https://chat.openai.com/ +Navigation bar : https://chat.openai.com/ Login form: 67 Bootstrap Login Forms (freefrontend.com) -Inspiration: UNIQLO SINGAPORE ONLINE - THE LARGEST PRODUCT LINEUPS AVAILABLE, https://chat.openai.com/ +Inspiration: UNIQLO SINGAPORE ONLINE - THE LARGEST PRODUCT LINEUPS AVAILABLE, https://chat.openai.com/ + +## Media +The photos used from this website are from : https://www.uniqlo.com/sg/en/?ds_rl=1302255&gad_source=1&ds_rl=1302255&gclid=CjwKCAiAt5euBhB9EiwAdkXWO5z6tn4TNMFWqaml3vCfzrMIQsBeAkCaE95r-TFbkkb6a1xR7E41sRoC7ikQAvD_BwE&gclsrc=aw.ds diff --git a/css/aichat.css b/css/aichat.css index 11eabcf..67ee0b6 100644 --- a/css/aichat.css +++ b/css/aichat.css @@ -1,5 +1,5 @@ /* Import Google font - Poppins */ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); * { margin: 0; padding: 0; @@ -30,14 +30,14 @@ body.show-chatbot .chatbot-toggler { position: absolute; } .chatbot-toggler span:last-child, -body.show-chatbot .chatbot-toggler span:first-child { +body.show-chatbot .chatbot-toggler span:first-child { opacity: 0; } body.show-chatbot .chatbot-toggler span:last-child { opacity: 1; } .chatbot { - z-index: 3; + z-index: 9998; position: fixed; right: 35px; bottom: 90px; @@ -49,8 +49,8 @@ body.show-chatbot .chatbot-toggler span:last-child { pointer-events: none; transform: scale(0.5); transform-origin: bottom right; - box-shadow: 0 0 128px 0 rgba(0,0,0,0.1), - 0 32px 64px -48px rgba(0,0,0,0.5); + box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), + 0 32px 64px -48px rgba(0, 0, 0, 0.5); transition: all 0.1s ease; } body.show-chatbot .chatbot { @@ -64,7 +64,7 @@ body.show-chatbot .chatbot { text-align: center; color: #fff; background: #724ae8; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .chatbot header span { position: absolute; @@ -173,8 +173,6 @@ header h2 { visibility: visible; } - - @media (max-width: 490px) { .chatbot-toggler { right: 20px; @@ -197,4 +195,4 @@ header h2 { .chatbot header span { display: block; } -} \ No newline at end of file +} diff --git a/css/cart.css b/css/cart.css index f72320c..20a4821 100644 --- a/css/cart.css +++ b/css/cart.css @@ -2,6 +2,7 @@ body { margin: 0; padding: 0; font-family: "Arial", sans-serif; + overflow-x: hidden; /* Prevent horizontal scrolling */ } .hotbar { @@ -63,78 +64,3 @@ body { z-index: 3; margin-top: 5px; /* Adjust the margin-top to move it closer */ } -.categories .dropdown a { - display: block; - padding: 10px 15px; - color: #333; - text-decoration: none; - transition: background-color 0.3s ease; -} - -.categories .dropdown a:hover { - background-color: #9e9e9e; - color: #555; /* Change the color on hover if needed */ -} - -.categories:hover .dropdown { - display: block; -} - -.search-bar { - padding: 5px; - margin: 0 10px; -} - -.chatbot-icon, -.redeem-icon, -.cart-icon, -.account-icon { - background: transparent; - border: none; - color: #ffffff; - cursor: pointer; - margin: 0 5px; - font-size: 25px; -} - -.background-image { - position: relative; - z-index: 1; - background: url("https://png.pngtree.com/thumb_back/fh260/background/20200731/pngtree-blue-carbon-background-with-sport-style-and-golden-light-image_371487.jpg") - no-repeat; - background-size: cover; - height: 700px; /* Adjust as needed */ -} -/*footer*/ -footer { - background-color: #333; - color: #fff; - padding: 20px; - text-align: center; -} - -footer img { - width: 50px; - height: 50px; -} - -.quick-links { - list-style: none; - padding: 0; - display: flex; - justify-content: center; -} - -.quick-links li { - margin: 0 10px; -} - -.social-icons { - margin-top: 20px; -} - -.social-icon { - color: #fff; - text-decoration: none; - margin: 0 10px; -} diff --git a/css/footer.css b/css/footer.css index cec98de..1805fb1 100644 --- a/css/footer.css +++ b/css/footer.css @@ -3,6 +3,7 @@ footer { color: #ffffff; padding: 80px 20px; /* Increase padding to make the footer taller */ text-align: center; + justify-content: center; display: flex; flex-direction: column; justify-content: space-between; @@ -28,18 +29,20 @@ footer { .links { display: flex; flex-wrap: wrap; - justify-content: space-around; + justify-content: center; /* Center the quick links horizontally */ } .links a { background: #242048; color: #a2b5cd; - padding: 10px 15px; + padding: 10px; border: none; border-radius: 5px; cursor: pointer; margin: 5px; transition: background 0.5s ease-in-out, opacity 0.5s ease-in-out; + width: 100%; /* Ensure each link takes up the full width of its container */ + box-sizing: border-box; /* Include padding in the width calculation */ } .links a:hover { @@ -49,7 +52,7 @@ footer { .social-icons { display: flex; - justify-content: space-around; + justify-content: center; } .social-icons img { @@ -65,7 +68,8 @@ footer { .legal { margin-top: 60px; /* Add spacing between content and "All rights reserved" text */ - margin-bottom: 20px; /* Add some space below the text */ + margin-left: auto; /* Add this line to center the legal info */ + margin-right: auto; /* Add this line to center the legal info */ font-size: 12px; - text-align: right; /* Center the text */ + text-align: center; } diff --git a/css/home.css b/css/home.css index 3a3627a..1042001 100644 --- a/css/home.css +++ b/css/home.css @@ -2,6 +2,8 @@ body { margin: 0; padding: 0; font-family: "Arial", sans-serif; + height: 100vh; + overflow-x: hidden; /* Prevent horizontal scrolling */ } .hotbar { @@ -31,85 +33,18 @@ body { height: 50px; } -.categories { - position: relative; -} - -.categories span { - cursor: pointer; -} - -.dropdown { - display: none; - position: absolute; - top: 100%; - left: 0; - background-color: #fff; - padding: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - transition: display 5s ease; /* Adjust the duration as needed */ - z-index: 3; -} - -.categories .dropdown { - display: none; - position: absolute; - top: 100%; - left: 0; - background-color: #fff; - padding: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - transition: display 5s ease; /* Adjust the duration as needed */ - z-index: 3; - margin-top: 5px; /* Adjust the margin-top to move it closer */ -} -.categories .dropdown a { - display: block; - padding: 10px 15px; - color: #333; - text-decoration: none; - transition: background-color 0.3s ease; -} - -.categories .dropdown a:hover { - background-color: #9e9e9e; - color: #555; /* Change the color on hover if needed */ -} - -.categories:hover .dropdown { - display: block; -} - -.search-bar { - padding: 5px; - margin: 0 10px; -} - -.chatbot-icon, -.redeem-icon, -.cart-icon, -.account-icon { - background: transparent; - border: none; - color: #ffffff; - cursor: pointer; - margin: 0 5px; - font-size: 25px; -} - .background-image { position: relative; - z-index: 1; + z-index: 0; background: url("https://png.pngtree.com/thumb_back/fh260/background/20200731/pngtree-blue-carbon-background-with-sport-style-and-golden-light-image_371487.jpg") no-repeat; background-size: cover; - height: 700px; /* Adjust as needed */ + height: 750px; /* Adjust as needed */ } /*popular products*/ .products-section { margin-top: 32px; - overflow: hidden; - position: relative; + position: static; } .products-box { @@ -163,36 +98,16 @@ body { font-size: 0.9em; line-height: 1.5; } -/*footer*/ -footer { - background-color: #333; - color: #fff; - padding: 20px; - text-align: center; -} - -footer img { - width: 50px; - height: 50px; -} -.quick-links { - list-style: none; - padding: 0; +#lottie-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.2); /* Adjust the opacity as needed */ + z-index: 1; /* Ensure it's on top of other content */ display: flex; justify-content: center; -} - -.quick-links li { - margin: 0 10px; -} - -.social-icons { - margin-top: 20px; -} - -.social-icon { - color: #fff; - text-decoration: none; - margin: 0 10px; + align-items: center; } diff --git a/css/login.css b/css/login.css index 183eada..b9b603d 100644 --- a/css/login.css +++ b/css/login.css @@ -1,92 +1,92 @@ - - - - /*////////////////////////////////////////////////////////////////// [ FONT ]*/ @font-face { font-family: Poppins-Regular; - src: url('../fonts/poppins/Poppins-Regular.ttf'); + src: url("../fonts/poppins/Poppins-Regular.ttf"); } @font-face { font-family: Poppins-Medium; - src: url('../fonts/poppins/Poppins-Medium.ttf'); + src: url("../fonts/poppins/Poppins-Medium.ttf"); } @font-face { font-family: Poppins-Bold; - src: url('../fonts/poppins/Poppins-Bold.ttf'); + src: url("../fonts/poppins/Poppins-Bold.ttf"); } @font-face { font-family: Poppins-SemiBold; - src: url('../fonts/poppins/Poppins-SemiBold.ttf'); + src: url("../fonts/poppins/Poppins-SemiBold.ttf"); } - - - /*////////////////////////////////////////////////////////////////// [ RESTYLE TAG ]*/ * { - margin: 0px; - padding: 0px; - box-sizing: border-box; + margin: 0px; + padding: 0px; + box-sizing: border-box; } -body, html { - height: 100%; - font-family: Poppins-Regular, sans-serif; +body, +html { + height: 100%; + font-family: Poppins-Regular, sans-serif; + overflow-x: hidden; /* Prevent horizontal scrolling */ } /*---------------------------------------------*/ a { - font-family: Poppins-Regular; - font-size: 14px; - line-height: 1.7; - color: #666666; - margin: 0px; - transition: all 0.4s; - -webkit-transition: all 0.4s; + font-family: Poppins-Regular; + font-size: 14px; + line-height: 1.7; + color: #666666; + margin: 0px; + transition: all 0.4s; + -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } a:focus { - outline: none !important; + outline: none !important; } a:hover { - text-decoration: none; + text-decoration: none; color: #a64bf4; } /*---------------------------------------------*/ -h1,h2,h3,h4,h5,h6 { - margin: 0px; +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0px; } p { - font-family: Poppins-Regular; - font-size: 14px; - line-height: 1.7; - color: #666666; - margin: 0px; + font-family: Poppins-Regular; + font-size: 14px; + line-height: 1.7; + color: #666666; + margin: 0px; } -ul, li { - margin: 0px; - list-style-type: none; +ul, +li { + margin: 0px; + list-style-type: none; } - /*---------------------------------------------*/ input { - outline: none; - border: none; + outline: none; + border: none; } textarea { @@ -94,43 +94,76 @@ textarea { border: none; } -textarea:focus, input:focus { +textarea:focus, +input:focus { border-color: transparent !important; } -input:focus::-webkit-input-placeholder { color:transparent; } -input:focus:-moz-placeholder { color:transparent; } -input:focus::-moz-placeholder { color:transparent; } -input:focus:-ms-input-placeholder { color:transparent; } +input:focus::-webkit-input-placeholder { + color: transparent; +} +input:focus:-moz-placeholder { + color: transparent; +} +input:focus::-moz-placeholder { + color: transparent; +} +input:focus:-ms-input-placeholder { + color: transparent; +} -textarea:focus::-webkit-input-placeholder { color:transparent; } -textarea:focus:-moz-placeholder { color:transparent; } -textarea:focus::-moz-placeholder { color:transparent; } -textarea:focus:-ms-input-placeholder { color:transparent; } +textarea:focus::-webkit-input-placeholder { + color: transparent; +} +textarea:focus:-moz-placeholder { + color: transparent; +} +textarea:focus::-moz-placeholder { + color: transparent; +} +textarea:focus:-ms-input-placeholder { + color: transparent; +} -input::-webkit-input-placeholder { color: #adadad;} -input:-moz-placeholder { color: #adadad;} -input::-moz-placeholder { color: #adadad;} -input:-ms-input-placeholder { color: #adadad;} +input::-webkit-input-placeholder { + color: #adadad; +} +input:-moz-placeholder { + color: #adadad; +} +input::-moz-placeholder { + color: #adadad; +} +input:-ms-input-placeholder { + color: #adadad; +} -textarea::-webkit-input-placeholder { color: #adadad;} -textarea:-moz-placeholder { color: #adadad;} -textarea::-moz-placeholder { color: #adadad;} -textarea:-ms-input-placeholder { color: #adadad;} +textarea::-webkit-input-placeholder { + color: #adadad; +} +textarea:-moz-placeholder { + color: #adadad; +} +textarea::-moz-placeholder { + color: #adadad; +} +textarea:-ms-input-placeholder { + color: #adadad; +} /*---------------------------------------------*/ button { - outline: none !important; - border: none; - background: transparent; + outline: none !important; + border: none; + background: transparent; } button:hover { - cursor: pointer; + cursor: pointer; } iframe { - border: none !important; + border: none !important; } /*////////////////////////////////////////////////////////////////// @@ -150,11 +183,15 @@ iframe { text-transform: uppercase; } -.bg1 {background-color: #3b5998} -.bg2 {background-color: #1da1f2} -.bg3 {background-color: #ea4335} - - +.bg1 { + background-color: #3b5998; +} +.bg2 { + background-color: #1da1f2; +} +.bg3 { + background-color: #ea4335; +} /*////////////////////////////////////////////////////////////////// [ login ]*/ @@ -164,7 +201,7 @@ iframe { } .container-login100 { - width: 100%; + width: 100%; min-height: 100vh; display: -webkit-box; display: -webkit-flex; @@ -178,21 +215,22 @@ iframe { background-repeat: no-repeat; background-position: center; background-size: cover; - background-image: url('../images/login-background.jpg'); + background-image: url("../images/login-background.jpg"); } -.wrap-login100, .wrap-signup100 { +.wrap-login100, +.wrap-signup100 { width: 500px; background: #fff; border-radius: 10px; overflow: hidden; } - /*------------------------------------------------------------------ [ Form ]*/ -.login100-form,.signup100-form { +.login100-form, +.signup100-form { width: 100%; } @@ -205,8 +243,6 @@ iframe { text-align: center; } - - /*------------------------------------------------------------------ [ Input ]*/ @@ -289,7 +325,6 @@ iframe { transition: all 0.4s; } - .input100:focus + .focus-input100::before { width: 100%; } @@ -306,7 +341,6 @@ iframe { color: #a64bf4; } - /*------------------------------------------------------------------ [ Button ]*/ .container-login100-form-btn { @@ -341,7 +375,13 @@ iframe { width: 300%; height: 100%; background: #a64bf4; - background: -webkit-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff); + background: -webkit-linear-gradient( + right, + #00dbde, + #fc00ff, + #00dbde, + #fc00ff + ); background: -o-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff); background: -moz-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff); background: linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff); @@ -354,7 +394,8 @@ iframe { transition: all 0.4s; } -.login100-form-btn, .signup100-form-btn { +.login100-form-btn, +.signup100-form-btn { font-family: Poppins-Medium; font-size: 16px; color: #fff; @@ -452,4 +493,4 @@ iframe { padding-left: 15px; padding-right: 15px; } -} \ No newline at end of file +} diff --git a/css/navigation.css b/css/navigation.css index 106ada5..db1c640 100644 --- a/css/navigation.css +++ b/css/navigation.css @@ -17,6 +17,7 @@ nav { z-index: 2; display: flex; justify-content: space-between; + padding-top: 14px; max-width: 100%; width: 90vw; margin: auto; @@ -151,8 +152,14 @@ li a:hover { } @keyframes sparkle { - from { opacity: 0; transform: scale(0.5); } - to { opacity: 1; transform: scale(1.2); } + from { + opacity: 0; + transform: scale(0.5); + } + to { + opacity: 1; + transform: scale(1.2); + } } #user-points { @@ -164,5 +171,4 @@ li a:hover { color: #f0ad4e; /* Change color as needed */ padding-left: 10px; /* Add more styles as needed */ -} - +} diff --git a/css/product.css b/css/product.css index 507b27d..afa57b0 100644 --- a/css/product.css +++ b/css/product.css @@ -8,6 +8,7 @@ body { font-family: "Arial", sans-serif; background-color: #f7f7f7; + overflow-x: hidden; /* Prevent horizontal scrolling */ } .product-page-container { diff --git a/html/cart.html b/html/cart.html index c5e3f6b..8434d7d 100644 --- a/html/cart.html +++ b/html/cart.html @@ -39,11 +39,6 @@

Order Summary

- - - diff --git a/html/product.html b/html/product.html index 8790f74..0c9d829 100644 --- a/html/product.html +++ b/html/product.html @@ -6,6 +6,7 @@ Interactive Product Card +
@@ -28,11 +29,16 @@

Filter by Clothing

+
+ +
+
+ diff --git a/index.html b/index.html index d167840..5b7801f 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - E-commerce Store + VogueValley @@ -12,6 +12,8 @@ + + @@ -19,10 +21,6 @@ - -
- -
@@ -59,8 +57,7 @@

Popular Products

EZY Ultra Stretch Jeans (Longer Length: 84cm)

- A classic jeans look with the comfort of sweatpants. Superb - stretch for a comfortable fit. + A classic jeans look with the comfort of sweatpants.

@@ -82,6 +79,8 @@

Popular Products

+
+

On Sale Products

@@ -127,53 +126,22 @@

On Sale Products

+
+
- - - + +
+
+ +
+
- - - + + + \ No newline at end of file diff --git a/js/footer.js b/js/footer.js index 4d1f9fb..9a75757 100644 --- a/js/footer.js +++ b/js/footer.js @@ -50,7 +50,7 @@ function createContentBox(title, content) { function createLinks() { var links = document.createElement("div"); links.classList.add("links"); - var linkNames = ["Home", "AI Chat", "Shopping Cart", "Login"]; + var linkNames = ["Home", "Product", "Shopping Cart", "Login"]; linkNames.forEach(function (name) { var link = document.createElement("a"); if (name === "Home") { @@ -65,30 +65,33 @@ function createLinks() { return links; } +function createSocialIcon(alt, src, link) { + var icon = document.createElement("a"); + icon.href = link; + icon.target = "_blank"; // Open the link in a new tab + var image = document.createElement("img"); + image.alt = alt; + image.src = src; + icon.appendChild(image); + return icon; +} + function createSocialIcons() { var socialIcons = document.createElement("div"); socialIcons.classList.add("social-icons"); var instagram = createSocialIcon( "Instagram", - "https://www.freepnglogos.com/uploads/logo-ig-png/logo-ig-logo-instagram-ini-ada-varias-dan-transparan-33.png" + "https://www.freepnglogos.com/uploads/logo-ig-png/logo-ig-logo-instagram-ini-ada-varias-dan-transparan-33.png", + "https://www.instagram.com/uniqlosg/?hl=en" ); socialIcons.appendChild(instagram); var facebook = createSocialIcon( "Facebook", - "https://www.facebook.com/images/fb_icon_325x325.png" + "https://www.facebook.com/images/fb_icon_325x325.png", + "https://www.facebook.com/uniqlo.sg/" ); socialIcons.appendChild(facebook); return socialIcons; } -function createSocialIcon(alt, src) { - var icon = document.createElement("a"); - icon.href = "#"; - var image = document.createElement("img"); - image.alt = alt; - image.src = src; - icon.appendChild(image); - return icon; -} - createFooter(); diff --git a/js/home.js b/js/home.js new file mode 100644 index 0000000..01d9ce6 --- /dev/null +++ b/js/home.js @@ -0,0 +1,46 @@ +document.addEventListener("DOMContentLoaded", function () { + // Check if the user came from the login page + const cameFromLoginPage = localStorage.getItem("cameFromLoginPage"); + + if (cameFromLoginPage === "true") { + // Check if the animation has already been played + const animationPlayed = localStorage.getItem("animationPlayed"); + + if (!animationPlayed) { + // User came from login page and animation hasn't been played yet, play the animation + playAnimation(); + + // Set the flag to indicate that the animation has been played + localStorage.setItem("animationPlayed", "true"); + } + + // Remove the flag to prevent animation from replaying on page refresh + localStorage.removeItem("cameFromLoginPage"); + } +}); + +function playAnimation() { + // Check if the user came from the login page + const cameFromLoginPage = localStorage.getItem("cameFromLoginPage"); + + if (cameFromLoginPage === "true") { + // Display the Lottie animation + const lottieContainer = document.getElementById("lottie-container"); + lottieContainer.style.display = "block"; + + // Load the animation + const animation = lottie.loadAnimation({ + container: document.getElementById("lottie-animation"), + renderer: "svg", + loop: false, + autoplay: true, // Set autoplay to true to start the animation automatically + path: "https://lottie.host/880c2dab-8556-4015-9f6e-4d57c7c55eb8/pfpBT8ShzX.json", // Provide the path to your Lottie animation JSON file + }); + + // When the animation completes, hide the Lottie container and background image + animation.addEventListener("complete", () => { + lottieContainer.style.display = "none"; + document.querySelector("#lottie-overlay").style.display = "none"; + }); + } +} diff --git a/js/login.js b/js/login.js index 85d7af9..fd509fa 100644 --- a/js/login.js +++ b/js/login.js @@ -69,57 +69,61 @@ function hideValidate(input) { var thisAlert = $(input).parent(); - $(thisAlert).removeClass('alert-validate'); - } - - function loginUser(event) { - event.preventDefault(); // Prevent the default form submission - - var username = document.getElementsByName("username")[0].value.trim(); - var password = document.getElementsByName("pass")[0].value.trim(); - - // Send a request to RestDB to retrieve the user data - fetch('https://fedassignmentv2-62c5.restdb.io/rest/user-credentials?q={"User":"' + username + '"}', { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - "x-apikey": "65c4e3389ec8d460022d98b7", - "cache-control": "no-cache" - }, - }) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.json(); - }) - .then(users => { - if (users.length > 0 && users[0].Password === password) { - console.log("Login successful", users[0]); - - // Store user data in localStorage or sessionStorage - localStorage.setItem('user', JSON.stringify(users[0])); - - alert("Successfully logged in as : " + users[0].User); - // Redirect to the homepage - window.location.href = '../index.html'; - } else { - console.log("Login failed: user not found or password mismatch"); - // Handle login failure (e.g., display an error message) - alert("Login failed: user not found or password mismatch"); - } - }) - .catch((error) => { - console.error('Login error:', error); - console.log("Error logging in!"); - }); + $(thisAlert).removeClass("alert-validate"); + } + + function loginUser(event) { + event.preventDefault(); // Prevent the default form submission + + var username = document.getElementsByName("username")[0].value.trim(); + var password = document.getElementsByName("pass")[0].value.trim(); + + // Send a request to RestDB to retrieve the user data + fetch( + 'https://fedassignmentv2-62c5.restdb.io/rest/user-credentials?q={"User":"' + + username + + '"}', + { + method: "GET", + headers: { + "Content-Type": "application/json", + "x-apikey": "65c4e3389ec8d460022d98b7", + "cache-control": "no-cache", + }, } - - // Add event listener to the login form - document.querySelector('.login100-form').addEventListener('submit', loginUser); - - + ) + .then((response) => { + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }) + .then((users) => { + if (users.length > 0 && users[0].Password === password) { + console.log("Login successful", users[0]); + + // Store user data in localStorage or sessionStorage + localStorage.setItem("user", JSON.stringify(users[0])); + + alert("Successfully logged in as : " + users[0].User); + // Redirect to the homepage + window.location.href = "../index.html"; + } else { + console.log("Login failed: user not found or password mismatch"); + // Handle login failure (e.g., display an error message) + alert("Login failed: user not found or password mismatch"); + } + }) + .catch((error) => { + console.error("Login error:", error); + console.log("Error logging in!"); + }); + } + // Add event listener to the login form + document + .querySelector(".login100-form") + .addEventListener("submit", loginUser); })(jQuery); document.getElementById("signup-link").addEventListener("click", function () { @@ -139,14 +143,19 @@ function passwordsMatch(password, confirmPassword) { // Function to check if the username is available function isUsernameAvailable(username, successCallback, errorCallback) { - fetch('https://fedassignmentv2-62c5.restdb.io/rest/user-credentials?q={"User":"' + username + '"}', { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - "x-apikey": "65c4e3389ec8d460022d98b7", - "cache-control": "no-cache" + fetch( + 'https://fedassignmentv2-7a2a.restdb.io/rest/user-credentials?q={"User":"' + + username + + '"}', + { + method: "GET", + headers: { + "Content-Type": "application/json", + "x-apikey": "65c614116a1c9939a9be0023", + "cache-control": "no-cache", + }, } -}) + ) .then((response) => response.json()) .then((data) => { if (data.length === 0) { @@ -171,12 +180,12 @@ function signUpUser(username, password) { Points: 0, }; - fetch('https://fedassignmentv2-62c5.restdb.io/rest/user-credentials', { - method: 'POST', + fetch("https://fedassignmentv2-7a2a.restdb.io/rest/user-credentials", { + method: "POST", headers: { - 'Content-Type': 'application/json', - "x-apikey": "65c4e3389ec8d460022d98b7", - "cache-control": "no-cache" + "Content-Type": "application/json", + "x-apikey": "65c614116a1c9939a9be0023", + "cache-control": "no-cache", }, body: JSON.stringify(userData), }) diff --git a/js/navigation.js b/js/navigation.js index 26691f3..267fee9 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -19,9 +19,6 @@ document.addEventListener("DOMContentLoaded", function () {
  • Products
    • -
  • Redeem
  • Cart
    • diff --git a/js/product.js b/js/product.js index 56b31ef..3d3af55 100644 --- a/js/product.js +++ b/js/product.js @@ -28,13 +28,16 @@ document.addEventListener("DOMContentLoaded", async () => { // Function to fetch products from RESTDB API async function fetchProducts() { try { - const response = await fetch('https://fedassignmentv2-62c5.restdb.io/rest/products', { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - 'x-apikey': '65c4e3389ec8d460022d98b7', + const response = await fetch( + "https://fedassignmentv2-7a2a.restdb.io/rest/products", + { + method: "GET", + headers: { + "Content-Type": "application/json", + "x-apikey": "65c614116a1c9939a9be0023", + }, } - }); + ); if (!response.ok) throw new Error("Network response was not ok"); @@ -199,21 +202,21 @@ function createProductCard(product) { // Create card elements and fill with product data const cardContainer = document.getElementById("card-container"); console.log("testing"); - const card = document.createElement('div'); - card.className = 'product-card'; - const image = document.createElement('img'); + const card = document.createElement("div"); + card.className = "product-card"; + const image = document.createElement("img"); // Construct the image URL directly using the provided 'Image' property image.src = `../images/product-${product.ProductID}.avif`; image.alt = product.Name; // Add an "Add to Cart" button - const addToCartBtn = document.createElement('button'); - addToCartBtn.textContent = 'Add to Cart'; + const addToCartBtn = document.createElement("button"); + addToCartBtn.textContent = "View product"; addToCartBtn.onclick = () => addToCart(product); // Set attributes for expanding the card - card.setAttribute('data-details', JSON.stringify(product)); + card.setAttribute("data-details", JSON.stringify(product)); card.onclick = expandCard; const name = document.createElement("h3"); @@ -252,25 +255,59 @@ function createProductCard(product) { cardContainer.appendChild(card); // Set up the click event listener to expand the card - card.addEventListener('click', function(event) { - // Prevent any parent handlers from being executed - event.stopPropagation(); - - // Call the function to create an expanded product card - createExpandedProductCard(product);}); + card.addEventListener("click", function (event) { + // Prevent any parent handlers from being executed + event.stopPropagation(); + + // Call the function to create an expanded product card + createExpandedProductCard(product); + }); return card; } // Function to add item to cart function addToCart(product) { - const cart = JSON.parse(localStorage.getItem('cart')) || []; - const cartItem = cart.find(item => item.ProductID === product.ProductID); + const cart = JSON.parse(localStorage.getItem("cart")) || []; + const cartItem = cart.find((item) => item.ProductID === product.ProductID); if (cartItem) { cartItem.Quantity += 1; } else { - cart.push({ ProductID: product.ProductID, Name : product.Name, Quantity: 1, Image: `../images/product-${product.ProductID}.avif`, Description: product.Description, Category: product.Category, Gender: product.Gender, Availability: product.Availability }); + cart.push({ + ProductID: product.ProductID, + Name: product.Name, + Quantity: 1, + Image: `../images/product-${product.ProductID}.avif`, + Description: product.Description, + Category: product.Category, + Gender: product.Gender, + Availability: product.Availability, + }); } - localStorage.setItem('cart', JSON.stringify(cart)); + localStorage.setItem("cart", JSON.stringify(cart)); + + // Play Lottie animation + playLottieAnimation(); +} + +// Function to play the Lottie animation +function playLottieAnimation() { + // Display the Lottie animation + const lottieContainer = document.getElementById("lottie-animation"); + lottieContainer.style.display = "block"; + + // Load the animation + const animation = lottie.loadAnimation({ + container: lottieContainer, + renderer: "svg", + loop: false, + autoplay: true, + path: "https://lottie.host/8b6bfc9b-5cba-4a47-8c7b-ada50b1a9b8b/hdYc6nUa5Q.json", // Provide the path to your Lottie animation JSON file + }); + + // When the animation completes, hide the Lottie container + animation.addEventListener("complete", () => { + lottieContainer.style.display = "none"; + }); } // Function to expand the product card @@ -279,49 +316,42 @@ function expandCard(event) { event.stopPropagation(); const productDetails = JSON.parse(this.dataset.details); - const expandedView = document.createElement('div'); - expandedView.className = 'expanded-card'; + const expandedView = document.createElement("div"); + expandedView.className = "expanded-card"; // Populate expandedView with productDetails... document.body.appendChild(expandedView); - document.body.classList.add('darken'); + document.body.classList.add("darken"); } // Close the expanded card -function closeExpandedCard() { - document.querySelector('.expanded-card').remove(); - document.body.classList.remove('darken'); -} - -// Function to create an expanded product card function createExpandedProductCard(product) { // Create the expanded card container - const expandedCard = document.createElement('div'); - expandedCard.classList.add('expanded-card'); + const expandedCard = document.createElement("div"); + expandedCard.classList.add("expanded-card"); // Create the content of the expanded card using the product details expandedCard.innerHTML = ` -
    - × - ${product.Name} -

    ${product.Name}

    -

    ${product.Description}

    -

    Category: ${product.Category}

    -

    Gender: ${product.Gender}

    -

    Price: $${product.Price}

    -

    Availability: ${product.Availability}

    -

    Quantity Available: ${product.Quantity}

    - -
    - `; +
    + × + ${product.Name} +

    ${product.Name}

    +

    ${product.Description}

    +

    Category: ${product.Category}

    +

    Gender: ${product.Gender}

    +

    Price: $${product.Price}

    +

    Availability: ${product.Availability}

    +

    Quantity Available: ${product.Quantity}

    + +
    +
    +`; // Append the expanded card to the body document.body.appendChild(expandedCard); - document.body.classList.add('no-scroll'); // Disable scroll on body + document.body.classList.add("no-scroll"); // Disable scroll on body } - // Function to close the expanded product card function closeExpandedCard() { - document.querySelector('.expanded-card').remove(); - document.body.classList.remove('no-scroll'); // Enable scroll on body + document.querySelector(".expanded-card").remove(); + document.body.classList.remove("no-scroll"); // Enable scroll on body } -