Lesson Wednesday

Now that we've been introduced to the difference between business logic and user interface logic, let's revisit our calculator project and re-write some of the code. In an upcoming practice lesson, you'll add subtraction, multiplication, and division to this project.

Remember, 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 that happens 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, or to gather user input.

We've already written an `add()` function, so let's use that as a jumping off point. If you've been coding along with the previous lesson that set up our calculator project, we're going to remove the `saySomething()` function and simplify our code:

js/scripts.js
``````// business logic
return number1 + number2;
}

// user interface logic
``````

Notice, too, that we've added comments to distinguish between user interface and business logic in our `scripts.js` file. While you won't see comments like these in production code, they are helpful to include when you are learning and beginning to practice separation of logic.

In the user interface (UI) section, we've simplified our code to use an alert that displays the results of calling the `add()` function with two arguments. The line `window.alert(add(10,5));` calls our `add()` function, passing it two arguments. The return value from `add()` is then immediately passed to the `window.alert()` method. If it's easier to understand, we could rewrite this code on multiple lines as follows:

``````const additionResult = add(10,5);
``````

At this point, when we run our project in the browser (opening the `index.html`), our scripts should pop up a dialog box with the value that the add function returns when passed those two arguments.

Keep in mind that we're using JavaScript's data type coercion: we're letting our JS implicitly change the number `additionResult` into a string, which is the data type that the `window.alert()` method expects as an argument.

## Gathering User Input

Our simple (addition-only) calculator 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 `window.prompt()` method, which takes a string as an argument and returns a string containing the user's input.

js/scripts.js
``````// business logic
return number1 + number2;
}

// user interface logic
const number1 = prompt("Enter a number:");
const number2 = prompt("Enter another number:");

``````

This is an exciting update! Here we've collected two numbers from the user with `window.prompt()`, then we've called `add()` with the two user inputted numbers as arguments, and then returned the result in an alert. Now our simple calculator can respond to user input. Let's try this in the browser. Either open `index.html` in the browser, or reload the page that's already opened to it.

## Parsing Integers

Oops. We have the problem we previously encountered where the `window.prompt()` method 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.

js/scripts.js
``````// business logic
return number1 + number2;
}

// user interface logic
const number1 = parseInt(prompt("Enter a number:"));
const number2 = parseInt(prompt("Enter another number:"));

``````

Now we're getting somewhere! In the next exercise, you'll add in support for subtraction, multiplication and division.

## Reminder: Work with your DevTools Console Open and Look for Console Errors

Whenever we are running JavaScript in the browser and something isn't working correctly, the first step is always to open the DevTools console. In the console, any glaring errors will show up in red with an X to the left of the message. Meanwhile, warnings will show up in yellow. Messages in the console that are red must be addressed immediately.

Let's review a very common error: `Failed to load resource: net::ERR_FILE_NOT_FOUND scipts.js:1`:

At the time this lesson was written, there was an error and a warning. The warning appears to be related to a bug in the latest Chrome update — it doesn't affect our code and it's something we can ignore.

The error, however, is code breaking. It should be a familiar error at this point because we addressed the exact same thing in the Debugging HTML and CSS lesson. In that lesson, we stated that there are three reasons this error will occur:

1. The file doesn't exist
2. The file is in a different directory than the one we specified
3. The file is in the correct place but the name doesn't match the name specified

In our example case above, the issue is the third one. We've left the `r` out of `scripts.js` in our HTML file: `<script src="js/scipts.js"></script>`.

Misspelling a filename is a very common error — and one that's not limited to beginners. It's easy to flub a few keystrokes or mistype a filename. Fortunately, debugging makes it equally easy to find and fix this problem.

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

js/scripts.js
``````// business logic
return number1 + number2;
}

// user interface logic
const number1 = parseInt(prompt("Enter a number:"));
const number2 = parseInt(prompt("Enter another number:"));

• The `Failed to load resource: net::ERR_FILE_NOT_FOUND` means that a file can't be found. This can occur because the file doesn't exist, it's in a different directory than the one we specified, or its in the correct place but the name doesn't match the name specified.