Please do NOT use VSCode live-server. It will not work. Use the npm commands suggested to you here.
npm install --engine-strict
npm run server
npm run start
npm run watch
.
├── index.html
├── scripts
│ └── main.js
└── styles
└── style.css
- 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
✅ 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.
- 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.
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
- make a 'POST' request at
${baseServerURL}/employees
the page must not reload the list must update
- 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 theid
of the employee#update-employee-name
should be populated with thename
of the employee#update-employee-image
should be populated with theimage URL
of the employee#update-employee-dept
should be populated with thedepartment
of the employee#update-employee-salary
should be populated with thesalary
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
-
Able to populate following input on edit link click.
-
#update-score-employee-id
should be populated with theid
of the employee -
#update-score-employee-salary
should be populated with theprice
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}
- 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
- When the button
#filter-less-than-1L
is clicked, the employee list is expected to be filtered. It should only show the employees whosesalary
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 whosesalary
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
- 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 & notlocalhost: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.