https://github.com/neyhere07/fe2_moduletest_july
Employee Management Form: This project is a simple employee management form built with JavaScript. Users can input employee details such as name, profession, and age, all of which are required.
https://github.com/neyhere07/fe2_moduletest_july
html-css-javascript
Last synced: 12 months ago
JSON representation
Employee Management Form: This project is a simple employee management form built with JavaScript. Users can input employee details such as name, profession, and age, all of which are required.
- Host: GitHub
- URL: https://github.com/neyhere07/fe2_moduletest_july
- Owner: neyhere07
- Created: 2024-08-03T10:59:24.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-03T11:50:04.000Z (almost 2 years ago)
- Last Synced: 2025-03-02T16:48:57.107Z (over 1 year ago)
- Topics: html-css-javascript
- Language: JavaScript
- Homepage: https://neyhere07.github.io/FE2_ModuleTest_July/
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Tasks:
Make a simple form, execute the following event handlers. The form should contain 3 inputs - name, profession and age. All of these values are required. By default as soon as the user goes on the screen they see the default view with 0 added employees. A function is executed on click of this button which appends an object into an array. As they keep adding employees this array is mapped to show the data below Added Employees An error message is shown in red if the required fields are empty. A success message is shown in green if the fields are filled and the employee was added successfully. The structure of the array should be -
[{id:1,name:"jack",profession:"developer",age:20},
{id:2,name:"john",profession:"admin",age:28}.... and so on] (The ID is given automatically)
On clicking of the delete user button that specific object should be removed from the array and the div should disappear.
### Marking Scheme (100 Marks)
User interface (UI) design: [20 marks] The form should have 3 inputs for name, profession, and age. The form should have a button for adding employees. The UI should display the list of added employees The UI should display a success message in green and an error message in red.
Error message: [10 marks] An error message should be shown in red if the required fields are empty.
Success message: [15 marks] A success message should be shown in green if the fields are filled and the employee was added successfully.
Add employee function: [20 marks] An on-click function should append an object into the array with name, profession, and age. -he function should automatically generate a unique ID for each employee.
Mapping of added employees: [10 Marks] The array of added employees should be mapped to show the data below the "Added Employees" heading.
Deleting users: [25 Marks] A delete button should be available for each added employee. On clicking the delete button, the specific object should be removed from the array and the div should disappear.
Relevants Link: [Figma Link]( https://www.figma.com/file/rayp6Dv4jjCrj017Rmva5j/Adding-Employees?node-id=0%3A1&t=yJfLdgoyFmox5tZa-1)