Student Registration System

Project Overview

This project is a front-end based Student Registration System developed using HTML, CSS, and JavaScript. The objective of this project is to understand how real-world web applications manage user input, display dynamic data, and maintain data persistence without using any backend technology.

The system allows users to register student details, view registered records, edit existing data, and delete records when required.

Technologies Used

• HTML5 for structuring the web page using semantic elements
• CSS3 for styling, layout design, and responsive behavior
• JavaScript (Vanilla JS) for application logic, validation, and data handling
• Browser LocalStorage for storing data persistently

Key Features

• Student registration form with input validation
• Add new student records dynamically
• Edit existing student details
• Delete student records
• Data persistence using localStorage (data remains after page refresh)
• Responsive design for mobile, tablet, and desktop screens
• Vertical scrollbar added dynamically when records exceed visible area
• Clean and organized UI for better readability

Input Validation Rules

• Student Name accepts only alphabetical characters
• Student ID accepts only numeric values
• Email ID accepts only valid email formats
• Contact Number accepts only numeric values and must contain at least 10 digits
• Empty records cannot be submitted

These validations ensure data accuracy and prevent invalid user input.

Responsive Design

The application is fully responsive and adapts to different screen sizes using CSS media queries:

• Mobile devices (≤ 640px)
• Tablet devices (641px – 1024px)
• Desktop screens (≥ 1025px)

This improves usability across multiple devices.

Data Storage

The project uses the browser's localStorage to store student records. This ensures that data is not lost when the page is refreshed or reopened, simulating basic database behavior on the client side.

What I Learned from This Project

• Structuring web pages using semantic HTML
• Creating responsive layouts using CSS media queries
• Handling form submissions using JavaScript
• Implementing CRUD operations (Create, Read, Update, Delete)
• Validating user input using JavaScript and regular expressions
• Using localStorage to persist data on the client side
• Managing dynamic DOM manipulation
• Organizing code into separate files for better maintainability
• Using GitHub for version control with multiple commits

Project Structure