The Odin Project JavaScript

Project: Library

A small Library app, created with HTML, CSS and JavaScript. The data is stored in localStorage. The project is from The Odin Project curriculum.

🔗 Live preview of the project is here.

Overview

Features:

• Data is saved in localStorage
• You can add a book
• Before adding a book, you can mark if it's already read or not
• You can change book status after addition
• You can delete a particular book
• You can delete all books at once
• There is a modal to confirm or cancel complete books removal
• There is a mini tooltip with information about the project

Tools:

• Visual Studio Code
• Linux terminal
• Git and GitHub
• ESLint + Airbnb JavaScript Style Guide

Third party code:

• modern-normalize.css
• Font Awesome Icons

Outcome:

• Used HTML5 semantic elements for better structure and readability
• Used CSS Flexbox module to create layout
• Adapted fancy style for input placeholders
• Learned how to create a custom checkbox
• Learned how to create a tooltip
• Learned how to create a modal
• Learned how to save data to localStorage
• First time used fonts from local resource
• First time added color palette to CSS :root
• Deepened knowledge of DOM manipulation, HTML structure, CSS styling subtleties and JS functionality in general
• Had lots of fun with styling! 🎨