Practical Questions for Javascript and JQuery (1.
5 Hours)
Question 1: Employee Data Processing Engine (10 Marks)
Create a JavaScript module to manage employee training records.
Sample Data:
const employees = [
{
id:101,
name:"Rahul",
department:"Development",
trainingsCompleted:8,
score:82
},
{
id:102,
name:"Anita",
department:"QA",
trainingsCompleted:5,
score:91
}
];
Requirements:
1. Display employees with score above 80.
2. Generate a new array containing employee names in uppercase.
3. Calculate average score using reduce().
4. Find employees who completed more than 5 trainings.
5. Use spread operator to add a new employee.
Question 2: Dynamic DOM Manipulation (10 Marks)
Create a Training Program section.
Requirements:
1. Create training cards dynamically using JavaScript.
2. Each card should contain:
o Training Name
o Trainer
o Duration
o Skill Level
3. Implement:
o Add Training
o Edit Training
o Delete Training
4. Use:
o createElement()
o appendChild()
o replaceChild()
o remove()
Question 3: Employee Registration Form Validation (10 Marks)
Create a registration form containing:
Employee Name
Practical Questions for Javascript and JQuery (1.5 Hours)
Email
Mobile
Department
Experience
Preferred Technology
Requirements:
1. Bootstrap invalid-feedback validation.
2. Validate:
o Empty fields
o Email format
o Mobile number
o Experience range
3. Display custom error messages.
4. Prevent submission until validation succeeds.
Question 4: Event Handling System (10 Marks)
Implement the following events:
1. Mouse hover effect on cards.
2. Double click to open employee details.
3. Keyboard search filtering.
4. Form submission event.
5. Window load event.
Requirements:
Use event object.
Demonstrate event bubbling.
Stop event propagation where necessary.
Question 5: Object-Oriented Training Management System (10 Marks)
Design the following class structure:
Parent Class
Person
Properties:
id
name
Methods:
getDetails()
Child Class
Trainer
Additional Properties:
specialization
experience
Requirements:
1. Constructor
2. Inheritance
3. Method overriding
4. Static method
5. Getter and Setter
Practical Questions for Javascript and JQuery (1.5 Hours)
6. Private property using #
Demonstrate all concepts with examples.
Question 6: API Integration using Fetch API (10 Marks)
Use DummyJSON API: [Link]
Requirements:
1. Fetch users.
2. Display in table format.
3. Show loading indicator.
4. Handle API failures.
5. Add search functionality.
6. Display first 20 records.
Bonus:
Use async/await.
Question7: Advanced jQuery UI Module (10 Marks)
Create a Training Catalog Page.
Requirements:
1. Use advanced selectors.
2. Apply:
o hide()
o show()
o toggle()
o fadeIn()
o fadeOut()
o slideUp()
o slideDown()
3. Dynamically create course cards.
4. Change styles using jQuery.
5. Access and modify attributes.
6. Use $.each() for rendering data.
Submission Guidelines and Folder Structure
project/
│
├── [Link]
├── css/
│ └── [Link]
│
├── js/
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
│
└── assets/
Practical Questions for Javascript and JQuery (1.5 Hours)
Rules
1. Use ES6+ syntax wherever applicable.
2. Use Bootstrap 5.
3. Use jQuery CDN which is downloaded in your laptop.
4. No third-party validation libraries.
5. Write clean and modular code.
6. Proper comments required.
7. Responsive design mandatory.