Skip to content

21A35A0503/Online-Learning-Platform

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

🎓 Student Online Learning Platform

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.


📌 Project Overview

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.


✨ Features

  • 👨‍🎓 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

🛠️ Technologies Used

Frontend

  • HTML5
  • CSS3
  • JavaScript (ES6)

JavaScript Concepts Applied

  • Objects
  • Arrays
  • Functions
  • DOM Manipulation
  • Event Handling
  • Template Literals
  • forEach() Method
  • Prototypal Inheritance
  • Object Reusability

📂 Project Structure

Online-Learning-Platform/
├── Onlinelearningplatfrom.html
├── Onlinelearningplatform.css
└── README.md

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/21A35A0503/Online-Learning-Platform.git

2. Navigate to the Project Folder

cd Online-Learning-Platform

3. Run the Project

Open the Onlinelearningplatfrom.html file in your preferred web browser.

No installation or additional setup is required.


🎮 How It Works

  1. The application displays student cards with enrolled courses.

  2. Each student has four available actions:

    • Login
    • Watch Lecture
    • Submit Assignment
    • Download Certificate
  3. Clicking an action button updates the student's activity status dynamically.

  4. Common activities are inherited through a shared prototype object.


📸 Example Activities

Rahul – JavaScript

  • Rahul Logged In
  • Rahul is Watching Lecture
  • Assignment Submitted
  • Certificate Downloaded

Priya – React

  • Priya Logged In
  • Priya is Watching Lecture
  • Assignment Submitted
  • Certificate Downloaded

🎯 Learning Outcomes

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.

🔮 Future Enhancements

  • 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.

👩‍💻 Author

Harika Neela

GitHub: https://github.com/21A35A0503


⭐ Support

If you found this project useful, please consider giving it a Star ⭐ on GitHub.


📄 License

This project is created for educational and learning purposes.

About

An interactive online learning platform built with HTML, CSS, and JavaScript featuring dynamic student activity tracking using prototypal inheritance.

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages