Final Commit Readme Updated

README.md

@@ -1,9 +1,14 @@
 # Assignment-2
+Bhavesh-(Front-End)
+Lee-Roy-(API-Developer)
+Both contributed to the CSS,HTML,Java Files equally(we dk who did what and cannot remember exactly)
 ## ----------GitHub Repository Link----------
 https://github.com/MajinB10/Assignment-2
 
 ## ----------Synopsis----------
-Claire is our fictionally created e-commerce website which focuses on selling the beauty products and cosmetic accessories. We will be selling very exquisite facial creams and fragrant perfumes. The website aims to satisfy every customer on their visit to this e-commerce website thus it will offer customers for a chance to win free goodies or vouchers on their visit to this website. Customers will be able to create free accounts which will be stored in our database. Each account will have certain number of points. Points will later be used for the gacha system.
+
+Claire is our fictionally created e-commerce website which focuses on selling the beauty products and cosmetic accessories. We will be selling very exquisite facial creams and fragrant perfumes. The website aims to satisfy every customer on their visit to this e-commerce website thus it will offer customers for a chance to win free goodies or vouchers on their visit to this website. Customers will be able to create free accounts which will be stored in our database. Each account will have certain number of points. Points will later be used for the gacha system. Current the checkout system is down so it displays a message with a lottie animation.
+
 
 ## ----------Index.html----------
 Feature1 - Has a navigation Bar to navigate to different parts of the website. Each navbar elemet will lead to a new html file created by us. Navigation Bar is created using Bootstrap. <br /><br />
@@ -82,6 +87,89 @@ Feature3 - A popup of the won prize will be shown after 5 seconds,using function
 * We used BootStrap to have an easier time making website elements like Nav Bar<a/>
 
 ## ----------Testing----------
+The user will open in the index file where there is a navigation bar that has 6 Options to choose from:
+- Home
+- Shop
+- About
+- Gatcha
+- Login
+- Cart
+
+## Home
+Has a navigation Bar to navigate to different parts of the website. Each navbar elemet will lead to a new html file created by us. Navigation Bar is created using Bootstrap. It 
+Has a background image related to the overall theme of the website. The Picture has some words which act as advertisements to the user. Below the advertsing words, there is a shop now button. Clicking on the shop now button will lead to the shop.html file.<br /><br /> 
+It shows cetegories of products which are avaiable in our store. These objects cannot be clicked on and only has a hover effect placed on them.Having a featured sections which shows popular products bought by our previous customers. clicking on this object will open the specific product.html file. Object has hover attributes.<br /><br />
+
+When Clicking on the cart icon on the bottom right of the product, the user will be redirected to the cart page.
+We have created a banner to advertise the current event that our e-commerce store offers. Below that banner i hava a Explore Now button which, once clicked, will open shop.html.<br /><br />
+We have created a footer for my website. It conatins all of the store's contact information. All of the elements placed inside the footer are interactable. Clicking them will redirect you to the relevant page.The entire page has a background color which suits the accent of our chosen theme which is beauty products.Page is responsive.<br /><br />
+
+
+### Products
+This is a landing page when the user selects a product. This page will not be shown in the navigation bar
+Has a navigation Bar to navigate to different parts of the website. Each navbar element will lead to a new html file created by us.<br /><br />
+Navigation Bar is created using Bootstrap
+There are product details of the selected product. 
+There is a section to add the product to cart and the quantity of the product. This will redirect you to the cart page<br /><br />
+Below the product details, there will be 3 featured products similar to the current product that the user has chosen. (eg. if user chooses face product, there will be 3 face products below the product details<br /><br />
+When Clicking on the cart icon on the bottom right of the product, the user will be redirected to the cart page. 
+ We have created a footer for my website. It contains all of the store's contact information. All of the elements placed inside the footer are interactable. Clicking them will redirect you to the relevant page<br /><br />
+The entire page has a background color which suits the accent of our chosen theme which is beauty products
+Page is responsive<br /><br />
+
+## Shop
+Has a navigation Bar to navigate to different parts of the website. Each navbar element will lead to a new html file created by us. Navigation Bar is created using Bootstrap.
+There is a shop header which shows that you are in the shop section of the website.<br /><br />
+Below he shop header, all the products offered by our e-commerce store will be shown. Each product is interactable and has an hover effect. Once the user clicks onto the product, the respective product.html file will be opened.
+When Clicking on the cart icon on the bottom right of the product, the user will be redirected to the cart page.
+We have created a footer for our website. It contains all of the store's contact information.<br /><br /> 
+All of the elements placed inside the footer are interactable. Clicking them will redirect you to the relevant page.<br /><br />
+The entire page has a background color which suits the accent of our chosen theme which is beauty products.
+Page is responsive.<br /><br />
+
+## About
+Has a navigation Bar to navigate to different parts of the website. Each navbar elemet will lead to a new html file created by us. Navigation Bar is created using Bootstrap
+There is a About header which shows that you are in the About section of the website<br /><br />
+The About page is made to have a parallex affect while scrolling down the page. While enjoying the parallex effect, the customers will be able to learn about CLaire's history and how is was founded. <br /><br />
+This makes an interesting experience for the customers who will definitely enjoy the experience
+While scrolling the parallex effect, there will be different pictures of models holding our products and below above them will be the description of our history<br /><br />
+At the final parallex scrolling effect, there will be a list of all the awards that we have recieved over the course of our business.<br /><br />
+Shows categories of products which are avaiable in our store. These objects cannot be clicked on and only has a hover effect placed on them.<br /><br />
+We have created a footer for my website. It conatins all of the store's contact information. All of the elements placed inside the footer are interactable. Clicking them will redirect you to the relevant page.Page is responsive<br /><br />
+
+## Sign In
+Has a navigation Bar to navigate to different parts of the website. Each navbar elemet will lead to a new html file created by us. Navigation Bar is created using Bootstrap
+We have created a footer for my website. It conatins all of the store's contact information. <br /><br />
+All of the elements placed inside the footer are interactable. Clicking them will redirect you to the relevant page
+Page is responsive<br /><br />
+Using the GET Function of the Restdb API , the response will go through the conditioning, if the username and password made by user is same as the response from the GET it will store the responses information(username,userEmail,password and point,ID of the database<br /><br />
+It has a link to the SignUp page<br /><br />
+
+### SignUp
+Has a navigation Bar to navigate to different parts of the website. Each navbar elemet will lead to a new html file created by us. <br /><br />
+Navigation Bar is created using Bootstrap
+We have created a footer for my website. It conatins all of the store's contact information. 
+All of the elements placed inside the footer are interactable. Clicking them will redirect you to the relevant page.<br /><br />
+Page is responsive<br /><br />
+After clicking the Send button, it collates all the input variables and places them into data that will be POSTED to the RestDB database. The username and userEmail must be unique <br /><br />
+The Document will GET all the accounts from the database After the GET response, the function for the button will be written. If the user inputs are similar in the response it will show an error message and the POST will not be sent<br /><br />
+
+## Gatcha
+Has a navigation Bar to navigate to different parts of the website. Each navbar elemet will lead to a new html file created by us. <br /><br />
+Navigation Bar is created using Bootstrap
+The wheel is made using CSS, each time a player spins the wheel 10 points will be deducted from the database using the PUT function update the database, and changing the localstorage of points<br /><br />
+A popup of the won prize will be shown after 5 seconds,using function delay of the spin the HTML.<br /><br />
+
+
+
+## Cart 
+Has a navigation Bar to navigate to different parts of the website. Each navbar elemet will lead to a new html file created by us. Navigation Bar is created using Bootstrap
+It has a lottie animation in the background of the page to display ther mesasage that the cart section of the website is currently under maintenance. <br /><br />
+ We have created a footer for my website. It conatins all of the store's contact information. All of the elements placed inside the footer are interactable. Clicking them will redirect you to the relevant page<br /><br />
+The entire page has a background color which is contrast to our theme for the website which is beauty products. This is to make sure the customers recieve the information that the cart section of the website is currently under maintenance and will not be mistaken for an advertisment or any other news<br /><br />
+The websiter has a lottie animation which is a powerbutton to showcase the downtime of the Cart section in the website. 
+Page is responsive<br /><br />
+
 
 
 # ----------Credits----------