Dave - 7 months ago 9
Javascript Question

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

The code below calculates a users grade point average from A+ to E-.

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.

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

Fiddle

Thank You

HTML:

``````<button class="button" data-bind="click: addClass">Add a 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>
<input type="text" data-bind="value: letterGrade" placeholder="E.g: A+"/>
<br>
<br>
</li>
</ul>

<hr />

<br>
<h4>
Your GPA is: <b><span data-bind="text: totalGPA"></span></b>
</h4>
<br>
<h4>
</h4>
``````

JQuery:

``````function Class(title, credits, letterGrade) {
var self = this;
'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.gpa = ko.computed(function() {
});
}

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);
})
});
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);
* { 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 all to get value where you want you need to data-bind it `data-bind="text: totalGrade"`.

Second you need to move gradeMapping array outside `class` function to make it accessible globally.

And third you need to function mapping GPA backwards to 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
}
var self = this;
self.title = ko.observable(title);
self.credits = ko.observable(credits);
self.gpa = ko.computed(function() {
});
}

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);
})
});
var totalWeightedGPA = 0,
totalCredits = 0;
\$.each(self.classes(), function() {
totalWeightedGPA += (this.gpa() * this.credits());
totalCredits += (this.credits() * 1);
});
if(number == Math.round(totalWeightedGPA / totalCredits)){
}
})
});
self.classes.push(new Class());
}
};
var viewModel = new GpaCalcViewModel();
ko.applyBindings(viewModel);``````
``````@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
* { 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">
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>
<input type="text" data-bind="value: letterGrade" placeholder="E.g: A+"/>
<br>
<br>
</li>
</ul>

<hr />

<br>
<h4>
Your GPA is: <b><span data-bind="text: totalGPA"></span></b>
</h4>
<br>
<h4>