Re-imagined project that uses HTML5, CSS Flexbox, and vanilla JavaScript for displaying and filtering non-fiction books
This project implements the use of asynchronous JavaScript for fetching and displaying books from a locally stored JSON file.
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.
As with the first version, none of the links work. In addition, the mobile navigation does not work although the relevant styling has been applied. I have left this up to your imagination as to how you wish to approach functionality. The basic functionality has already been implemented in the first version.
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 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.
For me, this was a key reason why I chose CSS Flexbox rather than CSS Grid.
In the future, I will be looking at what happens in the event that there is no cover available for a given book. For the moment, I am using the ALT text attribute to display the book title.
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) were used in the rebuilding of this project.
Link to the fourth and final version of its kind. At least, for now...