Program Requirements This program should add numbers 1 through 9 one a time, via a button click, display the result, and allow the user to Clear the total to zero. Your Starter Codeworks for numbers 1 through 3. Give it a try, push the buttons, to see what it does. Extending Structured Programs is Easy In this assignment, you use existing code to: identify the patterns in a program modify the patterns in order to extend the functionality of the program Your Task for this Assignment Requirements: Extend this program to create the 6 more HTML buttons and 6 more Javascript functions. Software Development Best Practice: Incremental Development Do not program all your code at once like you were editing some essay. Making a big mess and then trying to patch it up all one once... is a nightmare. Add one button and its function Test it Repeat with the next button Pattern One: HTML Button Add your HTML code where the highlighted area is in the image below. Copy an existing button, and modify the function name and the button text. I have started your button 4 and put it in a <--! html comment --> Starter Code: <!DOCTYPE html><html><head><style>* { font-family: arial }</style></head><body><h2 style="background-color:lightyellow">Addition Calculator</hr><div style="background-color:lightblue"><button onclick="funcOne()">+1</button><button onclick="funcTwo()">+2</button><button onclick="funcThree()">+3</button><!-- ASSIGNMENT Task 1.: Copy the button code above --><!--- For example:<button onclick="funcFour()">+4</button>--> <button onclick="clearTotal()">Clear</button></div><p id="message"></p> <script>// javascript code begin// These two lines of code happen as soon as the program runs:var total=0; // start with zero for totalshowTotal(); // display this initial total // These functions only trigger when a button is pressed:function funcOne(){// Algorithm: 1) add 1 to total, 2) display to Usertotal = total + 1;showTotal();}function funcTwo(){// Algorithm: 1) add 2 to total, 2) display to Usertotal = total + 2;showTotal();}function funcThree(){ // Algorithm: 1) add 3 to total, 2) display to Usertotal = total + 3;showTotal();}// ASSIGNMENT Task 2: create a function for each new button// Copy and modify the code above.// START ADDING YOUR CODE HERE:/// for example:/* function funcFour(){ // Algorithm: 1) add 3 to total, 2) display to Usertotal = total + 4;showTotal();} */ // END OF ADDING YOUR CODEfunction clearTotal(){ // Algorithm: 1) set total to zero, 2) display to Usertotal=0;showTotal();}//--------------------------------------------------------------// A utility function simply because the code below is correct but gross to look at.// Everywhere you see showTotal() above, will be automatically replaced with this code.function showTotal(){// Algorithm: use this scary code to change textdocument.getElementById("message").innerHTML=total;} // javascript code end</script></body>
Max Function
Statistical function is of many categories. One of them is a MAX function. The MAX function returns the largest value from the list of arguments passed to it. MAX function always ignores the empty cells when performing the calculation.
Power Function
A power function is a type of single-term function. Its definition states that it is a variable containing a base value raised to a constant value acting as an exponent. This variable may also have a coefficient. For instance, the area of a circle can be given as:
Program Requirements
This program should add numbers 1 through 9 one a time, via a button click, display the result, and allow the user to Clear the total to zero.
Your Starter Codeworks for numbers 1 through 3. Give it a try, push the buttons, to see what it does.
Extending Structured Programs is Easy
In this assignment, you use existing code to:
- identify the patterns in a program
- modify the patterns in order to extend the functionality of the program
Your Task for this Assignment
Requirements: Extend this program to create the 6 more HTML buttons and 6 more Javascript functions.
Software Development Best Practice: Incremental Development
Do not program all your code at once like you were editing some essay. Making a big mess and then trying to patch it up all one once... is a nightmare.
- Add one button and its function
- Test it
- Repeat with the next button
Pattern One: HTML Button
Add your HTML code where the highlighted area is in the image below. Copy an existing button, and modify the function name and the button text. I have started your button 4 and put it in a <--! html comment -->
Starter Code:
<!DOCTYPE html>
<html>
<head><style>
* { font-family: arial }
</style></head>
<body>
<h2 style="background-color:lightyellow">Addition Calculator</hr>
<div style="background-color:lightblue">
<button onclick="funcOne()">+1</button>
<button onclick="funcTwo()">+2</button>
<button onclick="funcThree()">+3</button>
<!-- ASSIGNMENT Task 1.: Copy the button code above -->
<!--- For example:
<button onclick="funcFour()">+4</button>
-->
<button onclick="clearTotal()">Clear</button>
</div>
<p id="message"></p>
<script>
// javascript code begin
// These two lines of code happen as soon as the program runs:
var total=0; // start with zero for total
showTotal(); // display this initial total
// These functions only trigger when a button is pressed:
function funcOne(){
// Algorithm: 1) add 1 to total, 2) display to User
total = total + 1;
showTotal();
}
function funcTwo(){
// Algorithm: 1) add 2 to total, 2) display to User
total = total + 2;
showTotal();
}
function funcThree(){
// Algorithm: 1) add 3 to total, 2) display to User
total = total + 3;
showTotal();
}
// ASSIGNMENT Task 2: create a function for each new button
// Copy and modify the code above.
// START ADDING YOUR CODE HERE:
/// for example:
/* function funcFour(){
// Algorithm: 1) add 3 to total, 2) display to User
total = total + 4;
showTotal();
} */
// END OF ADDING YOUR CODE
function clearTotal(){
// Algorithm: 1) set total to zero, 2) display to User
total=0;
showTotal();
}
//--------------------------------------------------------------
// A utility function simply because the code below is correct but gross to look at.
// Everywhere you see showTotal() above, will be automatically replaced with this code.
function showTotal(){// Algorithm: use this scary code to change text
document.getElementById("message").innerHTML=total;
}
// javascript code end
</script>
</body>
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
