Lesson Tuesday

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

Because we've not yet learned about user interface/front-end logic, the difference between front-end logic and back-end logic (or business and user interface logics) might not feel very clear. This is okay! For now, simply know that what we're creating here is business, or back-end logic because it handles the core functionality and computations of the application. Later on we'll learn about jQuery and creating user interfaces, and we'll revisit the differences between the two types of logic.

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:

var add = function(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.

var add = function(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.

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

var 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.

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

var number1 = prompt("Enter a number:");
var 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.

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

var number1 = parseInt(prompt("Enter a number:"));
var 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 Atom.

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:

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

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

alert(add(number1, number2));