How to Convert a Numeric Digit to an Alphabetical Grade, Dynamically?
<p>The code below calculates a users grade point average from A+ to E-.
<hr>
Is it possible, within the following fiddle, to display next to the grade point average a grade from A+ to E-. So far, the user types in their grades from A+ to E- and it converts the result into a grade point average.</p>

<p>If a new fiddle could please be provided, it would be very much appreciated, as I am still new to coding. </p>

<p><a href="http://jsfiddle.net/InnovativeDave/q1j4928n/" rel="nofollow">Fiddle</a></p>

<p>Thank You </p>

<p>HTML:</p>

<pre><code>&lt;button class="button" data-bind="click: addClass"&gt;Add a New Class&lt;/button&gt;
&lt;button class="button"&gt;
Apply
&lt;/button&gt;
&lt;hr&gt;

&lt;ul align="center" data-bind="foreach: classes"&gt;
    &lt;li&gt;
        &lt;label&gt;Subject:&lt;/label&gt;&lt;input type="text" data-bind="value: title" placeholder="E.g: English"/&gt;
        &lt;select disabled data-bind="value: credits"&gt;
        &lt;option  selected data-bind="value: credits"&gt;1&lt;/option&gt;
        &lt;/select&gt;
        &lt;label&gt;Grade:&lt;/label&gt;
        &lt;input type="text" data-bind="value: letterGrade" placeholder="E.g: A+"/&gt;
        &lt;br&gt;
        &lt;br&gt;
    &lt;/li&gt;
&lt;/ul&gt;



&lt;hr /&gt;

&lt;br&gt;
&lt;h4&gt;
Your GPA is: &lt;b&gt;&lt;span data-bind="text: totalGPA"&gt;&lt;/span&gt;&lt;/b&gt;
&lt;/h4&gt;
&lt;br&gt;
&lt;h4&gt;
Final Grade: &lt;span&gt;&lt;i&gt;(Where Users Grade is Calculated from A+ to E-)&lt;/i&gt;&lt;/span&gt;
&lt;/h4&gt;
</code></pre>

<p>JQuery:</p>

<pre><code>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);
</code></pre>

<p>CSS:</p>

<pre><code>@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;}
</code></pre>