Skip to content

Updated README of Typing Speed Race Game Frontend Project #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tejas-Santosh-Nalawade merged 3 commits into from
Oct 21, 2025
Merged

Updated README of Typing Speed Race Game Frontend Project #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bcdff10
Update README with game description
SOHAM-GADEKAR Oct 21, 2025
a62b84b
Added CGPA Calculator Frontend Project
SOHAM-GADEKAR Oct 21, 2025
0473182
Updated README
SOHAM-GADEKAR Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 214 additions & 0 deletions Domains/Frontend/MiniProjects/CGPACalculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
# 🎓 CGPA Calculator

**Contributor:** SOHAM-GADEKAR
**Domain:** Frontend
**Difficulty:** Beginner
**Tech Stack:** HTML, CSS, JavaScript

---

<img width="1033" height="1149" alt="image" src="https://github.com/user-attachments/assets/1bbeea12-a796-4973-bd33-0712f99055fb" />

---


## 📝 Description

A modern, responsive web application to calculate Cumulative Grade Point Average (CGPA) for up to 8 semesters (SPPU-style). Enter your SGPAs; the app averages the filled semesters. Perfect for students to track their academic performance!

---

## 🎯 Features

- ✅ **8 Semester Inputs** - Enter SGPA for each semester (Sem 1-8)
- ✅ **Live Validation** - Real-time validation (0-10 range)
- ✅ **Auto-calculation** - Updates CGPA as you type
- ✅ **Professional UI** - Modern gradients and smooth animations
- ✅ **Responsive Design** - Works on desktop, tablet, and mobile
- ✅ **Clear Summary** - Shows filled semesters count and sum of SGPAs
- ✅ **Toast Notifications** - User feedback for actions
- ✅ **Performance Comments** - Grade assessment based on CGPA
- ✅ **Input Validation** - Prevents invalid entries
- ✅ **Clear All Function** - Reset all inputs with one click

---

## 🛠️ Tech Stack

- **HTML5** - Semantic markup structure
- **CSS3** - Modern styling with Grid/Flexbox, gradients, animations
- **JavaScript (ES6+)** - Classes, DOM manipulation, real-time calculations
- **Responsive Design** - Mobile-first approach

---

## 🚀 How to Run

### Method 1: Direct Browser

1. Download or clone this folder
2. Open `index.html` in your browser
3. Start calculating your CGPA!

### Method 2: Live Server

1. Install VS Code Live Server extension
2. Right-click on `index.html`
3. Select "Open with Live Server"
4. App opens at `http://localhost:5500`

---

## 📁 Project Structure

```
CGPACalculator/
├── index.html # Main HTML file
├── style.css # Styling and responsive design
├── script.js # JavaScript functionality
└── README.md # Documentation
```

---

## 💻 Code Highlights

### CGPA Calculation Logic
```javascript
calculateCGPA() {
const values = this.semInputs
.map(i => parseFloat(i.value))
.filter(v => !Number.isNaN(v));

const sum = values.reduce((a, b) => a + b, 0);
const cgpa = sum / values.length;

this.cgpaValue.textContent = cgpa.toFixed(2);
}
```

### Real-time Input Validation
```javascript
// Recalculate on input change for instant feedback
this.semInputs.forEach(input => {
input.addEventListener('input', () => this.calculateCGPA());
});
```

### Performance Assessment
```javascript
getCGPAComment(cgpa) {
if (cgpa >= 9.0) return 'Excellent!';
if (cgpa >= 8.0) return 'Very Good!';
if (cgpa >= 7.0) return 'Good!';
if (cgpa >= 6.0) return 'Satisfactory';
if (cgpa >= 5.0) return 'Pass';
return 'Needs Improvement';
}
```

---

## 📚 Learning Outcomes

### Skills Practiced
- ✅ DOM Manipulation
- ✅ Event Handling
- ✅ Array Methods (filter, map, reduce)
- ✅ Real-time Calculations
- ✅ Input Validation
- ✅ CSS Grid/Flexbox
- ✅ Responsive Design
- ✅ JavaScript ES6 Classes

### Concepts Learned
- Object-oriented programming in JavaScript
- Real-time form validation
- Mathematical calculations in web apps
- Modern CSS gradients and animations
- Responsive design principles

---

## 🧮 Calculation Formula

```
CGPA = (SGPA₁ + SGPA₂ + ... + SGPAₙ) / n
```
Where `n` = number of filled semesters

### Example
- Sem 1: 8.5, Sem 2: 7.8, Sem 3: 9.2
- CGPA = (8.5 + 7.8 + 9.2) / 3 = 8.5

---

## 📊 Performance Comments

- **9.0+**: Excellent! 🌟
- **8.0+**: Very Good! 🎉
- **7.0+**: Good! 👍
- **6.0+**: Satisfactory ✅
- **5.0+**: Pass 📚
- **Below 5.0**: Needs Improvement 📈

---

## 🎨 Customization Ideas

Want to enhance this project? Try adding:

1. **Weighted CGPA** - Add credits per semester
2. **Grade Scale Options** - Different university systems
3. **Export Results** - Save CGPA as PDF/Image
4. **Semester History** - Track progress over time
5. **Dark Mode** - Toggle theme
6. **GPA to Percentage** - Conversion feature
7. **Multiple Students** - Profile management
8. **Charts/Graphs** - Visual progress tracking

---

## 🐛 Known Issues

None currently. Feel free to report any bugs!

---

## 🚀 Future Enhancements

- [ ] Add weighted CGPA calculation
- [ ] Implement different grade scales
- [ ] Add export functionality
- [ ] Include semester history tracking
- [ ] Add GPA to percentage conversion
- [ ] Implement dark mode toggle

---

## 🌐 Browser Support

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

---

## 📄 License

MIT License - Free to use and modify!

---

## 🤝 Contributing

This is a sample project for ProjectHive. Feel free to:
- Fork and enhance
- Report issues
- Suggest improvements
- Use as learning material

---

**Happy Calculating! 🎓✨**
90 changes: 90 additions & 0 deletions Domains/Frontend/MiniProjects/CGPACalculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CGPA Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>CGPA Calculator</h1>
<p>Calculate your Cumulative Grade Point Average</p>
</header>

<div class="calculator-section">
<div class="input-section">
<h2>Enter Semester SGPAs (SPPU - up to 8)</h2>
<div class="semesters-grid" id="semestersGrid">
<div class="semester-item">
<label for="sem1">Sem 1</label>
<input type="number" id="sem1" class="sem-input" placeholder="e.g., 8.25" min="0" max="10" step="0.01">
</div>
<div class="semester-item">
<label for="sem2">Sem 2</label>
<input type="number" id="sem2" class="sem-input" placeholder="e.g., 8.10" min="0" max="10" step="0.01">
</div>
<div class="semester-item">
<label for="sem3">Sem 3</label>
<input type="number" id="sem3" class="sem-input" placeholder="e.g., 7.85" min="0" max="10" step="0.01">
</div>
<div class="semester-item">
<label for="sem4">Sem 4</label>
<input type="number" id="sem4" class="sem-input" placeholder="e.g., 8.00" min="0" max="10" step="0.01">
</div>
<div class="semester-item">
<label for="sem5">Sem 5</label>
<input type="number" id="sem5" class="sem-input" placeholder="e.g., 8.40" min="0" max="10" step="0.01">
</div>
<div class="semester-item">
<label for="sem6">Sem 6</label>
<input type="number" id="sem6" class="sem-input" placeholder="e.g., 8.60" min="0" max="10" step="0.01">
</div>
<div class="semester-item">
<label for="sem7">Sem 7</label>
<input type="number" id="sem7" class="sem-input" placeholder="e.g., 8.75" min="0" max="10" step="0.01">
</div>
<div class="semester-item">
<label for="sem8">Sem 8</label>
<input type="number" id="sem8" class="sem-input" placeholder="e.g., 9.00" min="0" max="10" step="0.01">
</div>
</div>
</div>

<div class="results-section">
<div class="cgpa-display">
<h3>Your CGPA</h3>
<div class="cgpa-value" id="cgpaValue">0.00</div>
<div class="cgpa-grade" id="cgpaGrade">-</div>
</div>

<div class="summary">
<div class="summary-item">
<span>Filled Semesters:</span>
<span id="totalCredits">0</span>
</div>
<div class="summary-item">
<span>Sum of SGPAs:</span>
<span id="totalPoints">0</span>
</div>
</div>
</div>

<div class="actions">
<button id="calculateCGPA" class="btn-calculate">Calculate CGPA</button>
<button id="clearAll" class="btn-secondary">Clear All</button>
</div>
</div>

<div class="info-section">
<h3>How it works</h3>
<p>Enter the SGPA for each semester you have completed (up to 8). The calculator computes your CGPA as the simple average of the filled semesters, which aligns with SPPU's reported approach when only SGPAs are available.</p>
</div>
</div>

<script src="script.js"></script>
</body>
</html>


Loading
Loading