Re-imagined project that uses HTML5, CSS Flexbox, CSS Grid, and vanilla JavaScript for displaying and filtering non-fiction books, as well as an experimental functionality for adding your favorite books to a 'cart' using local storage.
This project is an adaptation of Yanis Smilga's Ecommerce project. It implements the use of asynchronous JavaScript for fetching and displaying books from a locally stored JSON file. The ES6 modular approach is implemented for separating the various functionalities.
The books JSON data is included in a separate folder and imported via a url variable.
When the user clicks on a book on the index page, they are taken to a page displaying information about the book as well as my personal notes.
There is also an additional link to the book at the Open Library project on the book details page. I am using the Open Library Covers API for displaying book covers.
All of the links, including the mobile navigation, are working.
My inspiration for taking on this project in this way comes as a result of learning vanilla JavaScript from Yanis Smilga through his JavaScript Tutorial and Projects Course on Udemy, as well as going through the freeCodeCamp JavaScript playlist in preparation for the JavaScript Certification exam.
The difference between this project and Smilga's final E-commerce Store project is that, instead of adding items to a cart, the user adds the book to a 'cart' containing favorite books. Local storage is used for adding and removing books.
Of course, this may not be the usual practice for adding favorites. Normally, you would click on a heart-shaped icon. I just wanted to see how it might work.
The focus was on JavaScript functionality rather than styling, although the latter was just as important. Particularly because of the use of an external API which stores images of varying sizes.
This made using CSS Grid fairly challenging.
Another key difference between this project and the previous ones is that whereas those used a flat JSON file, this one works with at least one nested object.
I have added an adapted version of the toggle heart icon functionality from a previous assignment at freeCodeCamp. It simply toggles between colors. It does not open up the favorites list overlay. Nor does it save the action to local storage.
Coding Addict logo is courtesy of Yanis Smilga.
No AIs (such as ChatGPT) were used in the rebuilding of this project. Just generic online search. And researching online documentation.
No third-party libraries (except for Google Fonts and Font Awesome) were used in the rebuilding of this project. The links were taken from Yanis Smilga's Ecommerce project.