Question

In: Computer Science

Part 1: Find and fix errors and add following functionalities 1. There are several syntax errors...

Part 1: Find and fix errors and add following functionalities

1. There are several syntax errors in the code that are preventing this calculator from working, find and fix those errors. When they are fixed, the number buttons will all work, as well as the + (add) and -- (decrement) buttons.

a. To find the errors, open up the Developers Tool of the browser and look at the console (F12).

  1. Verify the add functionality works. For a binary operator, you must click on the buttons in the

    following order:

    1. Hit a number button

    2. Hit the ‘+’ button

    3. Hit a number button

    4. Hit the ‘Calculate’ button

  2. Verify the decrement operator works. For a unary operator, you must click the buttons in the following order:

    1. Hit the number button

    2. Hit the ‘—‘ button

  3. Implement subtraction in a similar fashion to addition:

Create a subtract function. To subtract, the user must hit a number button, then the ‘-‘ button,another number button and then the ‘Calculate’ button. The function should store the firstnumber in a global variable, similar to the add function.

Add code in the calculate button which will perform the subtraction when the ‘Calculate’button is clicked.
Call the subtract function from the HTML file.


5. Implement the sqrt() button. Similar to the decrement function, the sqrt() button will take the value of

the number and display the square root. Use the Math.sqrt function to calculate the square root. 6. Validate any HTML CSS and/or JavaScript errors.

Part 2: Implement 2 or more buttons

  1. Pick any two additional buttons and make them work. When you turn in your lab put in the‘Comments’ section of Canvas, which two buttons you implemented.

CODE:

HTML:

<!doctype html>
<html lang="en">

<head>

    <title>Calculator</title>
    <!-- Meta tag for keywords  -->
    <meta name="keywords" content="Calculator" >
    <!-- Meta tag for description  -->
    <meta name="description" content="ITIS 3135 Activity 5" >
   <!-- Meta tag for character encoding  -->
    <meta charset="UTF-8">
    <!--External Stylesheet -->
    <link rel="stylesheet" type="text/css" href="Activity5.css">
   <!-- JavaScript function declarations -->
    <script src="Activity5.js"></script>
 
</head>

<body>
    <header>
      <h1>My Calculator</h1> 
      <!-- For people who don't have JavaScript enabled-->
      <noscript>This web page requires JavaScript to be enabled on your browser.</noscript>
   </header>
    
   <main id="calc">
   
      <!-- form for user input that represents a calculator -->
      <form name="frmCalc" id="frmCalc">
         <p>Please enter a numeric value or use the number buttons below.</p>
         
         <!-- Text Box to enter a numeric value -->
         <input type="text" name="txtNumber" value="" size="20" /><br /><br/>
         
         <!-- Number buttons -->
         <input type="button" value="1" name="btn1" onclick="showNum(1)" />
         <input type="button" value="2" name="btn2" onclick="showNum(2)" />
         <input type="button" value="3" name="btn3" onclick="showNum(3)" />
         
         <!-- ADD: Sets up operation to add current number to next number entered -->
         <input type="button" value="+" name="btnPlus" onclick="add()" /><br/>
         
         <!-- Number buttons -->
         <input type="button" value="4" name="btn4" onclick="showNum(4)" />
         <input type="button" value="5" name="btn5" onclick="showNum(5)" />
         <input type="button" value="6" name="btn6" onclick="showNum(6)" />
         
         <!-- *** Subtract (Implement Me!) *** -->
         <input type="button" value="-" name="btnMinus" onclick="" onclick="" /><br/>
         
         <!-- Number buttons -->
         <input type="button" value="7" name="btn7" onclick="showNum(7)" />
         <input type="button" value="8" name="btn8" onclick="showNum(8)" />
         <input type="button" value="9" name="btn9" onclick="showNum(9)" />
         
         <!-- *** Multiply (Implement Me!) *** -->
         <input type="button" value="*" name="btnTimes" onclick="" /><br/>
         
         <!-- Number buttons -->
         <input type="button" value="0" name="btn0" onclick="showNum(0)" />

         <!-- *** Power (Implement Me!) Takes two values n^y *** -->
         <input type="button" value="^" name="btnPow" onclick=""/>
         
         <!-- *** Power2 (Implement Me!) *** Takes one value n^2-->
         <input type="button" value="^2" name="btnPow2" onclick=""/>
         
         <!-- *** Divide (Implement Me!) *** -->
         <input type="button" value="/" name="btnDivide" onclick=""/><br/>
         
         <!-- Decrements value currently displayed -->
         <input type="button" value="--" name="btnDecrement" onclick="decrement()" />
         
         <!-- *** Increment (Implement Me!) *** -->
         <input type="button" value="++" name="btnIncrement" onclick=""/>
         
         <!-- *** Square Root (Implement Me!) *** -->
         <input type="button" value="sqrt()" name="btnSqrt" onclick=""/><br />
         
         <!-- Calculates the floor of the current number being displayed -->
         <input type="button" value="Floor" name="btnFloor" onclick="" />     
       
         <!-- *** Round (Implement Me!) *** -->
         <input type="button" value="Round" name="btnRound" onclick=""/>
         
         <!-- *** Decimal (Implement Me!) *** -->
         <input type="button" value="." name="btnDecimal" onclick="showNum('.')" />
         
         <br/><br/>
             
         <input type="reset" name="btnReset" value="Clear" onclick="clear()" />
         <input type="button" name="btnCalc" value="Calculate" onclick="calculate()" />
      </form>

   </main>
   
   <footer id="Validation">
      <br/>
      <a href="https://validator.w3.org/check?uri=referer">Validate HTML</a> 
      <a href="https://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a>
   </footer>
</body>
</html>

CSS:
body
 {
    font-family:"arial";
}
        
/*Make it look more like a calculator*/
#calc
{
   width:250px;
    background-color:#cccccc;
    text-align:center;
    border:outset;
    padding:5px;
}
        
/*Change the style of the buttons*/
input
{
    font-family:"Courier New";
    text-align:right;
 }

/*Make the buttons that have not been implemented red*/
input.implement
{
    background-color:red;   
}

JS:

//Global variables
var prevCalc = 0;
var calc = "";

//The following function displays a number in the textfield when a number is clicked.
//Note that it keeps concatenating numbers which are clicked. 
function showNum(value) {
    document.frmCalc.txtNumber.value += = value;
}

//The following function decreases the value of displayed number by 1.
//isNaN method checks whether the value passed to the method is a number or not.     
function decrement() {
    var num = parseFloat(document.frmCalc.txtNumber.value);
        if (!(isNaN(num))) {
            num--;
            document.frmCalc.txtnumber.value = num;
        }
}

//The following function is called when "Add" button is clicked. 
//Note that it also changes the values of the global variables.       
function add() {
    var num = parseFloat(document.frmCalc.txtNumber.value);
        if (!(isNaN(num))) {
            prevCalc = num;
            document.frmCalc.txtNumber.value = "";
            calc = "Add";
        }
}

//The following function is called when "Calculate" button is clicked.
//Note that this function is dependent on the value of global variable.        
function calculate() {
    var num = parseFloat(document.frmCalc.txtNumber.value);
        if (!(isNaN(num))) {
            if (calc == "Add"){
                var total = previousCalc + num;
                document.frmCalc.txtNumber.value = total;
            }
        
}

function clear() {
   document.frmCalc.txtNumber.value = "";
   prevCalc = 0;
   calc = "";
}

Solutions

Expert Solution

If you have any doubts, please give me comment...

calculator.html

<!doctype html>

<html lang="en">

<head>

    <title>Calculator</title>

    <!-- Meta tag for keywords  -->

    <meta name="keywords" content="Calculator">

    <!-- Meta tag for description  -->

    <meta name="description" content="ITIS 3135 Activity 5">

    <!-- Meta tag for character encoding  -->

    <meta charset="UTF-8">

    <!--External Stylesheet -->

    <link rel="stylesheet" type="text/css" href="Activity5.css">

    <!-- JavaScript function declarations -->

    <script src="Activity5.js"></script>

</head>

<body>

    <header>

        <h1>My Calculator</h1>

        <!-- For people who don't have JavaScript enabled-->

        <noscript>This web page requires JavaScript to be enabled on your browser.</noscript>

    </header>

    <main id="calc">

        <!-- form for user input that represents a calculator -->

        <form name="frmCalc" id="frmCalc">

            <p>Please enter a numeric value or use the number buttons below.</p>

            <!-- Text Box to enter a numeric value -->

            <input type="text" name="txtNumber" value="" size="20" />

            <br />

            <br/>

            <!-- Number buttons -->

            <input type="button" value="1" name="btn1" onclick="showNum(1)" />

            <input type="button" value="2" name="btn2" onclick="showNum(2)" />

            <input type="button" value="3" name="btn3" onclick="showNum(3)" />

            <!-- ADD: Sets up operation to add current number to next number entered -->

            <input type="button" value="+" name="btnPlus" onclick="add()" />

            <br/>

            <!-- Number buttons -->

            <input type="button" value="4" name="btn4" onclick="showNum(4)" />

            <input type="button" value="5" name="btn5" onclick="showNum(5)" />

            <input type="button" value="6" name="btn6" onclick="showNum(6)" />

            <!-- *** Subtract *** -->

            <input type="button" value="-" name="btnMinus" onclick="subtract()" />

            <br/>

            <!-- Number buttons -->

            <input type="button" value="7" name="btn7" onclick="showNum(7)" />

            <input type="button" value="8" name="btn8" onclick="showNum(8)" />

            <input type="button" value="9" name="btn9" onclick="showNum(9)" />

            <!-- *** Multiply *** -->

            <input type="button" value="*" name="btnTimes" onclick="multiply()" />

            <br/>

            <!-- Number buttons -->

            <input type="button" value="0" name="btn0" onclick="showNum(0)" />

            <!-- *** Power Takes two values n^y *** -->

            <input type="button" value="^" name="btnPow" onclick="power()" />

            <!-- *** Power2 *** Takes one value n^2-->

            <input type="button" value="^2" name="btnPow2" onclick="square()" />

            <!-- *** Divide *** -->

            <input type="button" value="/" name="btnDivide" onclick="divide()" />

            <br />

            <!-- Decrements value currently displayed -->

            <input type="button" value="--" name="btnDecrement" onclick="decrement()" />

            <!-- *** Increment *** -->

            <input type="button" value="++" name="btnIncrement" onclick="increment()" />

            <!-- *** Square Root *** -->

            <input type="button" value="sqrt()" name="btnSqrt" onclick="sqrt()" />

            <br />

            <!-- Calculates the floor of the current number being displayed -->

            <input type="button" value="Floor" name="btnFloor" onclick="floor()" />

            <!-- *** Round *** -->

            <input type="button" value="Round" name="btnRound" onclick="round()" />

            <!-- *** Decimal *** -->

            <input type="button" value="." name="btnDecimal" onclick="showNum('.')" />

            <br/>

            <br/>

            <input type="reset" name="btnReset" value="Clear" onclick="clear()" />

            <input type="button" name="btnCalc" value="Calculate" onclick="calculate()" />

        </form>

    </main>

    <footer id="Validation">

        <br/>

        <a href="http://validator.w3.org/check?uri=referer">Validate HTML</a>

        <a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a>

    </footer>

</body>

</html>

Activity5.js

//Global variables

var prevCalc = 0;

var calc = "";

//The following function displays a number in the textfield when a number is clicked.

//Note that it keeps concatenating numbers which are clicked.

function showNum(value) {

    document.frmCalc.txtNumber.value += value;

}

//The following function decreases the value of displayed number by 1.

//isNaN method checks whether the value passed to the method is a number or not.

function decrement() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        num--;

        document.frmCalc.txtNumber.value = num;

    }

}

//The following function increases the value of displayed number by 1.

//isNaN method checks whether the value passed to the method is a number or not.

function increment() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        num++;

        document.frmCalc.txtNumber.value = num;

    }

}

//The following function is called when "sqrt" button is clicked.

//Note that it also changes the values of the global variables.

function sqrt() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        var sqrtvalue = Math.sqrt(num);

        document.frmCalc.txtNumber.value = sqrtvalue;

    }

}

//The following function is called when "floor" button is clicked.

//Note that it also changes the values of the global variables.

function floor() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        var floorvalue = Math.floor(num);

        document.frmCalc.txtNumber.value = floorvalue;

    }

}

//The following function is called when "round" button is clicked.

//Note that it also changes the values of the global variables.

function round() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        var roundvalue = Math.round(num);

        document.frmCalc.txtNumber.value = roundvalue;

    }

}

//The following function is called when "square" button is clicked.

//Note that it also changes the values of the global variables.

function square() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        var powvalue = Math.pow(num, 2);

        document.frmCalc.txtNumber.value = powvalue;

    }

}

//The following function is called when "Add" button is clicked.

//Note that it also changes the values of the global variables.

function add() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        prevCalc = num;

        document.frmCalc.txtNumber.value = "";

        calc = "Add";

    }

}

//The following function is called when "Subtract" button is clicked.

//Note that it also changes the values of the global variables.

function subtract() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        prevCalc = num;

        document.frmCalc.txtNumber.value = "";

        calc = "Subtract";

    }

}

//The following function is called when "Multiply" button is clicked.

//Note that it also changes the values of the global variables.

function multiply() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        prevCalc = num;

        document.frmCalc.txtNumber.value = "";

        calc = "Multiply";

    }

}

//The following function is called when "Divide" button is clicked.

//Note that it also changes the values of the global variables.

function divide() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        prevCalc = num;

        document.frmCalc.txtNumber.value = "";

        calc = "Divide";

    }

}


//The following function is called when "Power" button is clicked.

//Note that it also changes the values of the global variables.

function power() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        prevCalc = num;

        document.frmCalc.txtNumber.value = "";

        calc = "Power";

    }

}



//The following function is called when "Calculate" button is clicked.

//Note that this function is dependent on the value of global variable.

function calculate() {

    var num = parseFloat(document.frmCalc.txtNumber.value);

    if (!(isNaN(num))) {

        var total = 0;

        if (calc == "Add") {

            total = prevCalc + num;

            document.frmCalc.txtNumber.value = total;

        } else if (calc == "Subtract") {

            total = prevCalc - num;

            document.frmCalc.txtNumber.value = total;

        } else if (calc == "Multiply") {

            total = prevCalc * num;

            document.frmCalc.txtNumber.value = total;

        } else if (calc == "Divide") {

            total = prevCalc / num;

            document.frmCalc.txtNumber.value = total;

        } else if (calc == "Power") {

            total = Math.pow(prevCalc, num);

            document.frmCalc.txtNumber.value = total;

        }

    }

}

function clear() {

    document.frmCalc.txtNumber.value = "";

    prevCalc = 0;

    calc = "";

}

Activity5.css

body {

    font-family: "arial";

}


/*Make it look more like a calculator*/

#calc {

    width: 250px;

    background-color: #cccccc;

    text-align: center;

    border: outset;

    padding: 5px;

}

/*Change the style of the buttons*/

input {

    font-family: "Courier New";

    text-align: right;

}


/*Make the buttons that have not been implemented red*/

input.implement {

    background-color: red;

}

venereology answered 1 hour ago
Next > < Previous

Related Solutions

The following code segment which uses pointers may contain logic and syntax errors. Find and correct...
The following code segment which uses pointers may contain logic and syntax errors. Find and correct them. a) Returns the sum of all the elements in summands int sum(int* values) { int sum = 0; for (int i = 0; i < sizeof(values); i++) sum += *(values + i); return sum; } b) Overwrites an input string src with "61C is awesome!" if there's room. Does nothing if there is not. Assume that length correctly represents the length of src....
identify the syntax errors in the following code:             public class Hello {                    &
identify the syntax errors in the following code:             public class Hello {                         private static int main(String [] args) {                                     string Msg=”Hello, Wrld!;                                     Sytem.out.println(msg+ “Ken")
Analyze following program and Find Syntax errors. #include<iostream> int show(int x) int main() {     int A,B;...
Analyze following program and Find Syntax errors. #include<iostream> int show(int x) int main() {     int A,B;       char B=10; cout<<”Enter Value of A”; cin<<A; show(A) show(50)          }       cin.get(); } int show(int x); { cout<<”Value is =” <<X cout<<endl; }
Each of the following files in the Chapter15 folder of your downloadable student files has syntax and/or logic errors.
Each of the following files in the Chapter15 folder of your downloadable student files has syntax and/or logic errors. In each case, determine the problem and fix the program. After you correct the errors, save each file using the same filename preceded with Fix. For example, DebugFifteen1.java will become FixDebugFifteen1.java. a. DebugFifteen1.java b. DebugFifteen2.java c. DebugFifteen3.java d. DebugFifteen4.java    
SQL Question: What syntax to find the following? Out of the 10 employees, how many do...
SQL Question: What syntax to find the following? Out of the 10 employees, how many do we have a record of handling at least one order? You can do this by pulling the distinct employee ids from the Order table What syntax would you use to pull a list of all Shipper IDs and Names along with the count of all orders they’ve shipped? Make sure rename count(orders) to OrdersShipped. To do this you’ll need to join Orders and Shippers...
#1 Part 1: Find the payback in years (to the nearest hundredths place) for the following...
#1 Part 1: Find the payback in years (to the nearest hundredths place) for the following cash flow with a WACC of 4%: Time Period                 Cash Flow                   Cumulative Out of Pocket        0                                -100                                         -100        1                                   40                                           -60        2                                   50                                           -10        3                                   20                                          +10        4                                   70                                          +80 #1 Part 2: Find the discounted payback in years (to the nearest hundredths place) for the following cash flow with a WACC of 12%. Hint: interpolation must be used...
Find and correct at least two errors in each of the following segments of code. a)...
Find and correct at least two errors in each of the following segments of code. a) final int ARRAY_SIZE = 5; ARRAY_SIZE = 10; int[] table = new int[ARRAY_SIZE]; for (int x = 0; x <= ARRAY_SIZE; x++) table[x] = 99; b) String[] names = {“Mina” , “George”}; int totalLength = 0; for (int i = 0; i <= names.length() ; i++) totalLength += names[i].length; c) String[] words = “Hello”,“Goodbye”; System.out.println(words.toUpperCase()); d) public class MyClass { private int x; private...
What types of defects or errors might the following organizations measure and improve as part of...
What types of defects or errors might the following organizations measure and improve as part of a Six Sigma initiative – Metropolitan Bus company and Walt Disney World?
Find ∆H and ∆S for the following data. Calculate percent errors for the enthalpy and entropy...
Find ∆H and ∆S for the following data. Calculate percent errors for the enthalpy and entropy of reaction using the following literature values: ∆H = 110 kJ/mol, ∆S = 380J/mol*K Standardized HCl = .5087M Ksp = [Na^+]^2[Borox^2-] ln(Ksp) = -∆H/RT + ∆S/R Temperature of solution;Amount of HCl needed to titrate borox;Volume aliquot Trial 1 - 295K;2.50mL;5.8mL Trial 2 - 316K;5.76mL;5.4mL Trial 3 - 309K;4.57mL;5.6mL Trial 4 - 305K;4.34mL;6.5mL Trial 5 - 311K;7.70mL;5.8mL Trial 6 - 310K;7.73mL;6.1mL After I calculated everything...
12- Find the 5 errors and wtrite correct versions in the following text IN SEARCH OF...
12- Find the 5 errors and wtrite correct versions in the following text IN SEARCH OF PROFITS IN CHINA China has a population of about 1.4 billion; but that does not translate to as many customers; number of those that can afford the products of foreign companies would not reach 100 million. Still, foreign invested companies are quite profitable in China; they account for about 15% of the profits of industrial companies in the country. Supported by high income inequality...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT