Objective
Given the score of a test, output the corresponding grade as per a grade threshold table.
Description
Recently, a 100-marks test on JavaScript was conducted at a bootcamp teaching modern web technologies.
The test was a 3-hour test with tons and tons of questions on JavaScript and its browser environment. The grade threshold of the test is shown as follows:
Grade | Marks |
---|---|
A | 90 - 100 |
B | 75 - 89 |
C | 60 - 74 |
D | 50 - 59 |
E | 0 - 49 |
In this exercise, you have to ask the user to enter a candidates's score in this test, via a prompt input, and then alert back the corresponding grade as per the threshold table shown above.
If the entered score is not a recognizable value, or an integer not in the range given above, the code must alert 'Invalid value'. A valid value is only an integer and that in the range 0 - 100.
Following are a couple of examples of invalid input values (all of them are strings): '10.1'
, ''
(nothing input), '-10'
, '101'
, 'NaN'
, 'Hello'
, '50x'
.
Here's a live example of what you ought to achieve:
Hints
Hint 1
To determine whether the input is an integer, use the logic as defined in the program created in JavaScript Numbers — Integers Only Exercise.
New file
Inside the directory you created for this course on JavaScript, create a new folder called Exercise-22-Exam-Grades and put the .html solution files for this exercise within it.
Solution
The input prompt is pretty simple to set up. We call the prompt()
function with the message 'Enter the score:', saving the returned value inside a variable called scoreStr
:
var scoreStr = prompt('Enter the score:');
We call it scoreStr
because it's a score string, not a score of type number. This variable has to be processed before confirming that the input value indeed denotes a valid integer.
Next up, we check the validity of scoreStr
, making an alert message reading 'Invalid value!' if it's an invalid input:
var scoreStr = prompt('Enter the score:');
if ((Number(scoreStr) !== parseInt(scoreStr)) || Number(scoreStr) < 0 || Number(scoreStr) > 100) {
alert('Invalid value!');
}
In the header of if
here, the first relational expression confirms whether scoreStr
contains an integer in it or not, as we did back in the JavaScript Numbers — Integers Only Exercise. If this comparison yields false
, we further check whether scoreStr
contains an integer in the desired range or not.
If either of these three expressions turns out to be truthy, it means that the entered value is invalid, and thus we make the alert message inside if
's body.
Before moving forward, we notice slight repetition in the code above — the three calls to Number(scoreStr)
. This can be easily remedied by defining another variable, called score
, holding the numeric equivalent of scoreStr
:
var scoreStr = prompt('Enter the score:');
var score = Number(scoreStr);
if ((score !== parseInt(scoreStr)) || score < 0 || score > 100) {
alert('Invalid value!');
}
So far, so good.
Otherwise, given that the if
fails, we know for sure that score
is valid and henceforth, proceed with the else
block.
Here, we just ought to set up a sequence of if...else if
blocks to determine the exact range where score
falls in and then set the corresponding grade based on the grade table presented above.
For the grade, we'll use a variable grade
.
Following is the extension to our program:
var scoreStr = prompt('Enter the score:');
var score = Number(scoreStr);
if ((score !== parseInt(scoreStr)) || score < 0 || score > 100) {
alert('Invalid value!');
}
else {
var grade;
if (90 <= score && score <= 100) {
grade = 'A';
}
else if (75 <= score && score <= 89) {
grade = 'B';
}
else if (60 <= score && score <= 74) {
grade = 'C';
}
else if (50 <= score && score <= 59) {
grade = 'D';
}
else if (0 <= score && score <= 49) {
grade = 'E';
}
alert(grade);
}
And this completes this exercise.
Simplifying the logic of determining grade
Notice the chain of if...else if
statements in the code above along with the usage of &&
in each one to denote a range for the underlying grade.
Although they work just fine, we can simplify the conditions within these statements.
This is precisely because we have already validated score
using the main if
conditional, right at the start of the program; that is, in the else
block, we already know that score
is between 0
and 100
.
Following we demonstrate one approach to this simplification:
var scoreStr = prompt('Enter the score:');
var score = Number(scoreStr);
if ((score !== parseInt(scoreStr)) || score < 0 || score > 100) {
alert('Invalid value!');
}
else {
var grade;
if (score > 89) {
grade = 'A';
}
else if (score > 74) {
grade = 'B';
}
else if (score > 59) {
grade = 'C';
}
else if (score > 49) {
grade = 'D';
}
else {
grade = 'E';
}
alert(grade);
}