bookCase

A library application, built to store users' reading lists for The Odin Project. The main objective was to utilize a JavaScript object constructor to instantiate each book. This enables prototypal inheritance and provides a maintainable structure to the bookCase component. The "Book" instances are stored in an array and are used to populate the contents of the bookCase via a neat CSS3 grid trick (see code). The application currently saves users' reading lists through the use of local storage.

I simultaneously designed and authored the webpage using using vanilla HTML, CSS & JavaScript.

Notes

I based the design of the project on neumorphism, a form of minimalism characterized by a soft and light look where elements are usually the same color as the background and are only distinguishable by shadows and highlights surrounding the element. I feel this gives it a modern aesthetic.

My favorite part of building this project was going the extra mile of creating its visually pleasing, dynamically responsive UX/UI.

I hope you like it! ^_^

- ツkc💭

Tools

• VS Code
• Git & Github
• HTML5
• CSS3
• JavaScript ES6 (Highlighted: Object Constructors & Local Storage)
• Terminal

Summary

• Utilizes a JavaScript object constructor to provide structure for the contents of the users' reading lists.
• Local Storage used to save user's reading lists.
• CSS Grid is used to populate the bookCase.
• Used HTML5 semantic elements for better readability, structure & accessibility.
• Used Git & GitHub for source control/project management.
• Cross tested design and functionality on desktop & mobile browsers.

cloudySnippets💭