Plibrary

<div align=center> <img src='./assets/designs/cover.png' alt='project-cover'> </div> <hr><br>

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.

<br>

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.

<br>

Preview

| Desktop | | :-------------: | | <img src='./assets/designs/desktop.png' alt='desktop preview'> |

| Tablet | Mobile | | :-----: | :-----: | | <img src='./assets/designs/tablet.png' width='580px' alt='tablet preview'> | |

<br>

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

<br>

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

<br>

Built With

• 
• 
• 

<br>

Tools Used

• 
• 
• 

<br>

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.

<br>

License

• MIT License
• Copyright © 2023 - 0xabdulkhalid

<br>

Contact

<div align=center> <a href="https://www.0xabdulkhalid.ml"> <img src="https://img.shields.io/badge/website-414751?style=for-the-badge&logo=About.me&logoColor=CDC2BC" alt="Website"> </a> &nbsp;&nbsp;&nbsp; <a href="https://linkedin.com/in/0xabdulkhalid" target="_blank"> <img src="https://img.shields.io/badge/linkedin-%2300acee.svg?color=405DE6&style=for-the-badge&logo=linkedin&logoColor=white" alt=Linkedin> </a> </div> <br>