A comprehensive web-based school management system built with HTML, CSS, and JavaScript. This system provides separate portals for students and teachers to manage daily school operations including attendance tracking, schedule management, results, and leave applications.
This lightweight school management system is designed to streamline administrative tasks and provide easy access to essential information for students, teachers, and parents. Built entirely with vanilla JavaScript, it requires no backend dependencies for basic functionality.
- Secure Login: Students can log in using unique credentials
- Attendance Tracking: View attendance records and statistics
- Results Dashboard: Access exam results and academic performance
- Schedule Management: Check class schedules and timetables
- Leave Application: Submit and track leave requests
- Leave Balance: Monitor remaining leave days
- Teacher Dashboard: Centralized hub for teacher activities
- Student Management: Add and manage student records
- Attendance Management: Mark and track student attendance
- Deadline Tracking: Monitor upcoming assignments and deadlines
- Leave Management: View and manage personal leave balance
- Parent Login: Secure access to student information
- Performance Monitoring: Track child's academic progress
- Attendance Overview: View attendance records
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- User Registration: Easy registration process for new students and teachers
- Intuitive Interface: Clean and user-friendly design
- Data Persistence: Local storage for maintaining user data
- HTML5: Semantic markup and structure
- CSS3: Styling and responsive layouts
- JavaScript (ES6+): Core functionality and interactivity
- Local Storage: Client-side data persistence
- A modern web browser (Chrome, Firefox, Safari, or Edge)
- A local web server (optional, for better development experience)
-
Clone the repository
git clone https://github.com/cxgx4/School-management-System.git cd School-management-System -
Open the application
- Simply open
index.htmlin your web browser - Or use a local server:
# Using Python 3 python -m http.server 8000 # Using Node.js (http-server) npx http-server
- Simply open
-
Access the application
- If using a local server, navigate to
http://localhost:8000 - Otherwise, directly open the HTML file in your browser
- If using a local server, navigate to
- Navigate to the student login page
- Enter your credentials or register if you're a new student
- Access your dashboard to view attendance, results, and schedules
- Submit leave applications through the leave management section
- Go to the teacher login page
- Log in with your teacher credentials
- Access the teacher dashboard
- Add new students, mark attendance, and manage deadlines
- Use the parent login portal
- Enter credentials to view your child's information
- Monitor attendance and academic performance
index.html- Main landing pagestudent-login.html- Student login interfaceteacherlogin.html- Teacher login interfacedashboard.html- Admin/main dashboardstudent-dashboard.html- Student portal dashboardaddstudent.html- Student registration formaddteacher.html- Teacher registration formleave.html- Leave application form- Various CSS files for styling each component
- JavaScript files for handling functionality
Since this is a demo application using local storage, you'll need to register users first or modify the JavaScript to include default credentials.
Contributions are welcome! If you'd like to improve this project:
- Fork the repository
- Create a new branch (
git checkout -b feature/improvement) - Make your changes
- Commit your changes (
git commit -m 'Add some improvement') - Push to the branch (
git push origin feature/improvement) - Open a Pull Request
- Data is stored in browser's local storage (clears when browser data is cleared)
- No backend authentication (suitable for demonstration purposes only)
- Limited to single-browser usage
- Backend integration for persistent data storage
- Real-time notifications
- Parent-teacher communication portal
- Assignment submission system
- Grade calculation and report card generation
- Email notifications for important updates
This project is open source and available under the MIT License.
cxgx4
- GitHub: @cxgx4
⭐ If you find this project helpful, please consider giving it a star!