A Library app to keep track of borrowed books. Built using JavaScript, HTML, and Sass for The Odin Project.

• Overview
  • Description
  • Screenshot
  • Links
• My process
  • Built with
  • The process
  • Continued development
  • Useful resources
• Author

A small borrowed books tracking app made as a part of The Odin Project curriculum, with added functionality to keep track of dates when books are due to be returned. User can add, edit and delete book records, and track the read and returned status. The app uses local storage, so the book records are stored between sessions.

• Solution
• Live Site

• Semantic HTML5 markup
• Sass (7-in-1 architecture)
• CSS Grid
• Mobile-first workflow
• JavaScript

The project's purpose is to get familiar with the concept of prototypal inheritance in JavaScript, but I also used it as a training ground for other web development techniques.

This project uses templating method (the HTML "template" element) to clone a "card", instead of creating a new one each time a new book is added.

The "dialog" element is used instead of confirm prompt for deletion.

• Add storage;
• Check due dates against current date;
• Add filters and pagination, maybe search;
• Add animations;

• How To Lint and Format Code with ESLint in Visual Studio Code - A tutorial for setting up ESLint for a project.
• Templating in HTML - "Long story short, templates are good to avoid creating complex DOM structures by hand."
• 7-1 pattern boilerplate - A boilerplate for 7-1 Sass Architecture.
• HTML / Sass Jumpstart - Mostly plucked some sensible values (font sizes, spacings, buttons, etc) from here and a reset file.
• google web fonts helper - A Hassle-Free Way to Self-Host Google Fonts.
• Paraiso colors
• Introducing the Dialog Element
• Custom CSS Styles for Form Inputs and Textareas
• Favicon Generator
• Using the Web Storage API

• Github
• LinkedIn
• Frontend Mentor
• Codepen
• Twitter