Grade Progress Planner

Grade Progress Planner is a student-focused web application for tracking study progress, credits, grades and grade average.

The project is built with HTML, CSS and JavaScript. It uses localStorage to save courses directly in the browser.

Demo

Add demo video or screenshot here later.

Features

• Add courses with course name, credits, grade, status and semester
• Edit existing courses
• Delete courses
• Search for courses
• Filter courses by status
• Track completed credits toward 180 credits
• Show missing credits
• Calculate weighted grade average
• Show study progress with a progress bar
• Separate courses by status such as passed, failed, planned and retake
• What-if simulator for testing how new grades can affect the average
• Data is saved in the browser with localStorage

Why I Built This

I wanted to build a project that was more focused on calculations and study planning, not only storing information in a list.

The idea came from wanting a simple tool where students can see their study progress, how many credits they have completed, and how grades affect their average. I also wanted to practice JavaScript logic by building something that calculates results based on user input.

What Was Interesting

The most interesting part was making the dashboard update automatically when courses were added, edited or deleted.

I also liked building the progress bar and the what-if simulator, because they made the project feel more useful than a normal course list.

What Was Challenging

The most challenging part was making the grade average calculation work correctly with different types of courses.

Some courses should count toward the grade average, while others may only count as passed credits. I had to think about how credits, grades, status and planned courses should work together.

Technologies Used

• HTML
• CSS
• JavaScript
• localStorage
• Git
• GitHub

Grade Logic

The project uses this grade scale:

Grade	Points
A	5
B	4
C	3
D	2
E	1
F	0

The grade average is calculated as a weighted average based on credits.

Courses marked as passed can count toward completed credits. Planned courses do not count as completed credits.

Project Structure

grade-progress-planner/ │ ├── index.html ├── README.md │ ├── css/ │ └── style.css │ └── js/ ├── app.js └── storage.js

How to Run the Project

1. Download or clone the project.
2. Open the folder in VS Code.
3. Open index.html with Live Server.
4. Add courses and test the dashboard.

Future Improvements

Possible improvements for the project:

• Add dark mode
• Add Norwegian and English language support
• Add charts for grade distribution
• Add sorting by semester
• Add export to CSV
• Add a target average calculator
• Add backend and database support later

Author

Mannat Gabria
Bachelor student in Computer Engineering at Western Norway University of Applied Sciences