Exercise Tuesday

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.

Further Exploration

If you finish today's lessons and exercises with time to spare, spend the rest of your day exploring the following additional content:

Regular Expressions

Regular expressions are search strings used to locate and manipulate content that matches a particular pattern.

Here is an example of a variable set to a regular expression:

const sample_regex = /epicodus/gi

The characters between the / slashes represent the regular expression. The characters following the regular expression, gi, are modifiers. The g stands for "global" and the i stands for case insensitive.

Let's try it out:

  • Go to Regular Expressions 101.
  • In the Test String area, add this string: "This is a long string with the word Epicodus in it. We'll also add epicodus, Epicodus, EPIcoduS and epiCODus just for searching fun."
  • In the Regular Expression fields, add "epicodus" between the slashes / epicodus /.
  • Notice that all lowercase epicodus appears in blue in the Test String area. This indicates a match with the pattern of the regular expression.
  • To the right of the area where we enter a string, there's a flag icon. Try adding the i modifier. What happens?
  • The g modifier is already set. Try removing it. What happens?

To learn all of the characters used when creating regular expressions, visit the MDN documentation or just experiment on the Regex101 site paying attention the explanation area for what is happening.

To use regular expressions to find and replace text that matches patterns, try using the built-in JavaScript method, replace(). Here's an example from MDN that you can try in JSFiddle:

const str = 'Twas the night before Xmas...';
const newstr = str.replace(/xmas/i, 'Christmas');
alert(newstr);  

To practice how regular expressions create patterns, see how far you can get in the Regex Crossword.

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 4 of 11
Last updated June 22, 2020