🏫 Library Management System 📚

JS-VITE-WITH-MOCK-SERVER

Please do NOT use VSCode live-server. It will not work. Use the npm commands suggested to you here.

Installation

Use node version(LTS) should be v16.16.0
Don't change/override package.json
Download and unzip the boilerplate
Navigate to the correct path

npm install --engine-strict

Start only the Backend server

npm run server

Start only Frontend server

npm run start

Start both BE & FE in a single command

npm run watch

Important files

├── index.html
├── scripts
│   └── main.js
└── styles
    └── style.css

Problem statements

Problem 1. List of books on page load [3]

On page load, a list of all books should be shown in the div#data-list-wrapper.

Expected markup (Book card list):

- The `div.card` is a card appended to the div with `div.card-list` where all such cards are appended.

Expected markup (example single card div inside card-list div):

Markup - elements, classes & IDs should be identical to the above screenshot.
The Card with div.card and data-id={id of div} having two child div
1. The div.card-image in this image of the book is present.
2. The div.card-body in this
- h4 tag with h4.card-title with title of book.
- p tag with p.card-author with the author of the book
- p tag with p.card-category with category of book
- p tag with p.card-price with the price of a book
- anchor tag with a.card-link with Edit text
  - class= card-link
  - href=#
  - data-id= id of the book
- button with button. card-button with Delete text
  - class= card-button
  - data-id= id of the book

Expected UI (example card):

Data mapping:

The data should be fetched from ${baseServerURL}/books
The books should be shown on page load

Problem 2. Ability to add new Books [2]

make a 'POST' request at ${baseServerURL}/books the page must not reload the list must update

Problem 3. Ability to delete a Book [2]

In each book, the card adds a button Delete with button.card-button on clicking this button particular book must be removed from DOM as well as db.json.
make a 'DELETE' request at ${baseServerURL}/books/{bookId} the page must not reload the list must update

Problem 4. Ability to update all the fields of a book [2]

Able to populate the following input on edit link click.
add an event listener with click to anchor tag with class .card-link use preventDefault.
The page should not re-load on the click of the EDIT link .card-link.

To update all fields

#update-book-id should be populated with the id of the book
#update-book-title should be populated with the title of the book
#update-book-image should be populated with the image URL of the book
#update-book-author should be populated with the author of the book
#update-book-category should be populated with the category of the book
#update-book-price should be populated with the price of the book

make a 'PATCH' request at ${baseServerURL}/books/${bookId} to updated title , image ,author ,category and price
the page must not reload
the list must update

Problem 5. Ability to update only the Price [1]

Able to populate the following input on edit link click.
#update-price-book-id should be populated with the id of the book
#update-price-book-price should be populated with the price of the book
Once the edit inputs are populated, if the user clicks #update-price-book button.
the price of that particular book should update based on the value entered in the #update-price-book-price.
The price of the book in the list should update without any page reloads.
make a 'PATCH' request at ${baseServerURL}/books/${bookId}

Problem 6. Sorting Books Based on Price [1]

Sorting for Low to High UI:

With the click of the button #sort-low-to-high, the book list should be sorted in ascending order based on their price.

With the click of the button #sort-high-to-low, the book list should be sorted in descending order based on their price.

You may use any approach of your choice for sorting. You may sort the available data or you may make a new fetch request to the server and update the list. In case you want to fetch data, please use the JSON Server documentation.

Problem 7. Filtering Books based on the category [1]

You have to create three types of filters as

Classic
Fantasy
Mystery

Filtering for Fantasy UI:

When the button #filter-Classic is clicked, the book list is expected to be filtered. It should only show the books whose category is Classic.

When the button #filter-Fantasy is clicked, the book list is expected to be filtered. It should only show the books whose category is Fantasy.

When the button #filter-Mystery is clicked, the book list is expected to be filtered. It should only show the books whose category is Mystery.

You may use any approach of your choice for filtering. You may filter the available data or you may make a new fetch request to the server and update the list. In case you want to fetch data, please refer to the JSON Server documentation.

Problem 8. Search by title/author [1+1]

To implement search functionality on top there is a select tag with options as to search by category

title
author

first select(select#search-by-select) category and then type input (input#search-by-input) value for title name / author name and apply to booksData on click of search button(button#search-by-button).

You may use any approach of your choice for search functionality. You may use the available data or you may make a new fetch request to the server (with params as ?${title/author}_like=${title name/author name}) and update the list. In case you want to fetch data, please refer to the JSON Server documentation.

Note:- Get the updated data from API after POST,PATCH or DELETE request is done.

Adhamkazi/JS-Library-Management-System