javascript - How to Convert a Numeric Digit to an Alphabetical Grade, Dynamically? -

the code below calculates users grade point average a+ e-.

---

possible, within following fiddle, display next grade point average grade a+ e-. far, user types in grades a+ e- , converts result grade point average.

if new fiddle please provided, appreciated, still new coding.

fiddle

thank

html:

<button class="button" data-bind="click: addclass">add new class</button> <button class="button"> apply </button> <hr>  <ul align="center" data-bind="foreach: classes">     <li>         <label>subject:</label><input type="text" data-bind="value: title" placeholder="e.g: english"/>         <select disabled data-bind="value: credits">         <option  selected data-bind="value: credits">1</option>         </select>         <label>grade:</label>         <input type="text" data-bind="value: lettergrade" placeholder="e.g: a+"/>         <br>         <br>     </li> </ul>    <hr />  <br> <h4> gpa is: <b><span data-bind="text: totalgpa"></span></b> </h4> <br> <h4> final grade: <span><i>(where users grade calculated a+ e-)</i></span> </h4> 

jquery:

function class(title, credits, lettergrade) {     var self = this;     var grademapping = {         'a+': 15,         'a': 14,         'a-': 13,         'b+': 12,         'b': 11,         'b-': 10,         'c+': 9,         'c': 8,         'c-': 7,         'd+': 6,         'd': 5,         'd-': 4,         'e+': 3,         'e': 2,         'e-': 1     }     self.title = ko.observable(title);     self.credits = ko.observable(credits);     self.lettergrade = ko.observable(lettergrade);     self.gpa = ko.computed(function() {         return grademapping[self.lettergrade()];     }); }  function gpacalcviewmodel() {     var self = this;     self.classes = ko.observablearray();     self.totalgpa = ko.computed(function() {         var totalweightedgpa = 0,             totalcredits = 0;         $.each(self.classes(), function() {             totalweightedgpa += (this.gpa() * this.credits());             totalcredits += (this.credits() * 1);         })         return totalweightedgpa / totalcredits;     });     self.addclass = function() {         self.classes.push(new class());     } }; var viewmodel = new gpacalcviewmodel(); ko.applybindings(viewmodel); 

css:

@import url(http://fonts.googleapis.com/css?family=open+sans:400,700); @import url(http://fonts.googleapis.com/css?family=inconsolata:400); * { text-rendering: optimizelegibility;} body, input, textarea, select, button { font-family: 'open sans', sans-serif; } pre { font-family: 'inconsolata', monospace; }  span {font-size: 18px;}   h1 {font-size: 25px;} 

first of value want need data-bind data-bind="text: totalgrade".

second need move grademapping array outside class function make accessible globally.

and third need function mapping gpa backwards grade.

var grademapping = {          'a+': 15,          'a': 14,          'a-': 13,          'b+': 12,          'b': 11,          'b-': 10,          'c+': 9,          'c': 8,          'c-': 7,          'd+': 6,          'd': 5,          'd-': 4,          'e+': 3,          'e': 2,          'e-': 1      }  function class(title, credits, lettergrade) {      var self = this;      self.title = ko.observable(title);      self.credits = ko.observable(credits);      self.lettergrade = ko.observable(lettergrade);      self.gpa = ko.computed(function() {          return grademapping[self.lettergrade()];      });  }    function gpacalcviewmodel() {      var self = this;      self.classes = ko.observablearray();      self.totalgpa = ko.computed(function() {          var totalweightedgpa = 0,              totalcredits = 0;          $.each(self.classes(), function() {              totalweightedgpa += (this.gpa() * this.credits());              totalcredits += (this.credits() * 1);          })          return totalweightedgpa / totalcredits;      });      self.totalgrade = ko.computed(function() {          var totalweightedgpa = 0,              totalcredits = 0;          var gradeletter = null;          $.each(self.classes(), function() {              totalweightedgpa += (this.gpa() * this.credits());              totalcredits += (this.credits() * 1);          });          $.each(grademapping, function(letter, number) {          		if(number == math.round(totalweightedgpa / totalcredits)){              	gradeletter = letter;              }          })          return gradeletter;      });      self.addclass = function() {          self.classes.push(new class());      }  };  var viewmodel = new gpacalcviewmodel();  ko.applybindings(viewmodel);

@import url(http://fonts.googleapis.com/css?family=open+sans:400,700);  @import url(http://fonts.googleapis.com/css?family=inconsolata:400);  * { text-rendering: optimizelegibility;}  body, input, textarea, select, button { font-family: 'open sans', sans-serif; }  pre { font-family: 'inconsolata', monospace; }    span {font-size: 18px;}      h1 {font-size: 25px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>  <button class="button" data-bind="click: addclass">add new class</button>  <button class="button">  apply  </button>  <hr>    <ul align="center" data-bind="foreach: classes">      <li>          <label>subject:</label><input type="text" data-bind="value: title" placeholder="e.g: english"/>          <select disabled data-bind="value: credits">          <option  selected data-bind="value: credits">1</option>          </select>          <label>grade:</label>          <input type="text" data-bind="value: lettergrade" placeholder="e.g: a+"/>          <br>          <br>      </li>  </ul>        <hr />    <br>  <h4>  gpa is: <b><span data-bind="text: totalgpa"></span></b>  </h4>  <br>  <h4>  final grade: <span data-bind="text: totalgrade"></span>  </h4>

here's full jsfiddle example: jsfiddle