1

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?

1
  • 1
    Please read How to Ask. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". Commented Dec 16, 2016 at 20:00

1 Answer 1

0

Currently your code is

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);
}

So if I enter 10 for 'points' and 20 for 'total points' it does this calculation:

sum += 10 * 20

gradeTotal += 10

return 200/10 (= 20)

If I understand correctly, you actually want 10/20 = .5

That is easy to fix. Just change these two lines.

  sum += parseFloat($this.val() || 0);
  gradeTotal += parseFloat($this.parent().find('.total-points').val() || 0);

This will keep a cumulative score as you continue to add more grades.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.