JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<p>There is one exercise in this practice set.</p>
<p>Write a javascript to compute the gradepoint average and print it to the console. </p>
<p>The Grade point average should be calculated when the GPA button is clicked.</p>
    <p>
        <div id="doIt" class="button">Calculate GPA</div>
    </p>

<table border="1">
    <table border="1">
      <tbody>
          <tr>
              <th>Student Name</th> 
              <th>course 1 grade</th>
              <th>course 2 grade</th>
              <th> GPA</th>
          </tr>
        <tr>
          <td><input value="Mike Smith" class="row1" type="text"><br>
          </td>
          <td><input value="3" class="row1" type="text"><br>
          </td>
          <td><input value="4" class="row1" type="text"><br>
          </td>
          <td id="row1Average" class="avg"><br>
          </td>
        </tr>
        <tr>
          <td><input value="John chen" class="row2" type="text"><br>
          </td>
          <td><input value="4" class="row2" type="text"><br>
          </td>
          <td><input value="3" class="row2" type="text"><br>
          </td>
          <td id="row2Average" class="avg"><br>
          </td>
        </tr>
        <tr>
          <td><input value="Rob Gray" class="row3" type="text"><br>
          </td>
          <td><input value="4" class="row3" type="text"><br>
          </td>
          <td><input value="4" class="row3" type="text"><br>
          </td>
          <td id="row3Average" class="avg"><br>
          </td>
        </tr>
      </tbody>
    </table>

CSS

.avg{
    width: 25%;
    font-weight: bold;
}
.button:hover{
    cursor:pointer;
}
.row1, .row2, .row3 {
    width: 5em;
}
.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#000000;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#00FF00;
}

JavaScript

function calcGPA(row) {
    sum=0;
    count=0;
    value=0;
    //console.log(row);
    var rowInputs = document.getElementsByClassName(row);
    for(var i=1; i<rowInputs.length; i++){
        value = parseInt(rowInputs[i].value);
        if (value){
            sum += value;
            count++;
        }
    }
    var rowAvg = sum/count;
    var rowAverage = row.concat("Average")
    console.log(rowAvg);
    document.getElementById(rowAverage).innerHTML = rowAvg;
}

document.getElementById("doIt").onclick = function()

{
  // calling function to calvulate row averages
    calcGPA("row1");
    calcGPA("row2");
    calcGPA("row3");
    
}