📚 Study Planner

A smart study planning tool designed to help students organize academic schedules and track progress effectively.

📋 Overview

Study Planner is a web-based application that helps students manage their study schedules, track assignments, and monitor academic progress. Built as a learning project to explore frontend development with vanilla JavaScript and responsive design principles.

Project Goals:

• Learn frontend web development fundamentals
• Build a practical productivity tool for students
• Explore DOM manipulation and event handling
• Implement responsive design for mobile and desktop

✨ Features

Current Features

• 📅 Interactive Calendar - Visual schedule management interface
• ✅ Task Management - Add, edit, and complete study tasks
• 📊 Progress Tracking - Monitor completion and study time
• 🎯 Priority System - Organize tasks by importance
• 📱 Responsive Design - Works on mobile and desktop
• 💾 Local Storage - Data persists across sessions

Planned Features

• Study session timer (Pomodoro technique)
• Subject categorization
• Grade tracking
• Study statistics and analytics
• Export schedule to PDF
• Reminder notifications

🛠️ Tech Stack

Frontend:

• HTML5 - Structure and semantics
• CSS3 - Styling and responsive design
• JavaScript (ES6+) - Interactivity and logic

Storage:

• LocalStorage API - Client-side data persistence

Development Tools:

• Git & GitHub - Version control
• VS Code - Development environment

📦 Installation

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• No server or dependencies required!

Setup

1. Clone the repository

   git clone https://github.com/Akshat-Neeraj/Study-Planner.git
   cd Study-Planner

2. Open in browser

   # Simply open index.html in your browser
   # Or use a local server:
   python -m http.server 8000
   # Then navigate to: http://localhost:8000

That's it! No build process or dependencies needed.

🚀 Usage

Adding a Study Task

1. Click the "Add Task" button
2. Enter task details:
   • Task name
   • Subject
   • Due date
   • Priority level
3. Click "Save"

Managing Tasks

• Mark Complete: Click the checkbox next to a task
• Edit Task: Click the edit icon
• Delete Task: Click the delete icon
• Filter Tasks: Use the filter dropdown to view by priority or subject

Viewing Progress

• Check the progress bar to see completion percentage
• View total study time in the statistics panel
• Track upcoming deadlines in the calendar view

📁 Project Structure

Study-Planner/
├── index.html          # Main HTML file
├── css/
│   ├── style.css      # Main stylesheet
│   └── responsive.css # Mobile responsive styles
├── js/
│   ├── app.js         # Main application logic
│   ├── calendar.js    # Calendar functionality
│   └── storage.js     # LocalStorage handling
├── assets/            # Images and icons
└── README.md          # This file

🎓 Learning Outcomes

This project helped me learn:

• JavaScript DOM Manipulation - Dynamic content updates
• Event Handling - User interactions and callbacks
• LocalStorage API - Client-side data persistence
• Responsive Design - Mobile-first CSS approach
• CSS Flexbox & Grid - Modern layout techniques
• ES6+ Features - Arrow functions, template literals, destructuring

🗺️ Development Timeline

February 2026 - March 2026

• Project planning and wireframing
• HTML structure and semantic markup
• CSS styling and responsive design
• JavaScript functionality implementation
• LocalStorage integration
• Testing and bug fixes
• Additional features (planned)

💡 Key Features Explained

Interactive Calendar

The calendar view allows students to:

• See all tasks at a glance
• Click on dates to add tasks
• View upcoming deadlines
• Navigate between months

Progress Tracking

Track your study progress with:

• Completion percentage
• Total tasks vs completed tasks
• Study time tracking
• Visual progress indicators

Priority System

Organize tasks by priority:

• High: Urgent assignments and exams
• Medium: Regular homework and projects
• Low: Optional reading and review

🤝 Contributing

This is a personal learning project, but feedback and suggestions are welcome!

Ways to contribute:

• Report bugs or issues
• Suggest new features
• Share learning resources
• Provide UI/UX feedback

📄 License

This project is open source and available under the MIT License.

📧 Contact

Akshat Neeraj

• LinkedIn: linkedin.com/in/akshat-neeraj
• GitHub: @Akshat-Neeraj
• Email: akshatneeraj24680@gmail.com

---

🙏 Acknowledgments

• Built as part of my frontend development learning journey
• Inspired by various productivity and study planning tools
• Thanks to the web development community for resources and tutorials

---

⭐ Star this repo if you find it useful!

📢 Check out my other projects: GitHub Profile