Interest
Sure
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navabar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted;"/> <div class="col-md-3"> <br /> <br /> </div> <div class="col-md-6"> <div class="form-group" id="data"> <input type="number" placeholder="Enter a number" class="form-control grade" min="0" max="100"/> </div> <div id="result"> </div> </div> </div> </body> </html>
$(document).ready(function(){ $('#getAve').on('click', function(){ var grades = []; $('.grade').each(function(){ if($(this).val() == ""){ alert("Please complete the required field"); return false; } grades.push($(this).val()); }); var sum = eval(grades.join('+')), avg = sum / grades.length; if(avg >= 75){ $('#result').html("<center>The average is <label class='text-primary'>"+ avg.toFixed(0) +", </label> <label class='text-success'>You passed!</label></center>"); }else if(avg < 75){ $('#result').html("<center>The average is <label class='text-primary'>"+ avg.toFixed(0) +", </label> <label class='text-danger'>You failed!</label></center>"); } }); $('#addField').on('click', function(){ var newField = $('<br /><input type="number" placeholder="Enter a number" class="form-control grade" min="0" max="100"/>'); newField.appendTo($('#data')); }); $('#reset').on('click', function(){ window.location = "index.html"; }); });