https://github.com/dak79/odin-library
Object constructors, prototypical inheritance, JavaScript classes
https://github.com/dak79/odin-library
css git html javascript
Last synced: 3 months ago
JSON representation
Object constructors, prototypical inheritance, JavaScript classes
- Host: GitHub
- URL: https://github.com/dak79/odin-library
- Owner: dak79
- Created: 2022-08-30T20:20:04.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-26T13:27:30.000Z (about 3 years ago)
- Last Synced: 2025-06-04T21:30:48.327Z (about 1 year ago)
- Topics: css, git, html, javascript
- Language: JavaScript
- Homepage:
- Size: 55.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Library
## Live Preview
[Library](https://dak79.github.io/odin-library/)
## Description
This project is part of [The Odin Project - Full Stack JavaScript Path](https://www.theodinproject.com/lessons/node-path-javascript-library).
This project had two stages: in the first stage Library app was using object and object constructors. In the second stage the code was refactored with `class` syntax. The main goal is to organize JavaScript code in Objects (later in class) and get some experience with prototype inheritance end OOP in JavaScript.
## Technologies
- HTML
- CSS
- JavaScript
- Git
## Assignment
- First stage:
- Set up your project with skeleton HTML/CSS and JS files.
- 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.
- Write a function that loops through the array and displays each book on the page.
- 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.
- 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.
- 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.
- NOTE: You’re not required to add any type of storage right now. You will have the option to come back to this project later on in the course.
- Second stage:
- Go back to your “Library” example and refactor it to use class instead of plain constructors.
- Don’t forget to use the git workflow (branches) you learned in this foundations lesson to work on a new feature. You should get used to working like this!