I'm currently developing a mobile app that calculates the users GPA. One feature I want to add is the ability for the inputted data to be saved through cache data or another method similar. Is it possible to save all of the inputs including the drop down responses through a save button which stores the data? Or something similar?
var $oBox = $('.outer-box');
var $gpa = $('#gpa');
var $result = $('.result').hide();
$('#btnAddClass').click(function() {
$('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
return false;
});
$oBox.on('keyup', '.credits', function() {
$gpa.text(getTotal());
});
$oBox.on("change", ".grade-select", function() {
});
function getTotal() {
var gradeTotal = 0;
var sum = 0;
$(".credits").each(function() {
var $this = $(this);
if (!isNaN($this.val()) && !isNaN($this.parent().find('.grade-select').val())) {
sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.grade-select').val() || 0);
gradeTotal += parseFloat($this.val() || 0)
}
});
return (sum / gradeTotal).toFixed(2);
}
$("#Calculate").on("click", function() {
$gpa.text(getTotal());
$result.is(":hidden") && $result.show();
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<link rel='stylesheet prefetch' href="http://maltertech.com/bootstrap.min.css">
<head>
<style>
body {
background-color: #A00000;
background-size: cover;
margin: 0;
padding: 0;
}
.outer-box {
height: true;
width: 250px;
padding: 10px;
margin: 20px auto 20px auto;
border-radius: 10px;
background-color: white;
}
.block {
margin: 5px;
}
.class {
border: 1px solid black;
border-radius: 5px;
width: 200px;
height: 35px;
margin: 5px;
padding: 5px;
}
.credits {
border: 1px solid black;
border-radius: 5px;
width: 95px;
height: 35px;
margin: 5px;
padding: 5px;
}
.grade-select {
border: 1px solid black;
border-radius: 5px;
width: 95px;
height: 35px;
margin: 5px;
padding: 5px;
}
.btn {
border: 2px solid black;
border-radius: 5px;
width: 100px;
height: 35px;
margin: 10px;
padding: 5px;
font-weight: bold;
text-align: center;
}
#Calculate {
width: 200px;
border: 3px solid black;
}
.result {
border: 3px solid black;
border-radius: 5px;
width: 200px;
height: 100px;
margin: 20px auto 20px auto;
padding: 5px;
font-weight: bold;
text-align: center;
}
#gpa {
font-size: 4rem;
color: black;
font-weight: bold;
}
</style>
<meta charset="UTF-8">
<title>GPA Calculator</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel='stylesheet prefetch' href='css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<center>
<div class='outer-box'>
<div class='inner-box'>
<form class='block'>
<table>
<tr>
<input type="text" class='class' placeholder="Class">
</tr>
<br>
<tr>
<select class='credits'>
<option value="">Credits</option>
<option value="0.5">Half Year</option>
<option value="1">Full Year</option>
</select>
<select class='grade-select'>
<option value="">Grade</option>
<option value="4.6">A+</option>
<option value="4.0">A</option>
<option value="3.6">B+</option>
<option value="3.0">B</option>
<option value="2.6">C+</option>
<option value="2.0">C</option>
<option value="1.0">D</option>
<option value="0.0">F</option>
</select>
</tr>
</table>
</form>
</div>
<div id='btnAddClass' class='btn btn-default'>Add Class</div>
<br>
<button id="Calculate" class='btn btn-default' >Calculate</button>
<div class='result'>
<h3 id="gpa">GPA</h3>
</div>
</div>
</center>
<script src='js/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>