GPA Calculator — Free HTML CSS JS Snippet

<div class="wrap">
  <h2>GPA Calculator</h2>

  <div class="table-head">
    <span>Course</span>
    <span>Grade</span>
    <span>Credits</span>
    <span></span>
  </div>
  <div id="course-rows"></div>

  <button class="btn btn-add" id="btn-add-row">+ Add Course</button>

  <div class="summary">
    <div class="summary-card">
      <div class="k">Total Credits</div>
      <div class="v" id="total-credits">0</div>
    </div>
    <div class="summary-card accent">
      <div class="k">GPA</div>
      <div class="v" id="gpa-value">0.00</div>
    </div>
    <div class="summary-card">
      <div class="k">Quality Points</div>
      <div class="v" id="quality-points">0.00</div>
    </div>
  </div>

  <div class="scale-note">4.0 scale: A=4.0 · A-=3.7 · B+=3.3 · B=3.0 · B-=2.7 · C+=2.3 · C=2.0 · C-=1.7 · D+=1.3 · D=1.0 · F=0.0</div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; padding: 28px 20px; }

.wrap { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px; }
h2 { font-size: 18px; font-weight: 800; color: #1e293b; margin-bottom: 16px; }

.table-head { display: grid; grid-template-columns: 1fr 100px 90px 32px; gap: 8px; padding: 0 4px 8px; font-size: 10.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }

.course-row { display: grid; grid-template-columns: 1fr 100px 90px 32px; gap: 8px; margin-bottom: 8px; align-items: center; }
.course-row input[type="text"] { padding: 9px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 13px; }
.course-row select { padding: 9px 8px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 13px; background: #fff; }
.course-row input[type="number"] { padding: 9px 8px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 13px; width: 100%; }
.course-row input:focus, .course-row select:focus { outline: none; border-color: #6366f1; }
.remove-btn { width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid #fecaca; background: #fff; color: #dc2626; font-size: 14px; cursor: pointer; line-height: 1; }
.remove-btn:hover { background: #fef2f2; }

.btn-add { display: block; width: 100%; margin: 6px 0 20px; padding: 10px; border-radius: 9px; border: 1.5px dashed #cbd5e1; background: #f8fafc; color: #6366f1; font-size: 13px; font-weight: 700; cursor: pointer; }
.btn-add:hover { border-color: #6366f1; background: #eef2ff; }

.summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.summary-card { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 14px; text-align: center; }
.summary-card .k { font-size: 10.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.summary-card .v { font-size: 20px; font-weight: 800; color: #1e293b; }
.summary-card.accent { background: #eef2ff; border-color: #c7d2fe; }
.summary-card.accent .v { color: #4338ca; }

.scale-note { font-size: 10.5px; color: #94a3b8; text-align: center; line-height: 1.6; }

const GRADE_POINTS = {
  'A': 4.0, 'A-': 3.7, 'B+': 3.3, 'B': 3.0, 'B-': 2.7,
  'C+': 2.3, 'C': 2.0, 'C-': 1.7, 'D+': 1.3, 'D': 1.0, 'F': 0.0,
};

let rows = [
  { name: 'Introduction to Programming', grade: 'A', credits: 3 },
  { name: 'Calculus I', grade: 'B+', credits: 4 },
  { name: 'World History', grade: 'A-', credits: 3 },
];
let idCounter = 0;
rows = rows.map(r => ({ ...r, id: idCounter++ }));

const courseRows = document.getElementById('course-rows');

function render() {
  courseRows.innerHTML = rows.map(row => {
    const options = Object.keys(GRADE_POINTS).map(g =>
      '<option value="' + g + '"' + (g === row.grade ? ' selected' : '') + '>' + g + '</option>'
    ).join('');
    return '<div class="course-row" data-id="' + row.id + '">' +
      '<input type="text" class="name-input" value="' + row.name.replace(/"/g, '&quot;') + '" placeholder="Course name" />' +
      '<select class="grade-select">' + options + '</select>' +
      '<input type="number" class="credits-input" value="' + row.credits + '" min="0" step="0.5" />' +
      '<button class="remove-btn" title="Remove">\u00D7</button>' +
    '</div>';
  }).join('');

  courseRows.querySelectorAll('.course-row').forEach(rowEl => {
    const id = Number(rowEl.dataset.id);
    rowEl.querySelector('.name-input').addEventListener('input', (e) => {
      const r = rows.find(x => x.id === id);
      if (r) r.name = e.target.value;
    });
    rowEl.querySelector('.grade-select').addEventListener('change', (e) => {
      const r = rows.find(x => x.id === id);
      if (r) r.grade = e.target.value;
      calculate();
    });
    rowEl.querySelector('.credits-input').addEventListener('input', (e) => {
      const r = rows.find(x => x.id === id);
      if (r) r.credits = Number(e.target.value) || 0;
      calculate();
    });
    rowEl.querySelector('.remove-btn').addEventListener('click', () => {
      rows = rows.filter(x => x.id !== id);
      render();
      calculate();
    });
  });
}

function calculate() {
  const totalCredits = rows.reduce((s, r) => s + (Number(r.credits) || 0), 0);
  const qualityPoints = rows.reduce((s, r) => s + (GRADE_POINTS[r.grade] || 0) * (Number(r.credits) || 0), 0);
  const gpa = totalCredits > 0 ? qualityPoints / totalCredits : 0;

  document.getElementById('total-credits').textContent = totalCredits.toLocaleString();
  document.getElementById('quality-points').textContent = qualityPoints.toFixed(2);
  document.getElementById('gpa-value').textContent = gpa.toFixed(2);
}

document.getElementById('btn-add-row').addEventListener('click', () => {
  rows.push({ id: idCounter++, name: '', grade: 'A', credits: 3 });
  render();
  calculate();
});

render();
calculate();