My project is a digital library called Story Heaven. In this library the user will find popular books intended for middle and high schoolers. The website is divided using the different genres. To navigate the page you have to click on the different genres and then click on the book cover. I implemented a search bar with filtered search the users can also use to navigate the website. Depending on whether the book is uploaded the user will see a page-not-found page or the actual book and be able to start reading. I used HTML, CSS, and Javascript to create this website along with Calibre for PDF to HTML conversions.

I updated the navbar and changed the table structures on all the pages to CSS grids with device compatibility. I also added a search bar through which readers can search for a book they want to read (since I didn't use any APIs for this, only a limited amount are available). The user doesn't have to go to the specific page and can just search on the home page. The user can also filter the search by genres..

The features of the website include chapter buttons at the top of each reader page (after you clicked on the book cover). There are also buttons for the user to be able to increase/decrease the text size, play/pause music (it's relaxing piano music) while they read, toggle between dark/light theme, and return back to the main library if needed. When navigating through the buttons at the bottom of the page, the user will automatically be directed to the top of the next chapter. Before I used pure HTML for the books, but I found it easier to create JSON files and source them through HTML.

The files I changed from HTML to JSON are: A Pho Love Story (complete), Foolish Hearts (partially), City Spies (partially) The files that have content, but are not updated in JSON: Percy Jackson and the Lightning Thief (complete), The Downstairs Girl (complete))

The books the readers can't view have a lower opacity and there isn't a hover animation on them. The books the reader can view and read are at full opacity with a hover animation.

The reader can see the whole series for the books which are part of a series on the genre pages and when searched through the search bar.

Challenges I faced with this project was finding quicker ways to create JSON files. For some of the files I could create JSON files with ease and quicker (A Pho Love Story) and I though I could do that for the rest of the website eventually doing it for all of the files, but then I started on City Spies and figured out that things weren't always that easy. Files that weren't in the right structure from the beginning were giving me a hard time. Eventually I did them partially to save time and focus on the other parts of the website to improve functionality.

The new additions: search bar, updated navigation bar, CSS grid system, some animations

This is the link to my website: https://pgarg111.github.io/StoryHaven_Edited/index.html