0

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>

2
  • How long do you want to save the data for (indefinitely, until the user closes the app, etc.)? Is this a mobile application running in a browser or in a hybrid app framework as a native app?
    – J. Titus
    Commented Dec 30, 2016 at 23:26
  • Indefinitely until a reset cache button is clicked. Running in a hybrid app framework as a native app @J.Titus
    – Zachmalter
    Commented Dec 30, 2016 at 23:30

1 Answer 1

0

You can use serialize() to get all the values from the form(you also have to give your inputs and select names for serialize to work) and you can use localStorage() to save the data like:

var form_data = $(".block").serialize();
localStorage.setItem('data', form_data);

Then, if you want, you can delete the data saved in local storage like this:

localStorage.removeItem('data');

Example JSFIDDLE.

Check the console to see the stored data in local storage.

You can read more about localStorage() here.

7
  • So how do I have it pull the stored data when it is opened?
    – Zachmalter
    Commented Dec 30, 2016 at 23:32
  • @Zachmalter, what do you mean? What is when opened? Commented Dec 30, 2016 at 23:34
  • Yea. is that localStorage.setItem('data', form_data);
    – Zachmalter
    Commented Dec 30, 2016 at 23:36
  • @Zachmalter, you're a bit unclear. Can you please explain? Is there a problem? Commented Dec 30, 2016 at 23:38
  • Could you please demonstrate it in a snippet? @ionut
    – Zachmalter
    Commented Dec 30, 2016 at 23:38

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.