🎓 Student Grade Calculator - Enhanced Flask Application

A beautiful, modern, and responsive Flask web application for calculating student grades with advanced features and stunning UI.

✨ Features

🎨 Modern UI/UX

• Tailwind CSS Integration - Beautiful gradient backgrounds and modern components
• Dark Mode - Toggle between light and dark themes with smooth transitions
• Responsive Design - Perfect on all devices (mobile, tablet, desktop)
• Smooth Animations - Engaging entrance animations and transitions
• Interactive Elements - Hover effects, ripple effects, and visual feedback

📊 Enhanced Functionality

• Real-time Calculation - See your results as you type
• Live Preview Panel - Instant percentage, grade, and status updates
• Visual Progress Bar - Track your performance visually
• Grade Letter System - A+, A, B+, B, C+, C, D, F grading
• Pass/Fail Detection - Automatic status calculation (40% passing)

📈 Data Visualization

• Chart.js Integration - Beautiful bar charts for subject-wise performance
• Doughnut Charts - Grade distribution visualization
• Color-coded Subjects - Easy identification with distinct colors
• Interactive Charts - Hover to see detailed information

📜 History Tracking

• Calculation History - Keep records of all calculations
• Detailed Breakdown - View past subject scores
• Timestamps - Track when each calculation was made
• Clear History - Option to remove all records

🎯 Additional Features

• Print Results - Generate printable report cards
• Confetti Animation - Celebration effect for passing grades
• Input Validation - Real-time color feedback for marks
• Keyboard Shortcuts - Ctrl+K to focus, Ctrl+Enter to submit
• Toast Notifications - User-friendly alert system
• Session Management - Secure data handling

🛠️ Technologies Used

Backend

• Flask - Python web framework
• Flask Sessions - For data persistence
• Python 3.x - Core programming language

Frontend

• Tailwind CSS - Utility-first CSS framework
• Custom CSS - Enhanced animations and effects
• JavaScript (ES6+) - Interactive functionality
• Chart.js - Data visualization library
• Font Awesome - Icon library
• Google Fonts (Poppins) - Modern typography

📁 Project Structure

Flask-revision-yashodeep/
├── main.py                 # Flask application with enhanced routes
├── templates/
│   ├── welcome.html       # Landing page with features
│   ├── index.html         # Form page with live preview
│   ├── result.html        # Results page with charts
│   └── history.html       # History tracking page
├── static/
│   ├── style/
│   │   ├── welcome_style.css   # Welcome page animations
│   │   ├── style.css           # Form page styles
│   │   └── result_style.css    # Result page styles
│   └── scripts/
│       └── scripts.js          # Enhanced JavaScript
└── README.md

🚀 Getting Started

Prerequisites

Python 3.7+
pip (Python package manager)

Installation

1. Clone the repository

cd Flask-revision-yashodeep

2. Install Flask

pip install Flask

3. Run the application

python main.py

4. Open in browser

http://127.0.0.1:5000

📖 Usage Guide

1. Welcome Page

• Click "Get Started" to begin calculating
• Click "View History" to see past calculations
• Toggle dark mode with the moon/sun icon

2. Calculator Page

• Enter marks for all 5 subjects (0-100)
• Watch the live preview update in real-time
• See color-coded input feedback
• Click "Calculate Grade" to see detailed results

3. Results Page

• View your percentage, grade, and pass/fail status
• Analyze performance with interactive charts
• Check subject-wise breakdown
• Print results or calculate again

4. History Page

• Review all past calculations
• See timestamps for each entry
• Clear history when needed

🎨 Color Scheme

• Purple (#9333ea) - Primary brand color
• Blue (#3b82f6) - Secondary accent
• Green (#10b981) - Success states
• Orange (#f59e0b) - Warning states
• Red (#ef4444) - Error/Fail states

📊 Grading System

Percentage	Grade	Status
90-100%	A+	Pass
80-89%	A	Pass
70-79%	B+	Pass
60-69%	B	Pass
50-59%	C+	Pass
40-49%	C	Pass
30-39%	D	Fail
0-29%	F	Fail

🔧 Customization

Change Subjects

Edit main.py and update the form processing:

# Add/remove subjects in the predict() function

Modify Passing Percentage

Change the threshold in main.py:

result = "Success ✅" if score >= 40 else "Fail ❌"  # Change 40 to your value

Adjust Colors

Update Tailwind classes in HTML files or modify CSS files.

🌟 Key Improvements from Original

1. ✅ Modern UI with Tailwind CSS
2. ✅ Dark mode functionality
3. ✅ Responsive design for all devices
4. ✅ Real-time calculation preview
5. ✅ Interactive charts and visualizations
6. ✅ History tracking system
7. ✅ Grade letter system (A+, A, B+, etc.)
8. ✅ Smooth animations and transitions
9. ✅ Print functionality
10. ✅ Enhanced user experience
11. ✅ Input validation with visual feedback
12. ✅ Keyboard shortcuts
13. ✅ Session management
14. ✅ Toast notifications
15. ✅ Confetti celebration for passing

🐛 Troubleshooting

Port already in use?

python main.py --port 5001

CSS not loading?

• Clear browser cache (Ctrl+Shift+R)
• Check console for errors

Dark mode not persisting?

• Enable browser localStorage
• Check browser privacy settings

📝 Future Enhancements

• Export results to PDF
• Email results functionality
• Multiple student profiles
• Class/batch analysis
• Graphical trends over time
• Subject weight customization
• Multi-language support
• Authentication system

👨‍💻 Developer

Created with ❤️ by Yashodeep

📄 License

This project is open source and available for educational purposes.

🤝 Contributing

Feel free to fork, improve, and submit pull requests!

---

Happy Calculating! 🎓✨