Question
Directions: You are provided an HTML program. Your responsibility is to insert the appropriate JavaScript statements in the correct locations that will solve the problem
Directions:
You are provided an HTML program. Your responsibility is to insert the appropriate JavaScript
statements in the correct locations that will solve the problem discussed below, You are also to comment the html file with the requested information per the requirements.
Problem to solve:
The meteorology department wants to provide a webpage that will allow users to submit monthly rainfall amount for one year by month. They need you modify the html code provided to:
Read the values entered into the web page
o If a negative number is entered, use the value to zero (0).
o You can assume that rainfall amounts will be entered in whole numbers
Calculate the total rainfall for the year
Calculate the average rainfall for the year
2
Identify the month with the most rain
Identify the month with the least rain
Place the results into the correct text boxes.
Requirements:
For this assignment;
1. You will generate HTML comments to add your name, section, and TA name. This will (should) NOT be visible in the document on the web browser. This is the only HTML you will create.
2. Your assignment is to create the JavaScript to calculate the values as described above and insert it into the TML.
3. You will create and utilize one (1) array to hold the monthly values, at least two (2) functions, and at least one (1) loop which utilizes the array in your solution.
4. Modify the html button element to execute your JavaScript.
5. Utilize JavaScript comments to explain the steps you are preforming within your code. A JavaScript comments form is: /* Place your comment between the stars */
6. Variable names should be descriptive. For example, if a program is calculating the total charge for a bill at a restaurant, it may have a variable named tipAmount. A sample of the webpage you will be modifying looks like:
Additional Information:
Since the contents of a textbox, is going to be used in mathematical operations. Textboxes sometimes treat input as Strings. Use the function parseInt() to convert the String text to a number. Otherwise your calculation operations will not perform as expected. JavaScript provides several math utilities. The Math.round() method rounds a number to a specified decimal place.
The code to fix is here
body { | |||||||||||||||||||||||||||||||||||||||||||||||||||
width: 80%; | |||||||||||||||||||||||||||||||||||||||||||||||||||
margin: auto; | |||||||||||||||||||||||||||||||||||||||||||||||||||
} | |||||||||||||||||||||||||||||||||||||||||||||||||||
input { | |||||||||||||||||||||||||||||||||||||||||||||||||||
color: grey; | |||||||||||||||||||||||||||||||||||||||||||||||||||
font-size: 80%; | |||||||||||||||||||||||||||||||||||||||||||||||||||
padding: 2px 15px 2px 15px; | |||||||||||||||||||||||||||||||||||||||||||||||||||
text-align: right; | |||||||||||||||||||||||||||||||||||||||||||||||||||
} | |||||||||||||||||||||||||||||||||||||||||||||||||||
button { | |||||||||||||||||||||||||||||||||||||||||||||||||||
margin: 20px; | |||||||||||||||||||||||||||||||||||||||||||||||||||
font-size: 70%; | |||||||||||||||||||||||||||||||||||||||||||||||||||
} | |||||||||||||||||||||||||||||||||||||||||||||||||||
label { | |||||||||||||||||||||||||||||||||||||||||||||||||||
margin-left: 30px; | |||||||||||||||||||||||||||||||||||||||||||||||||||
} | |||||||||||||||||||||||||||||||||||||||||||||||||||
p.openingRemarks { | |||||||||||||||||||||||||||||||||||||||||||||||||||
font-size: 125%; | |||||||||||||||||||||||||||||||||||||||||||||||||||
text-align: center; | |||||||||||||||||||||||||||||||||||||||||||||||||||
} | |||||||||||||||||||||||||||||||||||||||||||||||||||
#header { | |||||||||||||||||||||||||||||||||||||||||||||||||||
margin: auto; | |||||||||||||||||||||||||||||||||||||||||||||||||||
min-width: 1200px; | |||||||||||||||||||||||||||||||||||||||||||||||||||
max-width: 1200px; | |||||||||||||||||||||||||||||||||||||||||||||||||||
overflow: auto; | |||||||||||||||||||||||||||||||||||||||||||||||||||
color: white; | |||||||||||||||||||||||||||||||||||||||||||||||||||
padding: 15px; | |||||||||||||||||||||||||||||||||||||||||||||||||||
margin-top: 35px; | |||||||||||||||||||||||||||||||||||||||||||||||||||
font-size: 150%; | |||||||||||||||||||||||||||||||||||||||||||||||||||
text-align: center; | |||||||||||||||||||||||||||||||||||||||||||||||||||
background: DarkSeaGreen; | |||||||||||||||||||||||||||||||||||||||||||||||||||
border-radius: 15px; | |||||||||||||||||||||||||||||||||||||||||||||||||||
} | |||||||||||||||||||||||||||||||||||||||||||||||||||
h1 { background-color:#ffffff; | |||||||||||||||||||||||||||||||||||||||||||||||||||
color:DarkSeaGreen; | |||||||||||||||||||||||||||||||||||||||||||||||||||
font-family: Georgia, "Times New Roman", serif; | |||||||||||||||||||||||||||||||||||||||||||||||||||
text-align:center; | |||||||||||||||||||||||||||||||||||||||||||||||||||
border-bottom: 3px ridge #330000; | |||||||||||||||||||||||||||||||||||||||||||||||||||
border-right: 3px ridge #330000; | |||||||||||||||||||||||||||||||||||||||||||||||||||
} | |||||||||||||||||||||||||||||||||||||||||||||||||||
input[type=radio] {border: 0px; width: 15%; height: 1em; | |||||||||||||||||||||||||||||||||||||||||||||||||||
} | |||||||||||||||||||||||||||||||||||||||||||||||||||
table {margin: auto; | |||||||||||||||||||||||||||||||||||||||||||||||||||
} | |||||||||||||||||||||||||||||||||||||||||||||||||||
Rainfall Measurement Page | |||||||||||||||||||||||||||||||||||||||||||||||||||
Thank you for participating in our study | |||||||||||||||||||||||||||||||||||||||||||||||||||
Please enter your information and click the submit button | |||||||||||||||||||||||||||||||||||||||||||||||||||
Note: measurements are inches and entered as whole numbers | |||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started