Lesson Monday

Now that we can write custom JavaScript functions, let's create a simple calculator application! We'll begin with the business logic and focus first on creating the ability to add numbers together. We'll later include subtraction, multiplication and division, then add the user interface logic.

Business logic is all the computation that users can't see. For instance, when we write functions that add numbers together, that is business logic. A computation is happening behind the scenes.

User interface logic, on the other hand, is the logic that allows a user to interact with a page. An example is a function to hide or show an image.

Don't worry if this isn't clear yet - it will become clearer over time. For now, just be aware that we are focused on the business logic of our calculator application in this lesson.

Let's write the whole thing in JSFiddle first, then we'll transfer it into our own project.

Defining an Addition Function

We've already written an add() function, so let's use that as a jumping off point. Clear out your JSFiddle JavaScript box and put in just your custom add() function:

function add(number1, number2) {
  return number1 + number2;
}

Add in a line at the bottom of your JSFiddle script, below the function definition. This line will call our add() function, passing it two arguments. The return value from that function is immediately passed to JavaScript's built-in alert() function. When the script is run, it should pop up a dialog box with the value that the add function returns when passed those two arguments.

function add(number1, number2) {
  return number1 + number2;
}

alert(add(10,5));

Gathering User Input

Now we have a simple (addition-only) calculator, but it isn't very useful because you have to go in and modify the code every time you want to do a new calculation. Let's add in the ability to collect input from the user.

Remember that we can collect input through the built-in prompt() function, which takes a string as an argument and returns a string containing the user's input.

function add(number1, number2) {
  return number1 + number2;
}

const number1 = prompt("Enter a number:");

alert(number1);

Not very exciting. All we did was echo back to the user what they entered. But let's ask for two inputs and then use them as arguments to our function.

function add(number1, number2) {
  return number1 + number2;
}

const number1 = prompt("Enter a number:");
const number2 = prompt("Enter another number:");

alert(add(number1, number2));

Parsing Integers

Oops. We have the problem we previously encountered where the prompt() function returns strings, so the + operator we use inside of our add() function concatenates the two strings together rather than doing what we want. Because our add() function expects numbers as arguments rather than strings, we must convert the inputs into numbers before calling our add() function.

function add(number1, number2) {
  return number1 + number2;
}

const number1 = parseInt(prompt("Enter a number:"));
const number2 = parseInt(prompt("Enter another number:"));

alert(add(number1, number2));

Now we're getting somewhere! In the next exercise, you'll add in support for subtraction, multiplication and division, but first let's move this code into a project so that we can save it and build on it without having to use JSFiddle. Do not exit JSFiddle yet. In the next lesson, we'll migrate the code we've created here in JSFiddle into a new project directory in our text editor.

Example


The following code prompts the user for two numbers, uses the included add() function to add these two numbers together, and provides the sum to the user in an alert box:

function add(number1, number2) {
  return number1 + number2;
}

const number1 = parseInt(prompt("Enter a number:"));
const number2 = parseInt(prompt("Enter another number:"));

alert(add(number1, number2));

Lesson 28 of 61
Last updated October 12, 2020