Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/odilson-dev/library
Project Library from TOP.
https://github.com/odilson-dev/library
book html-css-javascript library
Last synced: 2 days ago
JSON representation
Project Library from TOP.
- Host: GitHub
- URL: https://github.com/odilson-dev/library
- Owner: odilson-dev
- Created: 2024-02-08T21:14:57.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-28T17:47:13.000Z (7 months ago)
- Last Synced: 2024-05-17T15:26:41.561Z (6 months ago)
- Topics: book, html-css-javascript, library
- Language: JavaScript
- Homepage: https://odilson-dev.github.io/library/
- Size: 1.89 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Library Project from Odin
## Introduction
This project extends the 'Book' example from the previous lesson to create a small Library app using HTML, CSS, and JavaScript.
## Technologies Used
- HTML
- JavaScript
- CSS
## Learnings
- Setting up a project with HTML, CSS, and JavaScript files.
- Storing book objects in an array.
- Writing functions to manipulate the array of books.
- Displaying books on the page using DOM manipulation.
- Implementing user input forms to add new books.
- Handling form submissions and preventing default behavior.
- Associating DOM elements with book objects using data attributes.
- Adding functionality to remove books from the library.
- Implementing toggling of read status for each book.
## Project Structure
The project consists of the following files:
- `index.html`: HTML file for the main structure of the web app.
- `style.css`: CSS file for styling the web app.
- `script.js`: JavaScript file containing the logic for the Library app.
## Usage
To use the Library app:
1. Open `index.html` in a web browser.
2. Add new books using the "NEW BOOK" button and fill in the required details.
3. Click on individual books to toggle their read status.
4. Click on the "Remove" button to remove a book from the library.
## Future Improvements
- Implementing storage functionality to persist data.
- Enhancing the user interface with additional styling and features.
## Links
Here is the: [Course link](https://www.theodinproject.com/lessons/javascript-library)
Visit live site: [Library](https://odilson-dev.github.io/library/)