diff --git a/Domains/Frontend/MiniProjects/CGPACalculator/README.md b/Domains/Frontend/MiniProjects/CGPACalculator/README.md new file mode 100644 index 00000000..bb8b7dc7 --- /dev/null +++ b/Domains/Frontend/MiniProjects/CGPACalculator/README.md @@ -0,0 +1,214 @@ +# 🎓 CGPA Calculator + +**Contributor:** SOHAM-GADEKAR +**Domain:** Frontend +**Difficulty:** Beginner +**Tech Stack:** HTML, CSS, JavaScript + +--- + +image + +--- + + +## 📝 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! 🎓✨** diff --git a/Domains/Frontend/MiniProjects/CGPACalculator/index.html b/Domains/Frontend/MiniProjects/CGPACalculator/index.html new file mode 100644 index 00000000..981a32ac --- /dev/null +++ b/Domains/Frontend/MiniProjects/CGPACalculator/index.html @@ -0,0 +1,90 @@ + + + + + + CGPA Calculator + + + +
+
+

CGPA Calculator

+

Calculate your Cumulative Grade Point Average

+
+ +
+
+

Enter Semester SGPAs (SPPU - up to 8)

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+

Your CGPA

+
0.00
+
-
+
+ +
+
+ Filled Semesters: + 0 +
+
+ Sum of SGPAs: + 0 +
+
+
+ +
+ + +
+
+ +
+

How it works

+

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.

+
+
+ + + + + + diff --git a/Domains/Frontend/MiniProjects/CGPACalculator/script.js b/Domains/Frontend/MiniProjects/CGPACalculator/script.js new file mode 100644 index 00000000..ae2bcb11 --- /dev/null +++ b/Domains/Frontend/MiniProjects/CGPACalculator/script.js @@ -0,0 +1,153 @@ +class CGPACalculator { + constructor() { + this.initializeElements(); + this.bindEvents(); + } + + initializeElements() { + this.semInputs = Array.from(document.querySelectorAll('.sem-input')); + this.cgpaValue = document.getElementById('cgpaValue'); + this.cgpaGrade = document.getElementById('cgpaGrade'); + this.totalCredits = document.getElementById('totalCredits'); + this.totalPoints = document.getElementById('totalPoints'); + this.calculateBtn = document.getElementById('calculateCGPA'); + this.clearBtn = document.getElementById('clearAll'); + } + + bindEvents() { + this.calculateBtn.addEventListener('click', () => this.calculateCGPA()); + this.clearBtn.addEventListener('click', () => this.clearAll()); + + // Recalculate on input change for instant feedback + this.semInputs.forEach(input => { + input.addEventListener('input', () => this.calculateCGPA()); + }); + } + + // Semester mode: average of filled SGPAs + calculateCGPA() { + const values = this.semInputs + .map(i => parseFloat(i.value)) + .filter(v => !Number.isNaN(v)); + + if (values.length === 0) { + this.resetResults(); + return; + } + + // Validate ranges (0 - 10) + for (const v of values) { + if (v < 0 || v > 10) { + this.showNotification('Each SGPA must be between 0 and 10', 'error'); + return; + } + } + + const sum = values.reduce((a, b) => a + b, 0); + const cgpa = sum / values.length; + + this.cgpaValue.textContent = cgpa.toFixed(2); + this.cgpaGrade.textContent = this.getCGPAComment(cgpa); + this.totalCredits.textContent = values.length; // Filled Semesters + this.totalPoints.textContent = sum.toFixed(2); // Sum of SGPAs + + this.cgpaValue.style.transform = 'scale(1.1)'; + setTimeout(() => { + this.cgpaValue.style.transform = 'scale(1)'; + }, 200); + } + + 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'; + } + + clearAll() { + let changed = false; + this.semInputs.forEach(i => { + if (i.value) { i.value = ''; changed = true; } + }); + this.resetResults(); + if (changed) this.showNotification('Cleared all semester inputs', 'info'); + } + + resetResults() { + this.cgpaValue.textContent = '0.00'; + this.cgpaGrade.textContent = '-'; + this.totalCredits.textContent = '0'; + this.totalPoints.textContent = '0'; + } + + showNotification(message, type = 'info') { + // Remove existing notifications + const existingNotifications = document.querySelectorAll('.notification'); + existingNotifications.forEach(notification => notification.remove()); + + const notification = document.createElement('div'); + notification.className = `notification notification-${type}`; + notification.textContent = message; + + // Add styles + notification.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + padding: 15px 20px; + border-radius: 10px; + color: white; + font-weight: 600; + z-index: 1000; + transform: translateX(100%); + transition: transform 0.3s ease; + max-width: 300px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + `; + + const colors = { + success: '#28a745', + error: '#dc3545', + info: '#17a2b8', + warning: '#ffc107' + }; + notification.style.backgroundColor = colors[type] || colors.info; + + document.body.appendChild(notification); + + setTimeout(() => { + notification.style.transform = 'translateX(0)'; + }, 100); + + setTimeout(() => { + notification.style.transform = 'translateX(100%)'; + setTimeout(() => { + if (notification.parentNode) { + notification.remove(); + } + }, 300); + }, 3000); + } +} + +// Initialize the calculator when the page loads +document.addEventListener('DOMContentLoaded', () => { + window.calculator = new CGPACalculator(); +}); + +// Small entrance animation +document.addEventListener('DOMContentLoaded', () => { + const container = document.querySelector('.container'); + container.style.opacity = '0'; + container.style.transform = 'translateY(20px)'; + + setTimeout(() => { + container.style.transition = 'all 0.6s ease'; + container.style.opacity = '1'; + container.style.transform = 'translateY(0)'; + }, 100); +}); + + diff --git a/Domains/Frontend/MiniProjects/CGPACalculator/style.css b/Domains/Frontend/MiniProjects/CGPACalculator/style.css new file mode 100644 index 00000000..370811f2 --- /dev/null +++ b/Domains/Frontend/MiniProjects/CGPACalculator/style.css @@ -0,0 +1,258 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + padding: 20px; +} + +.container { + max-width: 700px; + margin: 0 auto; + background: white; + border-radius: 20px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +header { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + text-align: center; + padding: 20px; +} + +header h1 { + font-size: 2.2rem; + margin-bottom: 8px; + font-weight: 700; +} + +header p { + font-size: 1rem; + opacity: 0.9; +} + +.calculator-section { + padding: 22px; +} + +.input-section h2 { + color: #333; + margin-bottom: 15px; + font-size: 1.3rem; +} + +.semesters-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + margin-bottom: 20px; + padding: 16px; + background: #f8f9fa; + border-radius: 15px; + border: 2px solid #e9ecef; +} + +.semester-item { + display: flex; + flex-direction: column; + gap: 8px; +} + +.semester-item label { + font-weight: 600; + color: #495057; +} + +.semester-item input { + padding: 12px 15px; + border: 2px solid #dee2e6; + border-radius: 10px; + font-size: 1rem; + transition: all 0.3s ease; + background: white; +} + +.semester-item input:focus { + outline: none; + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); +} + +.results-section { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 22px; + border-radius: 15px; + margin-bottom: 22px; +} + +.cgpa-display { + text-align: center; + margin-bottom: 18px; +} + +.cgpa-display h3 { + font-size: 1.2rem; + margin-bottom: 12px; + opacity: 0.9; +} + +.cgpa-value { + font-size: 2.8rem; + font-weight: 700; + margin-bottom: 8px; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.cgpa-grade { + font-size: 1.3rem; + font-weight: 600; + opacity: 0.9; +} + +.summary { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + margin-top: 12px; +} + +.summary-item { + display: flex; + justify-content: space-between; + padding: 12px; + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; + font-size: 1rem; + font-weight: 600; +} + +.actions { + display: flex; + gap: 10px; + justify-content: center; + margin-bottom: 20px; +} + +.btn-calculate { + background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%); + color: white; + border: none; + padding: 12px 22px; + border-radius: 10px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-calculate:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4); +} + +.btn-secondary { + background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); + color: white; + border: none; + padding: 12px 22px; + border-radius: 10px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-secondary:hover { + background: linear-gradient(135deg, #44a08d 0%, #3d8b7a 100%); + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4); +} + +.info-section { + background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%); + color: #2c3e50; + padding: 22px; + border-radius: 15px; + margin-bottom: 22px; + border: 2px solid #fdcb6e; +} + +.info-section h3 { + color: #2c3e50; + margin-bottom: 20px; + font-size: 1.5rem; + font-weight: 700; +} + +.info-section p { + color: #34495e; + line-height: 1.6; + font-weight: 500; +} + +.grade-scale { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 10px; +} + +.grade-item { + background: white; + padding: 12px 15px; + border-radius: 8px; + border: 1px solid #dee2e6; + font-weight: 600; + color: #495057; + text-align: center; + transition: all 0.3s ease; +} + +.grade-item:hover { + background: #e9ecef; + transform: translateY(-1px); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .semesters-grid { + grid-template-columns: 1fr; + gap: 10px; + } + + .summary { + grid-template-columns: 1fr; + } + + .actions { + flex-direction: column; + } + + .cgpa-value { + font-size: 3rem; + } + + header h1 { + font-size: 2rem; + } +} + +@media (max-width: 480px) { + .container { + margin: 10px; + border-radius: 15px; + } + + .calculator-section { + padding: 20px; + } +} + + diff --git a/Domains/Frontend/MiniProjects/TypingSpeedRaceGame/README.md b/Domains/Frontend/MiniProjects/TypingSpeedRaceGame/README.md index 22ec1b89..b1f5c8df 100644 --- a/Domains/Frontend/MiniProjects/TypingSpeedRaceGame/README.md +++ b/Domains/Frontend/MiniProjects/TypingSpeedRaceGame/README.md @@ -7,6 +7,10 @@ --- +Screenshot 2025-10-21 130826 + +--- + ## 📝 Description A fun and interactive **Typing Speed Race Game** that challenges players to type as fast and accurately as possible.