Here is a codepen jQuery.
var $oBox = $('.outer-box');
var $gpa = $('#gpa');
var $result = $('.result').hide();
$('.btn').click(function() {
$('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});
$oBox.on('keyup', '.points', function() {
$gpa.text(getTotal());
});
$oBox.on("change", ".total-points", function() {
$gpa.text(getTotal());
$result.is(":hidden") && $result.show();
});
function getTotal() {
var gradeTotal = 0;
var sum = 0;
$(".points").each(function() {
var $this = $(this);
if(!isNaN($this.val()) && !isNaN($this.parent().find('.total-points').val())) {
sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.total-points').val() || 0);
gradeTotal += parseFloat($this.val() || 0)
}
});
return (sum/gradeTotal).toFixed(2);
}
$(".btn").on("click", function () {
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
});
body {
background-color: #A00000;
background-size: cover;
margin: 0;
padding: 0;
}
.title {
font-size: 5rem;
text-align: center;
}
.outer-box {
border: 3px solid black;
height: true;
width: 75%;
padding: 10px;
margin: 10px auto 10px auto;
border-radius: 10px;
background-color: white;
}
.spacer {
margin-bottom: 20px;
}
#class-name {
margin-left: 5px;
font-size: 2rem;
font-weight: bold;
}
.assignment {
width: 150px;
height: 35px;
padding: 5px;
margin:10px;
font-size: 20px;
border: 1px solid gray;
border-radius: 5px;
}
.points {
border: 1px solid gray;
border-radius: 5px;
width: 100px;
margin: 10px;
height: 35px;
padding: 5px;
}
.block {
margin-bottom: 20px;
}
.btn {
border: 2px solid black;
font-weight: bold;
width: 150px;
text-align: center;
margin: 10px;
padding: 5px;
}
.result {
width: 200px;
height: 100px;
border: 2px solid black;
border-radius: 5px;
text-align: center;
margin: 20px auto 20px auto;
}
#gpa {
font-size: 4rem;
color: black;
font-weight: bold;
}
.total-points {
border: 1px solid gray;
border-radius: 5px;
width: 100px;
margin: 10px;
height: 35px;
padding: 5px;
}
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
background-color: white;
color: white;
padding: 10px;
z-index: 1;
border: solid 5px #00338A;
border-radius: 5px;
margin: 10px;
}
#fixedbutton img {
height: 30px;
width: 30px;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
</head>
<body>
<div class='outer-box'>
<div class='inner-box'>
<form class='block'>
<input type="text" class='assignment' placeholder="Assignment">
</br>
<input type="number" class='points' placeholder="Points">
</br>
<input type="number" class='total-points' placeholder="Total Points">
</form>
</div>
<div class='btn btn-default'>Add Grade</div>
<div class='result'>
<h3 id="gpa">GPA</h3>
</div>
</div>
<div class='spacer'></div>
</body>
How do I manipulate the code in jQuery and add up the total amount of points earned and then divide by the total number of points in the two inputs. Then it is displays as a result?