Posted inAPI Project

How to Create a CGPA Calculator Using HTML, CSS, and JavaScript

No CommentsPosted inAPI Project

Introduction

In this article, we will learn how to create a CGPA Calculator using HTML, CSS, and JavaScript. This tool will allow students to calculate their CGPA based on grades and credit hours. We will also include advanced features like GPA-to-percentage conversion, dark mode, and graphical representation of results.

Click On Calculator

Features of Our CGPA Calculator

  • Easy Grade & Credit Input: Users can enter subject-wise grades and credit hours.
  • Automatic CGPA Calculation: The tool will compute CGPA based on the standard formula.
  • Semester-wise CGPA Display: Students can calculate and view CGPA for multiple semesters.
  • GPA-to-Percentage Converter: Convert CGPA to percentage based on different university rules.
  • Dark Mode & Light Mode: A user-friendly interface with a theme switcher.
  • Graphical Representation: Display results with bar graphs or pie charts.
  • Download & Share Feature: Save the CGPA report as a PDF.

Html Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced CGPA Calculator</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="light-mode">
    <div class="theme-toggle">
        <button id="themeToggle">🌙</button>
    </div>
    
    <div class="container">
        <h1>CGPA Calculator</h1>
        
        <div class="calculator-section">
            <div class="grading-system">
                <label>Select Grading System:</label>
                <select id="gradingSystem">
                    <option value="10">10-point Scale</option>
                    <option value="4">4-point Scale</option>
                    <option value="100">Percentage Based</option>
                </select>
            </div>

            <div id="semesterContainer">
                <div class="semester" data-semester="1">
                    <h3>Semester 1</h3>
                    <div class="subjects">
                        <div class="subject-row">
                            <input type="text" placeholder="Subject Name" class="subject-name">
                            <select class="grade">
                                <option value="10">A+ (10)</option>
                                <option value="9">A (9)</option>
                                <option value="8">B+ (8)</option>
                                <option value="7">B (7)</option>
                                <option value="6">C+ (6)</option>
                                <option value="5">C (5)</option>
                                <option value="4">D (4)</option>
                                <option value="0">F (0)</option>
                            </select>
                            <input type="number" placeholder="Credits" class="credits" min="1" max="6">
                            <button class="remove-subject">✖</button>
                        </div>
                    </div>
                    <button class="add-subject">+ Add Subject</button>
                </div>
            </div>
            
            <button id="addSemester">+ Add Semester</button>
        </div>

        <div class="results-section">
            <div class="cgpa-display">
                <h2>Results</h2>
                <div id="cgpaResult">
                    <p>Current CGPA: <span id="finalCGPA">0.00</span></p>
                    <div id="emojiReaction">🎓</div>
                    <p id="feedbackMessage"></p>
                </div>
            </div>

            <div class="conversion-section">
                <h3>CGPA to Percentage</h3>
                <select id="conversionMethod">
                    <option value="9.5">× 9.5 (Standard)</option>
                    <option value="10">× 10.0</option>
                </select>
                <p>Percentage: <span id="percentageResult">0.00%</span></p>
            </div>

            <div class="chart-section">
                <canvas id="cgpaChart"></canvas>
            </div>

            <div class="actions">
                <button id="downloadReport">Download Report</button>
                <button id="shareReport">Share Results</button>
            </div>
        </div>

        <div class="ai-insights">
            <h3>AI Performance Insights</h3>
            <p id="aiSuggestions">Enter your grades to receive personalized suggestions!</p>
        </div>
    </div>

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

CSS code 

:root {
    --primary-color: #4a90e2;
    --secondary-color: #f5f6fa;
    --text-color: #2c3e50;
    --border-color: #dcdde1;
    --success-color: #2ecc71;
    --warning-color: #f1c40f;
    --danger-color: #e74c3c;
}

/* Dark Mode Colors */
[data-theme="dark"] {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --text-color: #ecf0f1;
    --border-color: #34495e;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--secondary-color);
    transition: all 0.3s ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
}

#themeToggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

#themeToggle:hover {
    transform: scale(1.1);
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

.calculator-section {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.grading-system {
    margin-bottom: 2rem;
}

.semester {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.subject-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}

input, select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
}

button {
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #357abd;
}

.remove-subject {
    background-color: var(--danger-color);
    padding: 0.5rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.results-section {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.cgpa-display {
    text-align: center;
    margin-bottom: 2rem;
}

#finalCGPA {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

#emojiReaction {
    font-size: 3rem;
    margin: 1rem 0;
}

.conversion-section {
    text-align: center;
    margin-bottom: 2rem;
}

.chart-section {
    margin: 2rem 0;
    height: 300px;
}

.actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.ai-insights {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .subject-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .actions {
        flex-direction: column;
    }

    button {
        width: 100%;
    }
}

JAVA Script code 

// Theme Toggle
const themeToggle = document.getElementById('themeToggle');
let isDarkMode = false;

themeToggle.addEventListener('click', () => {
    isDarkMode = !isDarkMode;
    document.body.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
    themeToggle.textContent = isDarkMode ? '☀️' : '🌙';
});

// CGPA Calculation
let semesters = [];
const gradingSystem = document.getElementById('gradingSystem');
const addSemesterBtn = document.getElementById('addSemester');
const semesterContainer = document.getElementById('semesterContainer');

// Initialize Chart
let cgpaChart;
const ctx = document.getElementById('cgpaChart').getContext('2d');
initializeChart();

function initializeChart() {
    cgpaChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'CGPA Progression',
                data: [],
                borderColor: '#4a90e2',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 10
                }
            }
        }
    });
}

// Add new semester
addSemesterBtn.addEventListener('click', () => {
    const semesterCount = semesterContainer.children.length + 1;
    const semesterDiv = document.createElement('div');
    semesterDiv.className = 'semester';
    semesterDiv.dataset.semester = semesterCount;
    
    semesterDiv.innerHTML = `
        <h3>Semester ${semesterCount}</h3>
        <div class="subjects">
            <div class="subject-row">
                <input type="text" placeholder="Subject Name" class="subject-name">
                <select class="grade">
                    <option value="10">A+ (10)</option>
                    <option value="9">A (9)</option>
                    <option value="8">B+ (8)</option>
                    <option value="7">B (7)</option>
                    <option value="6">C+ (6)</option>
                    <option value="5">C (5)</option>
                    <option value="4">D (4)</option>
                    <option value="0">F (0)</option>
                </select>
                <input type="number" placeholder="Credits" class="credits" min="1" max="6">
                <button class="remove-subject">✖</button>
            </div>
        </div>
        <button class="add-subject">+ Add Subject</button>
    `;

    semesterContainer.appendChild(semesterDiv);
    attachEventListeners(semesterDiv);
    updateCGPA();
});

// Attach event listeners to semester
function attachEventListeners(semesterDiv) {
    const addSubjectBtn = semesterDiv.querySelector('.add-subject');
    addSubjectBtn.addEventListener('click', () => addSubject(semesterDiv));

    semesterDiv.addEventListener('click', (e) => {
        if (e.target.classList.contains('remove-subject')) {
            e.target.closest('.subject-row').remove();
            updateCGPA();
        }
    });

    semesterDiv.addEventListener('input', (e) => {
        if (e.target.classList.contains('grade') || e.target.classList.contains('credits')) {
            updateCGPA();
        }
    });
}

// Add new subject
function addSubject(semesterDiv) {
    const subjectsDiv = semesterDiv.querySelector('.subjects');
    const subjectRow = document.createElement('div');
    subjectRow.className = 'subject-row';
    
    subjectRow.innerHTML = `
        <input type="text" placeholder="Subject Name" class="subject-name">
        <select class="grade">
            <option value="10">A+ (10)</option>
            <option value="9">A (9)</option>
            <option value="8">B+ (8)</option>
            <option value="7">B (7)</option>
            <option value="6">C+ (6)</option>
            <option value="5">C (5)</option>
            <option value="4">D (4)</option>
            <option value="0">F (0)</option>
        </select>
        <input type="number" placeholder="Credits" class="credits" min="1" max="6">
        <button class="remove-subject">✖</button>
    `;

    subjectsDiv.appendChild(subjectRow);
}

// Calculate CGPA
function updateCGPA() {
    const semesters = document.querySelectorAll('.semester');
    let totalPoints = 0;
    let totalCredits = 0;
    const semesterCGPAs = [];

    semesters.forEach((semester, index) => {
        let semesterPoints = 0;
        let semesterCredits = 0;

        const subjects = semester.querySelectorAll('.subject-row');
        subjects.forEach(subject => {
            const grade = parseFloat(subject.querySelector('.grade').value);
            const credits = parseFloat(subject.querySelector('.credits').value) || 0;

            semesterPoints += grade * credits;
            semesterCredits += credits;
        });

        if (semesterCredits > 0) {
            const semesterCGPA = semesterPoints / semesterCredits;
            semesterCGPAs.push(semesterCGPA);
        }

        totalPoints += semesterPoints;
        totalCredits += semesterCredits;
    });

    const finalCGPA = totalCredits > 0 ? (totalPoints / totalCredits).toFixed(2) : '0.00';
    document.getElementById('finalCGPA').textContent = finalCGPA;
    
    updateChart(semesterCGPAs);
    updateFeedback(parseFloat(finalCGPA));
    updatePercentage(parseFloat(finalCGPA));
    updateAIInsights(semesterCGPAs);
}

// Update Chart
function updateChart(semesterCGPAs) {
    cgpaChart.data.labels = semesterCGPAs.map((_, index) => `Semester ${index + 1}`);
    cgpaChart.data.datasets[0].data = semesterCGPAs;
    cgpaChart.update();
}

// Update Feedback
function updateFeedback(cgpa) {
    const emojiReaction = document.getElementById('emojiReaction');
    const feedbackMessage = document.getElementById('feedbackMessage');

    if (cgpa > 9.0) {
        emojiReaction.textContent = '🎓';
        feedbackMessage.textContent = 'Excellent! Keep it up!';
    } else if (cgpa >= 8.0) {
        emojiReaction.textContent = '😊';
        feedbackMessage.textContent = 'Great job, you\'re doing well!';
    } else if (cgpa >= 6.0) {
        emojiReaction.textContent = '😐';
        feedbackMessage.textContent = 'Good, but there\'s room for improvement.';
    } else {
        emojiReaction.textContent = '😢';
        feedbackMessage.textContent = 'Don\'t worry! Try harder next semester.';
    }
}

// Update Percentage
function updatePercentage(cgpa) {
    const conversionMethod = parseFloat(document.getElementById('conversionMethod').value);
    const percentage = (cgpa * conversionMethod).toFixed(2);
    document.getElementById('percentageResult').textContent = `${percentage}%`;
}

// AI Insights
function updateAIInsights(semesterCGPAs) {
    const aiSuggestions = document.getElementById('aiSuggestions');
    if (semesterCGPAs.length < 2) {
        aiSuggestions.textContent = 'Add more semester data for personalized insights!';
        return;
    }

    const lastCGPA = semesterCGPAs[semesterCGPAs.length - 1];
    const previousCGPA = semesterCGPAs[semesterCGPAs.length - 2];
    
    let suggestion = '';
    if (lastCGPA > previousCGPA) {
        suggestion = 'Great improvement! Keep using your current study strategies.';
    } else if (lastCGPA < previousCGPA) {
        suggestion = 'Consider increasing study hours and seeking help in challenging subjects.';
    } else {
        suggestion = 'Maintain consistency while looking for areas of improvement.';
    }

    aiSuggestions.textContent = suggestion;
}

// Download Report
document.getElementById('downloadReport').addEventListener('click', () => {
    const reportContent = generateReport();
    const blob = new Blob([reportContent], { type: 'text/plain' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'CGPA_Report.txt';
    a.click();
    window.URL.revokeObjectURL(url);
});

// Generate Report
function generateReport() {
    const cgpa = document.getElementById('finalCGPA').textContent;
    const percentage = document.getElementById('percentageResult').textContent;
    const feedback = document.getElementById('feedbackMessage').textContent;
    
    return `CGPA Report
===============
Date: ${new Date().toLocaleDateString()}

Overall CGPA: ${cgpa}
Percentage: ${percentage}
Performance: ${feedback}

Generated by CGPA Calculator`;
}

// Share Report
document.getElementById('shareReport').addEventListener('click', () => {
    const cgpa = document.getElementById('finalCGPA').textContent;
    const text = `My CGPA is ${cgpa}! 🎓`;
    
    if (navigator.share) {
        navigator.share({
            title: 'My CGPA Report',
            text: text
        }).catch(console.error);
    } else {
        // Fallback for browsers that don't support Web Share API
        const dummy = document.createElement('textarea');
        document.body.appendChild(dummy);
        dummy.value = text;
        dummy.select();
        document.execCommand('copy');
        document.body.removeChild(dummy);
        alert('Report copied to clipboard!');
    }
});

// Initialize event listeners for conversion method
document.getElementById('conversionMethod').addEventListener('change', () => {
    updateCGPA();
});

// Initialize first semester
document.querySelector('.add-subject').click();
attachEventListeners(document.querySelector('.semester'));

Advanced Features for Enhanced User Experience

  • Dark Mode Toggle: Allow users to switch between light and dark themes.
  • Graphical Representation: Use JavaScript chart libraries (e.g., Chart.js) to visualize results.
  • Download & Share Report: Let students download their CGPA report in PDF format.
  • Emoji-Based Feedback System:
    • 🎓 CGPA > 9.0: “Excellent! Keep it up!”
    • 😊 CGPA 8-9: “Great job!”
    • 😐 CGPA 6-8: “Needs improvement.”
    • 😢 CGPA < 6: “Work harder next time.”

Meta Title: “Best CGPA Calculator Using HTML, CSS, and JavaScript – Step-by-Step Guide”

  • Meta Description: “Learn how to create a CGPA calculator using HTML, CSS, and JavaScript. Step-by-step guide with source code.”
  • Trending Keywords: “CGPA calculator HTML CSS JavaScript”, “How to create a CGPA calculator”, “Best CGPA calculator for students”
  • Internal Linking: Link to other related pages (e.g., percentage calculators, study tips).
  • Mobile Optimization: Ensure the calculator is fully responsive.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *