Course: JavaScript

Progress (0%)

Exercise 22 Easy

Prerequisites for the exercise

1. JavaScript `if...else`
2. All previous chapters

## 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:

A90 - 100
B75 - 89
C60 - 74
D50 - 59
E0 - 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) {
}``````

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) {
}``````

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) {
}
else {
if (90 <= score && score <= 100) {
}
else if (75 <= score && score <= 89) {
}
else if (60 <= score && score <= 74) {
}
else if (50 <= score && score <= 59) {
}
else if (0 <= score && score <= 49) {
}
}``````

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) {
}
else {
if (score > 89) {
}
else if (score > 74) {
}
else if (score > 59) {