gradebook +

Inspiration

my own grades were an inspiration cause they were going down and down

What it does

GradeBook+ is a client-side web application designed for student grade tracking and academic performance monitoring. The system provides a comprehensive dashboard for uploading, visualizing, and analyzing academic grades with gamification elements through an achievement badge system. The application focuses on helping students track their progress, set academic goals, and stay motivated through visual feedback and achievement unlocks.

How we built it

Frontend Architecture Single-Page Application (SPA): Built with vanilla HTML, CSS, and JavaScript using a class-based architecture Component-Based Design: Modular page system with dynamic navigation and content rendering State Management: Centralized application state managed through a main GradeBookApp class Local Storage Persistence: Client-side data persistence using browser localStorage for grades, exams, and badges UI/UX Design Patterns Card-Based Layout: Dashboard uses a grid system with card components for different data views Responsive Design: Mobile-first approach with flexible layouts and modern CSS techniques Visual Feedback: Gradient backgrounds, glassmorphism effects, and smooth transitions Navigation System: Single-page navigation with active state management Data Management CSV Processing: File upload system for batch grade import with drag-and-drop functionality Data Models: Structured data handling for grades, exams, and achievement badges Statistics Calculation: Real-time computation of academic metrics and performance indicators

Challenges we ran into

challenges were in case of deploying we got some problems .

Accomplishments that we're proud of

What we learned

we learned some transitions how to do that and also gradient backgrounds, making grid systems

What's next for gradebook +

nothing as of now , but planning to scale this if my grades improve

Built With

• css
• html
• javascript
• vanilla