Re-imagined project that uses HTML5, CSS Flexbox, and vanilla JavaScript for displaying and filtering books
This project implements the use of filter(), map(), and forEach() methods for iterating over an array of books. The reduce() method is used to identify unique categories and thus match related books to these categories.
In the beginning, I used the CSS Grid two-column layout for displaying the books data which did make the site responsive. However, the challenge really began once I started pulling in the book cover images from the Open Library Covers API. In the end, I settled for CSS Flexbox, along with some additional tweaking.
I have implemented the use of unstyled buttons that could be used to easily and rapidly test the filtering code.
The books JSON data is included in the same JavaScript file. Originally from a MySQL database, I performed a four-table join and exported the file to JSON and removed everything else except the books data from those joined tables. This made the file much easier to work with.
The Notes (book_notes) for each book are completely unstyled. It is just plain text.
None of the links work, including the Read More button links. Linking is being reserved for the third and (final?) 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. Assistance with CSS, handling accessibility, etc., comes from Kevin Powell (including handling mobile navigation buttons with JavaScript), as well as Yanis.
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.