Exercise Tuesday
  • Practice: Calculator Business Logic

Goal: Continue to practice writing JavaScript functions by beginning the business logic for a calculator app. Later, we'll add user interface logic too, and familiarize ourselves with the differences between code for each, and how to keep them separated and organized.

Warm Up

  • What is the difference between business and user interface logic?
  • What's another word for business logic? What about user interface logic?
  • How do you provide a function multiple arguments?

Code

Calculator

Follow along with the previous lesson to begin building a calculator app. Once you've written the code detailed in that lesson, create a project and migrate your code from JSFiddle into VS Code by doing the following:

  • Create a calculator project folder on your computer.
  • Initialize a git repository in your newly created project folder.
  • Create js and css folders in your project folder.
  • Create an empty scripts.js file in your project's js subdirectory.
  • Copy the code from your JSFiddle into your scripts.js file to save it.
  • Create an HTML file in your project directory and include in it a link to your scripts file: <script src="js/scripts.js"></script> (see below for example html file)
  • Add a README.md file.
  • Add everything to your local git repository and commit the changes.
  • Create a calculator repository on GitHub and push your project to GitHub.

Example HTML File

index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Calculator</title>
</head>
<body>
  <h1>Calculator</h1>
  <script src="js/scripts.js"></script>
</body>
</html>

Example JavaScript File

js/scripts.js
function add(number1, number2) {
  return number1 + number2;
}

const number1 = parseInt(prompt("Enter a number:"));
const number2 = parseInt(prompt("Enter another number:"));
const result = add(number1, number2);
alert(result);

If you open your HTML file in the web browser, it should run your code just like it did on JSFiddle; popping up prompt boxes for input and then an alert with the calculated result. If this isn't working, check that you correctly link to your scripts file and that your scripts file includes both the add() function and code that actually calls that function. If something on your page isn't working right, an excellent initial troubleshooting step is to check the JavaScript console to see if there are any helpful error messages that might point you in the right direction.

Next, create functions to subtract, multiply, and divide. Verify that all four work by changing the line near the bottom of the scripts.js (currently reads const result = add(number1, number2);) to call different functions. For now you must manually change that line to choose between operations. In upcoming lessons we'll build a user interface for our calculator so that the user can choose between addition, subtraction, multiplication and division. Do not build out the user interface yet. For now just focus on the business logic.

Additional Custom Functions Practice

(You can do these in JSFiddle.)

  • Write a function that converts temperature between celsius and fahrenheit.
  • Write functions to be used by a cooking app that convert between units. For example, a function that converts gallons to liters. Create a project for this like you did for the calculator, so that you can return and build a user interface for this later.

Introduction to jQuery and Bonus Function Writing

If you fully complete the exercise above continue onward to work through tonight's homework, and the Bonus Function Writing exercise following it.

Lesson 7 of 19
Last updated December 1, 2020