Assigned: Wednesday, Feb 1, 2017
Due: Monday, Feb 6, 2017 at noon
Collaboration: You should work with your assigned partner for this lab.
In this lab, you will use JavaScript to build a simple interactive webpage that implements a standard four-function calculator. You will use JavaScript to add calculator functionality to an HTML- and CSS-based calculator interface.
This is the first full lab that you will submit via GitHub, so this process may be a bit unfamiliar. To start out, go to the grinnell-cs/datavis-calculator repository on GitHub and create a fork (one per group). Next, add your group members as collaborators on the repository. All group members will make commits to your forked repository, and you will submit your work by issuing a pull request through GitHub. This is the same process you used for the welcome assignment.
There is one additional step involved for this lab, since you will be working on the code on your local machine. To do this, you must check out the code from GitHub. First, open a terminal window and run the following command:
$ git clone ssh://git@github.com/<your-username>/datavis-calculator
You will need to replace <your username> with the username of whoever created the GitHub fork.
After a few brief messages, you should have a datavis-calculator directory on your machine.
Move into this directory with cd, open the three provided files with a text editor of your choice, and open the calc.html file with your web browser.
You may now move on to the next part of the lab.
As you can see, the starter code includes some basic functionality for the zero and clear buttons.
The starter code uses an onclick event handler to update the calculator’s display when you press one of these buttons.
This behavior doesn’t quite match that of a real calculator;
if a real calculator displays zero and you type another zero, nothing is added to the display.
Write onclick handlers for all the number buttons so you can type numbers into the calculator in a way that resembles a real calculator.
Once this is done, move on to the next part.
Don’t forget to make regular commits and push those commits to GitHub!
Now that you can type numbers into the calculator, it’s time to add support for some actual calculating.
You will need to alternate between string and numeric representation of values in the display.
You’ll find the Math.round and parseInt standard functions useful in doing this;
Math.round will round a number to an integer, and parseInt takes a string of digits and converts it to an equivalent number.
Your calculations should operate only on integers;
round the result of any division to the nearest integer.
If the user tries to divide by zero, return a result of zero.
If you get stuck or you aren’t sure how to do something in JavaScript, consult the Mozilla Developer Network JavaScript Reference. If you still can’t figure out the issue, raise your hand and I will help.
Your job is to implement a calculator that resembles a standard four function calculator. Consider these three examples as you plan your implementation:
2. The display shows 2.3. The display shows 23.+. The display still shows 23.1. The display now shows 1.0. The display now shows 10.=. The display now shows 33.-. The display still shows 33.9. The display now shows 9.+. The display now shows 24.1. The display now shows 1.=. The display now shows 25.1. The display shows 1.C. The display shows 0.3. The display shows 3.+. The display shows 3.4. The display shows 4.+. The display shows 7.9. The display shows 9.C. The display shows 0.1. The display shows 1.=. The display shows 1.2. The display shows 2.+. The display shows 2.3. The display shows 3.×. The display shows 5.2. The display shows 2.=. The display shows 10.Note that this last example illustrates how the calculator executes operations in a different order than if we’d just written 2+3*2.
Once your calculator has received input for one operation, that operation is performed immediately.
Once you have a complete implementation, commit your changes, push them to GitHub, and submit a pull request using the GitHub interface.
If you have time, modify the HTML and CSS to personalize your calculator.
You can change colors, adjust sizing, use new fonts, change the button layout, or anything else that appeals to you.
You can find many interesting CSS properties at the Mozilla Developer Network CSS Reference.
If you make additional changes, add a README file that describes what you changed in the CSS.
Particularly creative or challenging changes to the interface will receive up to 10% extra credit on the lab.