Calculate GPA from user inputs

by Shah Noor

HTML

<div class="container">
  <h1>SRM GPA Calculator Demo</h1>

  <p class="subtitle">
    Simple GPA calculation example. Full calculator automatically loads SRM subjects and credits.
  </p>

  <div class="row">
    <label>Subject 1 Grade</label>
    <select class="grade">
      <option value="10">O</option>
      <option value="9">A+</option>
      <option value="8">A</option>
      <option value="7">B+</option>
      <option value="6">B</option>
      <option value="5">C</option>
      <option value="0">F</option>
    </select>
  </div>

  <div class="row">
    <label>Subject 1 Credits</label>
    <input class="credit" type="number" value="4">
  </div>

  <div class="row">
    <label>Subject 2 Grade</label>
    <select class="grade">
      <option value="10">O</option>
      <option value="9">A+</option>
      <option value="8">A</option>
      <option value="7">B+</option>
      <option value="6">B</option>
      <option value="5">C</option>
      <option value="0">F</option>
    </select>
  </div>

  <div class="row">
    <label>Subject 2 Credits</label>
    <input class="credit" type="number" value="3">
  </div>

  <button onclick="calculateGPA()">
    Calculate GPA
  </button>

  <div id="result"></div>

  <div class="footer">
    Want automatic subject loading?
    <br><br>
    <a href="https://srmgpacalculator.org/" target="_blank">
      Explore full SRM GPA Calculator
    </a>
  </div>
</div>

CSS

body{
font-family:Arial,sans-serif;
background:#f5f5f5;
padding:40px;
}

.container{
max-width:500px;
margin:auto;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

h1{
margin-bottom:10px;
}

.subtitle{
color:#666;
margin-bottom:25px;
line-height:1.6;
}

.row{
margin-bottom:18px;
}

label{
display:block;
margin-bottom:6px;
font-weight:bold;
}

select,
input{
width:100%;
padding:10px;
border:1px solid #ddd;
border-radius:6px;
}

button{
width:100%;
padding:12px;
margin-top:10px;
border:none;
background:#0066cc;
color:white;
cursor:pointer;
border-radius:6px;
font-size:16px;
}

button:hover{
background:#0052a3;
}

#result{
margin-top:25px;
font-size:22px;
font-weight:bold;
text-align:center;
}

.footer{
margin-top:30px;
padding-top:20px;
border-top:1px solid #ddd;
font-size:14px;
text-align:center;
}

.footer a{
text-decoration:none;
font-weight:bold;
}

JavaScript

function calculateGPA(){

const grades=document.querySelectorAll(".grade");
const credits=document.querySelectorAll(".credit");

let totalPoints=0;
let totalCredits=0;

for(let i=0;i<grades.length;i++){

const grade=parseFloat(grades[i].value);
const credit=parseFloat(credits[i].value);

totalPoints+=grade*credit;
totalCredits+=credit;

}

const gpa=(totalPoints/totalCredits).toFixed(2);

document.getElementById("result").innerHTML=
"Semester GPA: "+gpa;

}