View the latest activities happening in the community and keep track of your favorite reads with Local Library.
The home page displays the latest activities happening at the library featuring a custom image carousel. A drop down menu on the top left of the page takes the user to their bookshelf or the site's about page. The drop down menu displays on mouseover and utilizes the drop-down-init module.
The image carousel automatically rotates through the images of recent activities on a short interval. The timer pauses on mouseover. Additionally, users can cycle through the carousel manually using the next and previous buttons or by click on the circles below the image.
Each user has their own bookshelf stored locally on the browser and can manage the contents during their session. Books are added by clicking the "Add Book" button in the top right of the shelf page. Shelf entries track the title, author, page count, and whether it has been read.
Books can be removed from the shelf by clicking on the red x below each one and read status is toggled by clicking on the entry.
Note
This program was completed as part of The Odin Project JavaScript course. Key skills practiced:
- Basic OOP features in JavaScript
- ES6 modules
- Static analysis tools: ESLint, Prettier, and integrating them into a project within VS Code
- Building common components (drop down menus and image carousels) with vanilla JavaScript
- Building with Webpack and appropriate plugins
- Integration with npm to include publishing a module