A simple and interactive online learning platform built using HTML5, CSS3, and JavaScript. The application simulates student activities such as logging in, watching lectures, submitting assignments, and downloading certificates using JavaScript prototypal inheritance.
Student Online Learning Platform is a front-end JavaScript project designed to demonstrate object-oriented programming concepts in JavaScript, particularly Prototypal Inheritance.
The application displays student cards and allows users to perform various learning activities through interactive buttons. Each action updates the student's current status dynamically on the webpage.
- 👨🎓 Display multiple student profiles
- 🔐 Student login functionality
- 🎥 Watch online lectures
- 📝 Submit assignments
- 📜 Download course certificates
- ⚡ Dynamic status updates
- 🖱️ Interactive button actions
- 🎨 Clean card-based user interface
- HTML5
- CSS3
- JavaScript (ES6)
- Objects
- Arrays
- Functions
- DOM Manipulation
- Event Handling
- Template Literals
forEach()Method- Prototypal Inheritance
- Object Reusability
Online-Learning-Platform/
├── Onlinelearningplatfrom.html
├── Onlinelearningplatform.css
└── README.mdgit clone https://github.com/21A35A0503/Online-Learning-Platform.gitcd Online-Learning-PlatformOpen the Onlinelearningplatfrom.html file in your preferred web browser.
No installation or additional setup is required.
-
The application displays student cards with enrolled courses.
-
Each student has four available actions:
- Login
- Watch Lecture
- Submit Assignment
- Download Certificate
-
Clicking an action button updates the student's activity status dynamically.
-
Common activities are inherited through a shared prototype object.
- Rahul Logged In
- Rahul is Watching Lecture
- Assignment Submitted
- Certificate Downloaded
- Priya Logged In
- Priya is Watching Lecture
- Assignment Submitted
- Certificate Downloaded
Through this project, I gained hands-on experience in:
- Implementing prototypal inheritance in JavaScript.
- Reusing methods across multiple objects.
- Dynamically generating HTML content.
- Handling user interactions through events.
- Updating webpage content using DOM manipulation.
- Building interactive front-end applications without frameworks.
- Add more student profiles dynamically.
- Track course completion progress.
- Display assignment grades.
- Store activity history using Local Storage.
- Add student authentication.
- Integrate backend APIs for real course data.
- Improve responsiveness for mobile devices.
Harika Neela
GitHub: https://github.com/21A35A0503
If you found this project useful, please consider giving it a Star ⭐ on GitHub.
This project is created for educational and learning purposes.