FRONT - END DEVELOPMENT

ASSIGNMENT 3

STUDENT NAME:

YEAR: 2026

COLLEGE CODE: 1021005

COLLEGE NAME: Government arts college - Udumalpet

DEPARTMENT: Computer Science

SEMESTER: 4th Semester

ROLL NO: 2422k22

DATE: 10 – 03 - 2026

PROJECT TITLE: Simple Event Registration Page – Adding JavaScript

Interactivity

1. Problem Statement

The event registration webpage created in Assignment-1 using HTML and

enhanced in Assignment-2 using CSS provides a structured and visually

appealing interface for collecting participant information. Although the page

contains all the required fields and a styled layout, it lacks interactive

functionality and validation mechanisms.

JavaScript. Without validation, users may submit incomplete or incorrect data.

Additionally, the participant data entered in the form should be dynamically

displayed on the webpage without relying on backend technologies or databases.

Therefore, JavaScript is used to validate form inputs, handle user interactions,

and dynamically update the participants table. These improvements ensure that

the webpage behaves like a functional front-end application while still operating

entirely on the client side.

2. Objective

The objective of this assignment is to enhance the event registration page by

implementing JavaScript functionality. The goal is to make the webpage

interactive by adding form validation, dynamic data handling, and responsive

user feedback.

Using JavaScript, the form inputs are validated before submission to ensure

accurate data entry. The entered participant information is dynamically added to

the participants table without refreshing the page. The assignment demonstrates

how JavaScript can control webpage behavior and improve the user experience

while maintaining the design created using HTML and CSS.

This assignment requires implementing several JavaScript functionalities to

improve the interactivity and functionality of the registration webpage.

3.1 Form Validation:

All required input fields in the registration form are validated using JavaScript

before allowing submission. Fields such as name, email, phone number, date of

birth, gender, event selection, mode of participation, and college or company

name must contain valid data.

Validation rules ensure that the name field is not empty, the email follows a

proper format, the phone number contains exactly ten digits, and all required

selections are made. If any field contains invalid or missing information, the form

submission is stopped and an appropriate warning message is displayed.

3.2 Confirmation Checkbox Validation:

A declaration checkbox is included in the form stating that the user confirms the

accuracy of the entered details. JavaScript checks whether this checkbox is

selected before allowing form submission. If the checkbox is not selected, a

warning message is displayed and the registration process is prevented until the

user confirms the declaration.

Instead of using a static row in the participants table, JavaScript captures the

form data when the user submits the form. The entered information is then

inserted dynamically into the participants table as a new row.

The table displays important details including the participant's name, email,

phone number, selected event, and participation mode (online or offline). Each

new submission adds another row to the table, allowing multiple participants to

be displayed.

3.4 Prevent Page Reload:

JavaScript is used to prevent the default form submission behavior that normally

reloads the webpage. This is achieved using event handling techniques that stop

the default action and allow the script to process the form data instead.

By preventing the page reload, the table can be updated dynamically while

keeping the user on the same page.

3.5 Clear Form After Successful Submission:

Once the participant's details are successfully added to the table, the form fields

are automatically reset using JavaScript. This allows the next user to enter their

information easily without manually clearing the fields. Validation messages are
also removed, while the participants table retains all previously registered

entries.

3.6 Display Success Message:

After successful registration, a confirmation message such as “Registration

Successful!” is displayed on the page. This message provides feedback to the

user that the submission has been completed successfully.

The message automatically disappears after a few seconds using the JavaScript

setTimeout() function to maintain a clean interface.

3.7 Input Field Feedback:

To improve the user experience, JavaScript provides visual feedback for form

inputs. Fields containing invalid data are highlighted in red, while correctly filled

fields are highlighted in green. When the user corrects the input, the highlight

changes accordingly. This immediate feedback helps users identify and fix errors

quickly.

3.8 Optional Enhancements:

Additional enhancements may be implemented to improve the functionality of the

webpage. These may include displaying the total number of registered

participants, adding a delete button to remove participant rows from the table,
preventing duplicate email registrations, or showing a summary of the selected

event before final submission.

4. JavaScript Concepts Used

Several JavaScript concepts are applied to implement the interactive features in

this assignment. DOM selection methods such as getElementById() and

querySelector() are used to access HTML elements. Event handling using

addEventListener() allows the script to respond to user actions such as form

submission.

Form validation logic is implemented using conditional statements to check

whether the inputs meet the required criteria. Dynamic elements are created

using methods like createElement() and appendChild() to insert new rows into

the participants table.

Regular expressions are used to validate email format and numeric input for

phone numbers. The setTimeout() function is used to automatically remove

success messages after a short duration. These concepts together demonstrate

how JavaScript can control webpage behavior.

5. Implementation Steps

1. The HTML page created in Assignment-1 and styled in Assignment-2 was

used as the base webpage.

3. DOM elements such as the form, input fields, checkbox, and participants

table were selected using JavaScript.

4. An event listener was added to the form submission event.

5. Form validation logic was implemented to verify all required inputs.

6. The declaration checkbox was validated to ensure user confirmation before

submission.

7. The default form submission behavior was prevented using JavaScript.

8. The entered participant data was captured and inserted dynamically into

the participants table.

9. A success message was displayed after successful registration using

JavaScript.

10. The form fields were automatically reset after successful submission.

11. Input feedback highlighting was implemented to show valid and

invalid entries.
6. Output
 7. Learning Outcome

Through this assignment, a practical understanding of JavaScript interactivity

and client-side programming was developed. The assignment provided

experience in working with DOM manipulation, form validation techniques, event

handling, and dynamic content updates.

The implementation also demonstrated how JavaScript enhances user experience

by providing immediate feedback, preventing incorrect data submission, and

dynamically updating webpage content without refreshing the page.

8. Conclusion

The event registration webpage was successfully enhanced by integrating

JavaScript functionality. The addition of form validation, dynamic table updates,

and user feedback transformed the webpage into an interactive front-end

application.

This assignment demonstrated the importance of JavaScript in controlling the

behavior of webpages and improving usability. By combining HTML, CSS, and

JavaScript, a complete front-end solution was developed that simulates a real-

world event registration system without the need for backend technologies.