This is a project that I have created to demonstrate my JavaScript skills gained through an online course. It is fully functional and has been developed using vanilla JavaScript. The main purpose of this app is to allow users to shop for different products on the Amazon platform, search for specific items, add them to their shopping cart. The website uses the following technologies: HTML, CSS & Javascript.
-
The user can search for books via title or author name;
-
As the user types in the input field, a request is made to the Amazon API to retrieve matching results;
-
When a result is clicked, the application will display more information about the selected book including price, number of pages, publisher etc.;
-
Once the book's details are retrieved from the server they're displayed on screen with relevant information such as image of cover page, description etc.;
-
When clicking on one of these items from the list displayed below (or by pressing enter), it will open up another window with more details about this
-
When the user clicks on one of these results they are redirected to their book page where more information about it will be displayed (title, authors etc
-
When a result is clicked, more information about the book is displayed on the right side of the page;
-
If there are no matches found by the query entered into the input box then it will display "No Results Found";
-
If the user clicks on "Add To Cart", the selected item will be added into their cart list;
-
The count of items in the shopping cart is displayed in real time;
-
Clicking 'Checkout' opens a modal with all the items in the shopping cart;
-
Once the checkout process is completed (this part isn’t implemented because it requires server integration), the shopping cart will be cleared;
-
User can remove books from the cart by clicking on 'X';
-
Books are saved locally so they don't need to reappear when the browser refreshes/reloads (localStorage); Note: Amazon API Key - This application requires access to the Amazon Product Advertising API in order to fetch book data. You must provide your own
// FIXME: link to the deployed app. If you want to see this site working properly please visit https://jesar-enl.github.io/amazon/.