.cgpa-calculator { text-align: center; margin: 20px auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); width: 300px; } input { margin: 10px 0; padding: 10px; width: 100%; font-size: 16px; } button { padding: 10px; font-size: 16px; background-color: #E22554; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 5px; } button:hover { background-color: gray; } .result-display { margin-top: 15px; font-size: 18px; color: #333; } document.getElementById('add-course').addEventListener('click', function() { const coursesDiv = document.getElementById('courses'); const newCourse = document.createElement('div'); newCourse.classList.add('course'); newCourse.innerHTML = ` `; coursesDiv.appendChild(newCourse); }); document.getElementById('calculate-cgpa').addEventListener('click', function() { const courses = document.querySelectorAll('.course'); let totalCreditHours = 0; let totalPoints = 0; courses.forEach(course => { const creditHours = parseFloat(course.querySelector('.credit-hours').value) || 0; const grade = parseFloat(course.querySelector('.grade').value) || 0; totalCreditHours += creditHours; totalPoints += (creditHours * grade); }); const cgpa = totalCreditHours > 0 ? (totalPoints / totalCreditHours).toFixed(2) : 0; document.getElementById('result').innerText = `Your CGPA is: ${cgpa}`; });