Untitled

<body>
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <h5>Grade Calculator</h5>
        </div>
    </nav>

    <div class="container">
        <table class="table table-hover table-condensed" id="gradeTable">
            <tbody>
                <tr>
                    <th>Task</th>
                    <th>Grade</th>
                    <th>Weight (%)</th>
                </tr>
                <tr id="group1">
                    <td>Attendance</td>
                    <td><input type="text" id="grade1" name="grade1" class="grade-value"></td>
                    <td><input type="text" id="weight1" name="weight1" class="weight-value"></td>
                </tr>
                <tr id="group2">
                    <td>Assignments</td>
                    <td><input type="text" id="grade2" name="grade2" class="grade-value"></td>
                    <td><input type="text" id="weight2" name="weight2" class="weight-value"></td>
                </tr>
                <tr id="group3">
                    <td>Quizzes</td>
                    <td><input type="text" id="grade3" name="grade3" class="grade-value"></td>
                    <td><input type="text" id="weight3" name="weight3" class="weight-value"></td>
                </tr>
                <tr id="group4">
                    <td>Exams</td>
                    <td><input type="text" id="grade4" name="grade4" class="grade-value"></td>
                    <td><input type="text" id="weight4" name="weight4" class="weight-value"></td>
                </tr>
                <tr id="group5">
                    <td>Mid-Term</td>
                    <td><input type="text" id="grade5" name="grade5" class="grade-value"></td>
                    <td><input type="text" id="weight5" name="weight5" class="weight-value"></td>
                </tr>
                <tr id="group6">
                    <td>Final</td>
                    <td><input type="text" id="grade6" name="grade6" class="grade-value"></td>
                    <td><input type="text" id="weight6" name="weight6" class="weight-value"></td>
                </tr>
                <tr id="group7">
                    <td>Projects</td>
                    <td><input type="text" id="grade7" name="grade7" class="grade-value"></td>
                    <td><input type="text" id="weight7" name="weight7" class="weight-value"></td>
                </tr>
                <tr>
                    <td>Final Grade</td>
                    <td><input type="text" value="" id="final-grade" name="final-grade"></td>
                    <td><input type="text" value="" id="total-weight" name="total-weight"></td>
                </tr>
            </tbody>
        </table>

        <div>
            <!--button type="button" class="btn btn-success" id="calculate">Calculate</button-->
            <button type="button" class="btn btn-primary" id="clear">Clear</button>
        </div>
    </div>
</body>

$(document).ready(function() {

'use strict';
$(document).on('keyup', '.weight-value', function() {

    // the sum of weight (%)
    var sumWeight = 0;
    $('.weight-value').each(function(){
        sumWeight += +$(this).val();
    });// end of sum of weight (%)

    // populate weigth remainder
    $('#total-weight').val(100 - sumWeight);
});// end document .on keyup

// button to clear values
$('#clear').click(function() {
    $('.weight-value, .grade-value, #final-grade, #total-weight').val('');
});// end of clear values

// calculate grade
$(document).on('keyup', function() {
    var w1 = +$('#weight1').val();
    var w2 = +$('#weight2').val();
    var w3 = +$('#weight3').val();
    var w4 = +$('#weight4').val();
    var w5 = +$('#weight5').val();
    var w6 = +$('#weight6').val();
    var w7 = +$('#weight7').val();
    var g1 = +$('#grade1').val();
    var g2 = +$('#grade2').val();
    var g3 = +$('#grade3').val();
    var g4 = +$('#grade4').val();
    var g5 = +$('#grade5').val();
    var g6 = +$('#grade6').val();
    var g7 = +$('#grade7').val();

    var finalGrade = 0;
    finalGrade = ((g1 / 100) * (w1 / 100)) +
                 ((g2 / 100) * (w2 / 100)) +
                 ((g3 / 100) * (w3 / 100)) +
                 ((g4 / 100) * (w4 / 100)) +
                 ((g5 / 100) * (w5 / 100)) +
                 ((g6 / 100) * (w6 / 100)) +
                 ((g7 / 100) * (w7 / 100));

    if(finalGrade > 89) {
        $('#final-grade').val('A');
    }

});// end calculate grade
});// end of ready