https://github.com/jcampbell57/odin-library

An interactive library app. The purpose of this project is to practice using JavaScript objects and object constructors.
https://github.com/jcampbell57/odin-library

css3 html5 javascript javascript-objects json localstorage serialization

Last synced: about 1 month ago
JSON representation

An interactive library app. The purpose of this project is to practice using JavaScript objects and object constructors.

• Host: GitHub
• URL: https://github.com/jcampbell57/odin-library
• Owner: jcampbell57
• Created: 2022-06-28T19:53:03.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-03T07:04:10.000Z (6 months ago)
• Last Synced: 2024-11-12T03:32:35.776Z (3 months ago)
• Topics: css3, html5, javascript, javascript-objects, json, localstorage, serialization
• Language: JavaScript
• Homepage: https://jcampbell57.github.io/odin-library/
• Size: 996 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Wormhole

## Project info

An interactive library app. The purpose of this project is to practice using JavaScript objects and object constructors.

Project description can be found [here](https://www.theodinproject.com/lessons/advanced-html-and-css-homepage)

## Live demo

Live demo available [here](https://jcampbell57.github.io/odin-library/)

## Table of Contents

* [Features](#features)

* [Technologies utilized](#technologies-utilized)

* [Learning outcomes](#learning-outcomes)

* [Project screenshots](#project-screenshots)

* [Behind the Scenes](#behind-the-scenes)

* [Installation](#installation)

## Features

- Ability to add books to the table

- Sortable table columns

- Interactive 'read' status

- stats display with number of books and total pages read

- Ability to delete books from the table

- Dark mode toggle

- localStorage integration to save books, as well as theme and column sorting preferences

## Technologies utilized

- HTML5

- CSS3

- JavaScript ES6

- JSON

## Learning outcomes

This project helped to reinforce the following skills:

- JavaScript objects and object constructors

- serialization with JSON

- localStorage integration

## Project screenshots

### Wormhole (light mode):

![wormhole1](assets/wormhole_light_600w.png)




### Add book (light mode):

![wormhole2](assets/wormhole_add_book_600w.png)




### Wormhole (dark mode):

![wormhole3](assets/wormhole_dark_600w.png)




### Add book (dark mode):

![wormhole4](assets/wormhole_dark_add_book_600w.png)

## Behind the scenes

### Improvements

This project could be improved with:

- mobile styling

- a transition or animation for the dialog modal display

### Resources

- [CSS reset](https://meyerweb.com/eric/tools/css/reset/)

- [Material Design Icons](https://pictogrammers.com/library/mdi/) for SVG icons.

## Installation

- Clone this repository to your desktop.

- Navigate to the top level of the directory by running `cd odin-library`.

- Open `index.html` in your browser.