Re-imagined project that uses HTML5, CSS Flexbox, CSS Grid, and vanilla JavaScript for displaying and filtering non-fiction books
This project implements the use of filter(), map(), and includes() methods for iterating over an array of books. The Set object is used to ensure that the categories returned are unique and there are no duplicates.
The books JSON data is included in a separate file where it is assigned to a variable and imported via the spread operator in the main JavaScript file.
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 this. The functionality has already been implemented in the first version.
Also, no additional information about the book is displayed. For example, clicking on a book cover image will not do anything. I have reserved this functionality for the third project where all of this comes together.
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.
In the future, I will be looking at what happens in the event that there is no cover available. For the moment, I am using the ALT text 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 books. And researching online documentation.
No third-party libraries (except for Google Fonts) were used in the rebuilding of this project.