Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

Exercise: Exam Grades

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:

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

Live Example

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.

View Solution

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);
}

Live Example