Program 5: REPL

Programming the Web: An Introduction (Spring 2021)

Due date: Thursday, March 25 at 5pm EST

General instructions


Your goal is to design and implement a simple REPL program. (It need not be a game, though you are encouraged to have fun!)

Your assignment must consist of three files all placed in the same folder. There should be nothing else in the folder. The files should be:

You can name the .css and .js files as you would like (but with the appropriate filename extensions), but you must name your HTML as index.html for this assignment. Your index.html must include a <link> tag and a <script> tag in its <head> so that the browser loads your CSS file and your JavaScript file when the page is viewed.

All of your files should include comments that indicate your names and which assignment this is (HW5: REPLs).

The text that appears on your web page should be proofread and easy to understand. It should explain the purpose of your REPL program and any instructions that the user might need to thoroughly explore your program.

If your program is incomplete or does not quite work as you would have liked then that should be made clear as part of the text on your web page.

Your web page should include a clearly marked way of starting your REPL (for example, by clicking on a button).

Your CSS code should, at the very least, define a background color, font family and font size for the page. (Make sure the combinations you choose are easily readable for someone whose eyes may not be as young as yours!)

Your program should be robust meaning that if the user enters input that is not what the program intends the program should not break. The REPL must allow the user a way to stop the loop.

Your JavaScript program should consist of at least five different functions that you have written from scratch.

Your program should use at least one alert, prompt, and confirm, but you are welcome to use as many of each of those as you feel necessary.

Put all your JavaScript code in one .js file. Where it makes sense, separate purely functional computations from the code that relies on input (prompt or confirm) or output (alert). There is no guaranteed best way to make that split, but a rule of thumb: split the function between I/O-based and pure (non-I/O) if the pure part of the computation might be used again elsewhere or you might want to test what values it produces in the console.

Each of your JavaScript functions should have a brief, proofread and edited comment above it indicating what it does. For pure functions, be sure to indicate the expected types of its inputs and the type it returns and to provide at least one example showing how it might be tested in the console.

If any of your functions becomes large enough (in terms of number of lines of code) to no longer fit comfortably into one view in VS Code, then consider breaking it into two or more, smaller functions.

Examples to try right here:

You can use this full (HTML, CSS, JavaScript) example as a model.

Allowable JavaScript for this assignment

With numbers, you can use the standard five arithmetic operations:

+   -   *   /   %

and the six arithmetic comparison operations:

===   !==   <   >   <=   >=

You may also use Math.floor(...) and Math.random().

With Boolean values you can use the literals true and false and the three standard Boolean operators:

!   &&   ||

With strings, you can use:

===   !==   <    >   <=   >=   .length
.toLowerCase()   .toUpperCase()   .charCodeAt(...)   .slice(..., ...)

and you can access individual characters within the string by using [] notation.

You can use parseFloat(...) to convert a string to a number, but remember that if the string does not correspond to a valid number then parseFloat will return NaN. You can test if a number is “not a number” by using isNaN(...); you cannot test it by using an equality test with NaN since:

> NaN === NaN

so, instead, use:

> isNaN(NaN)

You can use null to test if a user has clicked Cancel on a prompt(...) as in:

let answer = prompt('What is the answer? ');
if (answer === null) {

You can use break to exit out of a while loop immediately (as opposed to waiting until a loop condition becomes false), but use it sparingly.

You may also include helpful functions in your JavaScript file that we have used in class, for instance: randomRange, stringMultiply, mask, countOccurrences and others. However, if you do, be sure to clearly state that in a comment preceding the function definition as in:

// Returns a random integer between low (inclusive) and high (exclusive).
// Assumes low and high are integers and that low is less than high. 
// We discussed a version of this function in class and have used
// it in previous labs and homework.
function randomRange(low, high) {
    let gap = high - low;
    let r = low + Math.floor(Math.random() * gap);
    return r;