Calculator Programming Project, Part I

Introduction

In this project you will write a simple calculator program. You may find it useful to refer back to your MadLibs page to see examples of a button, a function definition, and calls to the alert and prompt functions.

If your code isn't working as expected, try opening up Firefox's error console to check for (potentially) helpful error messages. If you get stuck, don't hesitate to ask the instructor or a teaching assistant for help.

Calculator:

In this project you will create a simple calculator in a new page. Your calculator will prompt the user for two numbers and then display the sum, the product, the difference, and the quotient of those two numbers. A sample session might look like the following:

    [prompt] Please enter the first number. [user enters] 3
    [prompt] Please enter the second number. [user enters] 4

    [Output]
    3 + 4 = 7
    3 - 4 = -1
    3 * 4 = 12
    3 / 4 = .75
    

1. Copy the Calculator web page to your COMP 105 workspace. Just as with Mini-Lab 1, you can do this in either of two ways:
   • Either right-click (or control-click) on the link and save the file to the same place where your home page from Lab 1 is,
   • Or create a new web page (in Aptana, Brackets, or DreamWeaver, for example), then replace the contents of the page with the contents of the Calculator page (go to the page, view the Page Source, and select the whole thing to copy and paste). Be sure that your new file name ends in .html.

     Tip: Here are some handy keyboard shortcuts:
         Select-All: Command-A (Mac), Control-A (Windows)
         Copy: Command-C (Mac), Control-C (Windows)
         Paste: Command-V (Mac), Control-V (Windows)
     

2. Add a new button to the page called "Calculator". Choose an appropriate name for the function that will be called when the user clicks on this button.
3. Write the function definition for the function associated with your new button. A good software development practice is to start by writing the smallest amount of code that you could test, test it, then continuing by adding very small, incremental changes and testing all along the way. So, for your first step, just write a function that contains a single alert message (which could say anthing), and then test that your function is getting called when you click on your Calculator button.
4. The next smallest step you could make would be to prompt the user for a number, store it in a variable, and then repeat it back to the user with an alert message. Look back at your Mad Libs web page, if you've forgotten how to do this. When you have the first number working, add the prompt for the second number.
5. Next, perform one calculation (addition, for example) and output your result.

   Note: The values returned by the prompt function are strings, not numbers. What is the result if you try to use the + operator on those values?

   Tip: Before you can perform arithmetic on string values they must be converted to numbers using the built-in parseFloat function. For example, if the variable firstNum contains the string "3", the following command will convert it to the number 3:

       firstNum = parseFloat(firstNum);
       

6. Once you have the logic for one calculation working correctly, you can extend it to all four basic arithmetic operations (sum, difference, product, and quotient) and improve the format of your output so that it shows the input values as well as the results, as in the example above.

   Tip: There are several possible ways to complete this exercise. One possibility would be to create four variables to store the the sum, the product, the difference, and the quotient. You can then use the "+" operator to build the output string. For example, the first output statement might look something like the following:

        alert(firstNum + " + " + secondNum + " = " + sum);
   

   [Click on the alert call above to see an explanation. Click on it again to make the explanation disappear.]

Publish to your web site:

1. Make sure that you have updated the "Author:" and "With assistance from:" comments at the top of your source file.

2. Edit the main COMP 105 web page you created in the first lab and add a link to your new Calculator page. (This should be the fourth link in your set of links to COMP 105 assignments, after Mini-Lab 1, MadLibs, and the Numbers Part II mini-lab follow-up.) In the link, refer to your new page with a relative pathname which is just the name of the file (e.g., <a href="Calculator.html">). This tells the browser that the file to look for is in the same directory or folder as the current file (your main COMP 105 web page, in this case). You do not want to give a full or absolute pathname, like <a href="file:///Desktop/Calculator.html">, because the location of your file on the comp105.cs.kzoo.edu server will not be the same as on your own laptop or classroom computer.

   If you worked in a team, each member of your group should do this, so each of you has a link to your calculator page. After the link, list your teammates in parentheses; for example, "Calculator Project (Harry, Ron, and Hermione)".

3. Upload both your modified COMP 105 web page and your page for this project to the comp105.cs.kzoo.edu server. Test that the link to the calculator project works on the server by clicking on it from your home page there. (Make sure that your browser is looking at the page on comp105.cs.kzoo.edu, not your local version.)

Note: After you have learned more about JavaScript Objects, you will be updating your Calculator to write your output directly to the page, rather than communicating via alert boxes. You can find the instructions for Part II of the Calculator programming project on the Detailed Schedule page.