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

npm install --engine-strict

Start only 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

Maximum Marks - 15

The Submission should not contain spaces, for example /rct-101 folder/eval will not work
Do not push node_modules and package_lock.json to GitHub
Use node version(LTS) should be v16.16.0
Don't change/override package.json

Rubrics

✅ able to submit the app - 1 mark ( minimum score )
✅ Display list of employees on page load - 3 marks 
✅ Ability to add new Employee - 3 marks
✅ Ability to update all the fields of an employee - 2 marks
✅ Ability to update only the salary - 2 marks
✅ Ability to sort Low to high data - 1 mark
✅ Ability to sort high to low data - 1 mark
✅ Ability to filters of less than 1Lakh -1 mark
✅ Ability to filters greater than 1Lakh -1 mark

You haven't been taught cypress to run the test cases locally, you can see the passed/ failed test cases and test errors on CP itself.

Some Rules to follow:-

Use node version(LTS) should be v16.16.0
Don't change/override package.json
Before writing a single line of code please read the problem statement very carefully.
Don't change the already given ids or classes.
If you don't follow these rules, you might not get any marks even if you do everything correctly.

Problem statements

Problem 1. Display list of employees on page load [3]

fetch url: /employees On page load, a list all employees should be shown in div#data-list-wrapper.

UI:

Markup:

elements, classes & IDs should be identical to the below screenshot.
The data should be fetched , make a 'GET' request at ${baseServerURL}/employees
The employees should be shown on page load

Problem 2. Ability to add new Employee [3]

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

Problem 3. Ability to update all the fields of an employee [2]

Able to populate following input on edit link click.
add a 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 updated all fields

#update-employee-id should be populated with the id of the employee
#update-employee-name should be populated with the name of the employee
#update-employee-image should be populated with the image URL of the employee
#update-employee-dept should be populated with the department of the employee
#update-employee-salary should be populated with the salary of the employee

make a 'PATCH' request at ${baseServerURL}/employees/${empId} to updated name , image ,dept and salary
page must not reload
the list must update

Problem 4. Ability to update only the salary [2]

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

Problem 5. Ability to sort data by salary [2]

On click of the button #sort-low-to-high, the employee list should be sorted in ascending order based on their salary.
On click of the button #sort-high-to-low, the employee list should be sorted in descending order based on their salary.
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.
page must not reload
the list must update

Problem 6. Ability to filter data by salary [2]

When the button #filter-less-than-1L is clicked, the employee list is expected to be filtered. It should only show the employees whose salary is less than 1Lakh.
When the button #filter-more-than-equal-1L is clicked, the employee list is expected to be filtered. It should only show the employees whose salary is more than or equal to 1Lakh.
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.
page must not reload
the list must update

General guidelines

The system on cp.masaischool.com may take between 1-20 minutes for responding,
so we request you to read the problem carefully and debug it before itself
we also request you not just submit it last minute
try to keep one submission at a time
Use ${baseServerURL}/what-ever-route for server url & not localhost:9090/what-ever-route in your solution. Failing to do so may cause all the tests to fail.
If you try to use VSCodes live server, it won’t work. Use the npm commands provided in this file only.

vivmagarwal/js-dom-with-server--v3