Skip to content

Plibrary is an lightweight book-tracking web application which uses localStorage to preserve data

License

Notifications You must be signed in to change notification settings

0xabdulkhaliq/plibrary

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

project-cover


Installation

Note

A live deployment of Plibrary is available on GitHub pages

For those that would like to run the application and/or edit its source code on their local computer, follow the steps below:

  1. Clone the repository with git clone https://github.com/0xabdulkhalid/plibrary or download it as a .zip file and extract it.
  2. Navigate to where the repository is saved on your local machine and open up its index.html file on your preferred web browser.

Usage

  • To add a book to your library, click on the "Add Book" button in order to open up a modal
  • Fill up the form within such, inputting data related to the book that you'd like to track
  • After clicking save, you should then see the book appear in your library.
  • Then you can mark it as read or unread, and to delete from book-tracking.

Preview

Desktop
desktop preview
Tablet Mobile
tablet preview mobile preview

Outcome

  • Used HTML5 semantic elements for better accessability and readability
  • Saves user's books in local storage which helps to retrive after refresh
  • Comes with lightweight User Interface with friendly User Experience
  • Site was built responsive via Mobile first workflow
  • Cross tested on Firefox and Chromium based browsers

What I learned

  • Usage of checkbox's :checked property to achieve form's pop-out without javascript need
  • Effectively utilized the usage of ES6's classes which helps to write less lines of code (instead of Prototyping in Js)
  • Quick hack of static declaration for class's methods to call it without initialization of object
  • Utilization of localStorage mechanism of Web Storage
  • A lot of minor things

Built With

  • HTML5
  • CSS3
  • JavaScript

Tools Used

  • Shell Script
  • Google
  • Visual Studio Code

Contributing

Feel free to submit an issue should a bug be found using the application. One is also welcome to make a pull request should they seek to make a major change or introduce a new feature.


License


Contact

Website     Linkedin