Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>

Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Experiment Title: JavaScript Functions: Write function, which returns filtered array based on function,
which passed as a parameter

Aim/Objective
To create a JavaScript function that filters an array based on a filtering function passed as a
parameter. This allows dynamic filtering based on different conditions provided at runtime.

Description:

This JavaScript program defines a function that filters an array based on a callback function passed as
a parameter. The callback function determines the filtering condition, making the solution flexible for
different use cases, such as filtering even numbers, positive numbers, or values greater than a specific
threshold.

Prerequisites:

• JavaScript Functions: Understanding how to define and call functions.

• Callback Functions: Knowledge of passing functions as arguments to other functions.

• Array Methods: Familiarity with the .filter() method for filtering elements in an array.

• Arrow Functions: Understanding shorthand function expressions for concise code.

• Conditional Statements: Using logical conditions to define filtering criteria.

Pre-Lab: Before implementing the function, review and practice the following concepts:

1. Functions as Parameters:

2. Array Filtering Using .filter():

3. Callback Functions:

4. Arrow Functions:

In-Lab: Follow these steps to implement a JavaScript function that filters an array based on a function
passed as a parameter.
Steps to Implement:
1. Define an array with sample values.
2. Create a function that takes two parameters:
o An array to be filtered.
o A callback function that specifies the filtering condition.
3. Use the .filter() method to apply the filtering function.
4. Return the filtered array from the function.
5. Call the function with different filtering conditions and display the results using console.log().
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Procedure/Program:
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Analysis and Inferences:

 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Sample
Data andviva voce questions:
Results:

1. What is a callback function in JavaScript, and how is it used in filtering an array?

2. How does the .filter() method work in JavaScript?

3. What is the advantage of passing a function as a parameter instead of writing the filter
condition inside the main function?

4. How would you modify the program to filter odd numbers instead of even numbers?

5. Can you pass an anonymous function directly to .filter() instead of defining a named
function? Give an example.

Evaluator Remark (if Any):

Marks Secured _____ out of 50

Signature of the Evaluator with Date

Course Title FRONT END WEB DEVELOPMENT (EPAM) ACADEMIC YEAR: 2024-25
Course Code(s) 22CS2241F Page of
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Experiment Title: Error Storages Identify error storage by considering various Applications
Aim/Objective
To identify error storage mechanisms by analyzing various applications.

Description:

It aims to identify and analyze different error storage mechanisms used across various applications. It
focuses on how errors are logged, stored, and retrieved for debugging and maintenance. The
outcome will help in understanding efficient error management practices in software systems.

Prerequisites:

• Basic understanding of software development and application architecture.

• Knowledge of error handling techniques in programming languages (e.g., try-catch, exception

handling).

• Familiarity with logging tools and storage systems (e.g., log files, databases, cloud logging
services).

Pre-Lab: Before starting the lab activity, students should:

• Review basic error handling concepts in at least one programming language (such as Python,
Java, or JavaScript).

• Explore common logging mechanisms used in applications, such as file-based logs, database
logs, and cloud-based logging services (e.g., Logstash, ELK Stack, AWS CloudWatch).

• Understand the architecture of a sample application to trace how and where errors are
generated and stored.

• Set up a basic development environment with tools required for testing error logging (e.g., IDE,
local server, logging libraries).

• Prepare a checklist or template for analyzing error storage (e.g., location, format, retrieval
method, rotation policy).

In-Lab: During the lab session, students will:

• Select two or more applications (web, desktop, or mobile) for analysis of their error handling
and storage mechanisms.
• Trigger intentional errors (e.g., invalid inputs, broken API calls) to observe how the application
logs and stores them.
• Identify the error storage locations such as log files, system events, or cloud logging services.
• Analyze the format of stored errors (e.g., plain text, JSON, structured logs) and note how
accessible and readable they are.
• Compare logging tools/libraries used (e.g., Python’s logging, Java’s Log4j, or external tools like
Sentry or ELK Stack).
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

• Document the findings with screenshots, sample error messages, and storage paths.
• Discuss efficiency of the error storage mechanism in terms of speed, scalability, and ease of
debugging.

Procedure/Program:
Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Data and Results:

Analysis and Inferences:

 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Sample viva voce questions:

1. How do you handle runtime errors in a Java-based frontend application?

2. What is the purpose of using a logger like java.util.logging or Log4j?

3. How do you ensure user-friendly error messages while storing technical details for
developers?

4. Where are log files stored in your Java application, and how are they formatted?

5. What are the best practices for logging in GUI-based applications like JavaFX?

Evaluator Remark (if Any):

Marks Secured _____ out of 50

Signature of the Evaluator with Date

Course Title FRONT END WEB DEVELOPMENT (EPAM) ACADEMIC YEAR: 2024-25
Course Code(s) 22CS2241F Page of
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Experiment Title: JS DOM Events: Write all the tasks inside the index.js and an index.htmlfile. For each
task, you should create HTML template. Template for each task should be available in index.html file
(each task has a special block, that separated by the comment). For providing styles, use styles.css file.
(the same situation as for HTML template, each task has its own style block).

Aim/Objective
To implement and demonstrate various JavaScript DOM event handling tasks by organizing all
JavaScript logic inside index.js, corresponding HTML templates in index.html, and styling in styles.css,
with clear separation for each task using comment blocks for better modularity and readability.

Description:
This activity focuses on learning and applying JavaScript DOM events by handling different tasks in a
structured format. Each task includes a dedicated HTML section, corresponding JavaScript logic, and
specific CSS styling, all separated clearly using comment blocks in their respective files. This approach
promotes clean code organization and modular development.

Prerequisites:
• Basic understanding of HTML, CSS, and JavaScript.
• Familiarity with DOM (Document Object Model) concepts and structure.
• Knowledge of common JavaScript events (e.g., click, input, mouseover, keydown).
• Ability to link external CSS and JS files to an HTML document.
• Experience using browser developer tools for debugging and inspecting elements.

Pre-Lab: Before starting the lab activity, students should:

• Review the structure of an HTML document, including elements, attributes, and nesting.
• Understand the concept of the DOM and how JavaScript can interact with HTML elements
dynamically.
• Revise basic JavaScript syntax, especially functions, variables, and conditional statements.
• Learn common DOM methods such as getElementById, querySelector, addEventListener, and
innerHTML.
• Practice identifying and describing different types of events (e.g., mouse, keyboard, form
events).
• Set up a basic project structure with index.html, styles.css, and index.js files linked properly.

In-Lab: During the lab session, students will:

• Create separate HTML blocks in index.html for each DOM event task, clearly marked with
comment tags (e.g., <!-- Task 1 Start --> to <!-- Task 1 End -->).
• Write corresponding JavaScript code for each task in index.js, ensuring event listeners are used
appropriately (e.g., click, mouseover, keyup).
• Apply specific CSS styles for each task in styles.css, separated by comments for clarity (e.g., /*
Task 1 Styles */).
• Use console logging or on-screen messages to verify that the correct events are triggered.
• Debug issues using browser developer tools and inspect elements to ensure proper event
binding.
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Procedure/Program:
Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Data and Results:

Analysis and Inferences:

 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Sample viva voce questions:

1. What is the DOM, and how does JavaScript interact with it?

2. What is the purpose of the addEventListener() method in JavaScript?

3. Explain the difference between inline event handling and using external JavaScript files.

4. Can you name at least three commonly used DOM events and their use cases?

5. How do you prevent default behavior of an event (e.g., form submission)? Explain with an
example.

Evaluator Remark (if Any):

Marks Secured _____ out of 50

Signature of the Evaluator with Date

Course Title FRONT END WEB DEVELOPMENT (EPAM) ACADEMIC YEAR: 2024-25
Course Code(s) 22CS2241F Page of
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Experiment Title: Java Script BOM: Write a program to build puzzle game make use of BOM Objects

Aim/Objective
To develop a simple puzzle game using JavaScript by utilizing Browser Object Model (BOM) objects such
as window, document, navigator, screen, setTimeout, and setInterval to enhance interactivity and
control browser-based functionalities.
Description:
This activity focuses on learning and applying JavaScript DOM events by handling different tasks in a
structured format. Each task includes a dedicated HTML section, corresponding JavaScript logic, and
specific CSS styling, all separated clearly using comment blocks in their respective files. This approach
promotes clean code organization and modular development.

Prerequisites:
• Basic understanding of HTML, CSS, and JavaScript.
• Familiarity with DOM (Document Object Model) concepts and structure.
• Knowledge of common JavaScript events (e.g., click, input, mouseover, keydown).
• Ability to link external CSS and JS files to an HTML document.
• Experience using browser developer tools for debugging and inspecting elements.

Pre-Lab: Before starting the lab activity, students should:

• Revise the concept of the Browser Object Model (BOM) and its key objects like window,
navigator, screen, location, and history.
• Understand the usage of timing functions such as setTimeout() and setInterval() for controlling
time-based events.
• Review basic JavaScript DOM manipulation techniques to update game elements dynamically.
• Prepare a basic project structure with index.html, styles.css, and script.js files linked correctly.
• Plan the layout of the puzzle game, including game board, start/reset buttons, and a timer
section.

In-Lab: During the lab session, students will:

• Design a basic puzzle layout (e.g., a sliding tile puzzle or number shuffle) in index.html using
divs or buttons to represent game pieces.
• Style the puzzle grid and pieces in styles.css to create a visually appealing game board.
• Write JavaScript code in script.js to handle puzzle logic such as shuffling, swapping tiles, and
checking for the win condition.
• Use BOM objects like:
o window.alert() to show instructions or winning messages,
o setInterval() to implement a game timer,
o setTimeout() to introduce delays (e.g., showing a hint or auto-reset),
o navigator.userAgent to display user browser info (optional for bonus).
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>
• Add interactivity using event listeners for player moves and buttons like Start, Shuffle, or Reset.
• Test the puzzle game to ensure the logic works correctly and all BOM features are functioning
as intended.
• Document the code with comments explaining how BOM objects are being used.

Procedure/Program:
Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Data and Results:

Analysis and Inferences:

 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Sample viva voce questions:

1. What is the Browser Object Model (BOM), and how is it different from the DOM?

2. Which BOM methods did you use in your puzzle game, and what were their purposes?

3. How does setInterval() differ from setTimeout(), and where did you use them in your game?

4. Explain how you used window.alert() or window.confirm() in your project.

5. Can you list some properties of the navigator and screen objects that can be used to enhance
user experience?

Evaluator Remark (if Any):

Marks Secured _____ out of 50

Signature of the Evaluator with Date

Course Title FRONT END WEB DEVELOPMENT (EPAM) ACADEMIC YEAR: 2024-25
Course Code(s) 22CS2241F Page of
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Experiment Title: JavaScript OOPs Concepts and react Hooks: Implement react hooks by using student
grade system

Aim/Objective
To implement a Student Grade System using JavaScript Object-Oriented Programming (OOPs) concepts
and React Hooks, demonstrating state management, component-based architecture, and reusability in
a modern frontend development workflow.

Description:

This project involves building a Student Grade System that utilizes JavaScript Object-Oriented
Programming (OOPs) concepts for data modeling and logic, along with React Hooks (useState,
useEffect, etc.) for managing component state and lifecycle in a functional way. The system allows
users to add, update, and display student grades dynamically with an interactive UI.

Prerequisites:

• Understanding of HTML, CSS, and JavaScript (ES6+).

• Basic knowledge of JavaScript OOP concepts such as classes, constructors, methods, and
inheritance.

• Familiarity with React.js fundamentals – components, props, and JSX.

• Hands-on experience with React Hooks like useState and useEffect.

• Knowledge of array operations (e.g., map, filter, reduce) for data manipulation.

• Working setup of Node.js and React development environment (e.g., Create React App).

Pre-Lab: Before starting the lab activity, students should:

• Review JavaScript OOP concepts such as classes, objects, constructors, and methods for
structuring student data.
• Revise React fundamentals, including creating functional components and using props.
• Understand how React Hooks work, especially useState for managing component state and
useEffect for side effects.
• Set up a React project using Create React App or another preferred setup.
• Plan the component structure, such as components for student form input, grade list display,
and overall layout.
• Prepare sample student data for testing and practice how to add, update, and display it using
both OOP logic and React Hooks.

In-Lab: During the lab session, students will:

• Create a React application using Create React App or Vite.

• Design a class in JavaScript (e.g., Student) to model student data like name, ID, and marks,
applying OOP concepts.
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>
• Build functional React components for:
o Adding new student data
o Displaying a list of students with their grades
o Calculating grades based on marks
• Use useState Hook to manage form inputs and student list dynamically.
• Use useEffect Hook to trigger calculations or update the grade view when student data
changes.
• Implement user interactions such as adding, editing, and clearing student records.
• Style the components with basic CSS to enhance user experience.
• Test the functionality thoroughly to ensure all features work as expected.

Procedure/Program:
Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>
Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Data and Results:

Analysis and Inferences:

 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Sample viva voce questions:

1. What is the difference between a class and an object in JavaScript OOP?

2. How does useState work in React, and why is it used in this project?

3. Explain how you used the useEffect hook in the Student Grade System.

4. How do React components re-render when state is updated?

5. What are the advantages of using functional components and hooks over class-based
components in React?

Evaluator Remark (if Any):

Marks Secured _____ out of 50

Signature of the Evaluator with Date

Course Title FRONT END WEB DEVELOPMENT (EPAM) ACADEMIC YEAR: 2024-25
Course Code(s) 22CS2241F Page of
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Experiment Title: Student application by using angular: implement Student Grade and all academic
details by using angular

Aim/Objective
To develop a Student Application using Angular that manages student grades and academic details
through a structured component-based architecture, incorporating data binding, services, and routing
to create a dynamic and interactive user experience.

Description:
This project involves creating a web-based Student Application using Angular that allows users to
manage and view student academic details, including grades, subjects, and personal information. The
application utilizes Angular features such as components, services, routing, and two-way data binding
to build a responsive and scalable user interface. It demonstrates how Angular can be used for real-
time data handling and dynamic UI updates in an academic management system.

Prerequisites:
• Basic knowledge of HTML, CSS, and JavaScript.
• Understanding of TypeScript fundamentals, as Angular is built on it.
• Familiarity with Angular framework basics – components, modules, and templates.
• Knowledge of Angular CLI for project setup and command execution.
• Experience with two-way data binding, directives, and pipes.
• Awareness of Angular services and dependency injection.
• Understanding of routing and navigation in Angular applications.
• Working environment with Node.js, npm, and Angular CLI installed.

Pre-Lab: Before starting the lab activity, students should:

• Install Angular CLI and set up the development environment using npm.
• Create a new Angular project using ng new and understand its folder structure.
• Review key Angular concepts like components, modules, and services.
• Understand how to use two-way data binding with [(ngModel)].
• Learn how to define models (interfaces/classes) to structure student data.
• Plan the component hierarchy for features like student form, grade display, and academic
detail view

In-Lab: During the lab session, students will:

• Create components such as:

o student-form – to input student information
o grade-list – to display grades
o academic-details – to show full academic info
• Use Angular services to manage and share student data between components.
• Implement two-way data binding to update data in real-time.
• Use Angular directives and pipes to format and filter student data (e.g., GPA rounding, pass/fail
status).
• Create and navigate routes using Angular Router for a multi-page experience.
• Apply styling using CSS or Angular Material for a clean UI.
• Test the application to ensure data is being added, displayed, and navigated correctly.
• Debug and document the application with meaningful comments and structure.
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Procedure/Program:
Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>
Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>
 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Data and Results:

Analysis and Inferences:

 Experiment # <TO BE FILLED BY STUDENT> Student ID <TO BE FILLED BY STUDENT>
Date <TO BE FILLED BY STUDENT> Student Name <TO BE FILLED BY STUDENT>

Sample viva voce questions:

1. What is the role of components in Angular, and how did you use them in your student
application?

2. Explain two-way data binding in Angular with an example.

3. How are services used in Angular, and why are they important for this project?

4. What is routing in Angular, and how did you implement navigation between pages?

5. What are Angular pipes, and how did you use them in your project for formatting data?

Evaluator Remark (if Any):

Marks Secured ______ out of 50

Signature of the Evaluator with Date

Course Title FRONT END WEB DEVELOPMENT (EPAM) ACADEMIC YEAR: 2024-25
Course Code(s) 22CS2241F Page of