I wanted to create an E-commerce site for a Mom 'N Pop business to showcase my understanding of Javascript. I was baking a lot of bread at the time and the idea of making website for a bakery seemed appropriate.
- About Page
- Bread Selection
- Contact Page
- Cart
- Html/CSS/Javascript
- Mapbox from https://www.mapbox.com/
- Deployed on https://www.netlify.com/
From the header, we can jump to the differnt sections of the page as well as gain access to the Purchase page.
There is an option to join a newsletter which takes an email address. An alert will pop up to show if the email has be accepted or if it is invalid.
A showcase of available breads was designed using grid to display the breads in an organzied and responsive manner.
In the Contact section, we see the contact information along with the "potential" location of the bakery itself. Mapbox from https://www.mapbox.com/ was used in order to do this; code located at the bottom of index.html page.
On the Purchase page, we have the offered breads, their prices, and the ability to add them to the cart. Clicking on the cart icon, in the top right of the header, gives the user access to the cart itself. Within the cart, the user is able to modify the quantity of each bread they desire as well the option to remove a bread from the cart.
The current cost is displayed underneath the cart which updates with the addition or removal of items. When the order is submitted via the "Place Order" button, an alert pops up thanking the user for their order and the cart is reset to empty.