Follow instructions very carefully.


Assignment 7 – JavaScript 1 IT-130: Introductory Computing for the Web Sal J. Barry, Instructor Simple JavaScript Calculator Make one web page that takes two numbers and adds them, subtracts them, multiplies them, and divides them. Also, your page should have a way to clear the fields. See the images at the right – this is what your page (more or less) should look like For this assignment, you will make a web page that has: • Two text input fields • Two

tags that contain dynamic text o One

for the operand • + • – • x • ÷ • (or empty - use   to make a space) o One

for the answer • Five input buttons o Add o Subtract o Multiply o Divide o Clear • The following functionality: o Numbers should add when Add button is clicked o Numbers should subtract when Subtract button is clicked o Numbers should multiply when Multiply button is clicked o Numbers should divide when Divide button is clicked o Fields should clear when Clear button is clicked Save this file as a7.html. Be sure to link your index.html file to a7.html so it can be graded. Due Date: Monday, July 12 by 11:59 pm CT. ^ What your page looks like when it loads. ^ When the Add button is pressed ^ When the Subtract button is pressed ^ When the Multiply button is pressed. ^ When the Divide button is pressed. ^ When the Clear button is pressed. Getting Started Although you can find plenty of JavaScript calculator examples online, I want you to use (and modify) this code shown below (it is the same code that we used in class). Here is the code for the Add button. Put this between the page’s and tags function addNumbers() { // make a variable for number in box1 var value1 = parseFloat(document.getElementById("box1").value); // make a variable for number in box2 var value2 = parseFloat(document.getElementById("box2").value); // make a variable called total var total = value1 + value2; // put result in answer span document.getElementById("answer").innerHTML = total; // insert an operand in sign span document.getElementById("sign").innerHTML = "+"; } // additional functions go here Here is the HTML to put between the page’s and tags:

Math with JavaScript

=


Hints • Any line in JavaScript that starts with // is a comment that can be omitted • You will need to make separate functions that subtract, multiply and divide • The functions for subtract, multiply and divide will have almost the exact same code as for addition • When performing the calculations, use the following operands: o + for addition o - for subtraction o * for multiplication o / for division • Have the following characters output in your sign span: o + for a plus sign + o - for a minus sign - o x for a multiply sign x o ÷ to make a divide sign ÷ • To reset everything back to the way it originally was… o Do not name this function “clear()” or “reset()” o Those are reserved words that will not work as a function name o Instead, I recommend naming the function clearAll() o You will set the value of box1 and box2 to an empty string, which is a pair of "quotes" with nothing inside of them -- not even a space o This is what an empty string looks like: "" o You will set the innerHTML of answer to an empty string o You will set the innerHTML of sign to " " (including quotes)