Lesson Monday

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 Atom 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>
  <head>
    <title>Calculator</title>
  </head>
  <body>
    <h1>Calculator</h1>
    <script src="js/scripts.js"></script>
  </body>
</html>

Example JavaScript File

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

var number1 = parseInt(prompt("Enter a number:"));
var number2 = parseInt(prompt("Enter another number:"));
var 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 var 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 calculates Body Mass Index (also known as "BMI") using two arguments. Then write another function that prompts the user for their height and weight, uses the BMI function and alerts the user of their BMI.
  • 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 front-end 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:

var 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 big ol' 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.
  • Try adding the i modifier. What happens?
  • Try adding the g modifier now. 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:

var str = 'Twas the night before Xmas...';
var 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.