/TOP-Library

Primary LanguageJavaScript

TOP-Library

Badges to add in the future:

  • Release date
  • Last updated date
  • Maybe version number?
  • Maintenance badge? (Whether it's maintained as well as last maintained)

Introduction

(Back to Top)

Table of Contents

Updates

  • 03/03/2022 - Added option to select (from a preselected list) a card's background color. Not only does this bring a little fun and variety to the page, but it also allows the users to then color according to categories, etc.

  • 03/04/2022 - Successfully added localStorage capabilities, including buttons to save info to local storage as well as delete info from local storage. This was exciting because it was a breakthrough for me :D

About Project

(Back to Top)

This "library" is a project given by The Odin Project's JavaScript course (found within both of the advanced paths after Foundations). It follows a lesson on objects and object constructors, and their instructions are as follows:

Original Project Instructions

The following are the instructions for the project, taken from the project's page on The Odin Project's website.

  1. If you haven’t already, set up your project with skeleton HTML/CSS and JS files.

  2. All of your book objects are going to be stored in a simple array, so add a function to the script (not the constructor) that can take user’s input and store the new book objects into an array. Your code should look something like this:

    let myLibrary = [];

function Book() {
// the constructor...
}

function addBookToLibrary() {
// do stuff here
}

  3. Write a function that loops through the array and displays each book on the page. You can display them in some sort of table, or each on their own “card”. It might help for now to manually add a few books to your array so you can see the display.*

  4. Add a “NEW BOOK” button that brings up a form allowing users to input the details for the new book: author, title, number of pages, whether it’s been read and anything else you might want.

  5. Add a button on each book’s display to remove the book from the library.

    • You will need to associate your DOM elements with the actual book objects in some way. One easy solution is giving them a data-attribute that corresponds to the index of the library array.

  6. Add a button on each book’s display to change its read status.

    • To facilitate this you will want to create the function that toggles a book’s read status on your Book prototype instance.

If you visit their page for that project, you can find plenty of finished examples of this project at the bottom.

Technologies Used

During the creation of this project, I used the following languages, frameworks, and tools:

  • HTML
  • CSS
  • JavaScript
  • Visual Studio Code

How to Use

(Back to Top)

  1. Click on the "New Book" button to add a book to the library.

    (image of button)

  2. Clicking this button brings up a popup window. Fill in the book's title, author, number of pages, and whether or not you've already read this book.

    (image of popup window with things filled in)

  3. (Optional): You can select your card's background color via the dropdown menu at the bottom of the popup window. Do this for fun, to apply colors according to categories, etc.

(image of this)

  1. When done, click Submit. Please note that attempting to leave a field blank yields an error.

(image of error)

  1. Once you click the Submit button, the popup window will close, and your book should now be displayed on the page in a card.

(image of card)

  1. You can edit whether or not you've read the book. You can also click the X in the upper right-hand corner to delete the book from your collection.

(image of X circled in red, or of a red arrow pointing to it)

Links

(Back to Top)

  1. Live Demo
  2. Code Repo (You are here)
  3. Blog Post -> "Project Breakdown: Library"