PLEASE HELP! JAVASCRIPT/HTML coding! For the following two web pages, you may re
ID: 3923776 • Letter: P
Question
PLEASE HELP! JAVASCRIPT/HTML coding!
For the following two web pages, you may reference a control’s value in JavaScript using:
document.getElementById('[control-ID]').value
Where [control-ID] is the value of the ID attribute for the control.
Q1 .You've been hired by Payroll Penguins to write a web page that determines the pays and taxes on a paycheck. Provide the following controls to get the following information from an accountant:
Hourly rate (label and text box) – the employee’s wage. Insure that the rate is between $10-30 per hour.
Hours worked (label and text box) – the number of hours worked per week. Insure that the hours worked is between 15-45 hours per week.
Week (label and input control) – the week the paycheck covers.
Provide controls to display the following outputs:
A button to perform the calculations.
Gross pay (label and text box) – use formula hourly rate * time worked.
Federal tax (label and text box) – use formula gross pay * 0.15.
FICA (Social Security and Medicare) tax (label and text box) – use formula gross pay * 0.0765.
State tax (label and text box) – use formula gross pay * 0.0435.
Net pay (label and text box) – use formula gross pay – federal tax – FICA tax – state tax.
A button to clear all inputs.
Also include these elements:
A page header with a title.
A page footer with the company name and an e-mail link.
Enclose all controls in a form and submit the form using method get and actionhttp://www.tipjar.com/cgi-bin/test.
Insure that labels and text boxes are aligned in columns. Connect the web page to a .CSS style sheet containing specifications for each category of control used in the page (body, p, inputs, etc.). Place JavaScript in the HTML page.
Explanation / Answer
<html>
<head>
<title>Tax calculating Form</title>
<script type = "text/javascript">
function myFunction()
{
document.getElementById("form1").submit();
}
function myFunction1()
{
document.getElementById("form1").reset();
}
function calc()
{
var hourly_rate, hours_worked;
Gross_pay = hourly_rate*hours_worked;
Federal_tax = gross_pay * 0.15;
FICA=gross_pay+0.0765;
State_tax=gross_pay+0.0435;
net_pay=gross_pay-federal_tax-FICA-state_tax;
document.form1.gross_pay.value = gross_pay;
document.form1.federal_tax.value = federal_tax;
document.form1.FICA.value = FICA;
document.form1.state_tax.value = State_tax
document.form1.net_pay.value = net_pay
}
</script>
</head>
<body >
<form name = "form1">
<table border = "1">
<tr>
<td>Hourly rate</td>
<td><label for="Hourly_rate">Hourly_rate:</label></td>
<td><input type = "number" name = "Hourly rate" min="10" max="30" /></td>
</tr>
<tr>
<td>Hours worked</td>
<td><label for="Hours_worked">Hours_worked:</label></td>
<td><input type = "number" name = "Hours_worked" min="15" max="45" /></td>
</tr>
<tr>
<td>Week</td>
<td><input type = "text" name = "Weeks worked" /></td>
</tr>
<tr>
<td>Gross pay</td>
<td><label for="Gross pay">Gross_Pay:</label></td>
<td><input type = "number" name = "Gross_pay"></td>
</tr>
<tr>
<td>Federal Tax</td>
<td><label for="Federal Tax">Federal_Tax:</label></td>
<td><input type = "number" name = "Federal_Tax"></td>
</tr>
<tr>
<td>FICA</td>
<td><label for="FICA">FICA:</label></td>
<td><input type = "number" name = "FICA"></td>
</tr>
<tr>
<td>State Tax</td>
<td><label for="State_Tax">State Tax:</label></td>
<td><input type = "number" name = "State_tax"></td>
</tr>
<tr>
<td>Net Pay</td>
<td><label for="Net_Pay">Net Pay:</label></td>
<td><input type = "number" name = "Net_Pay"></td>
</tr>
<tr>
<td colspan = "2" align = "center">
<input type = "button" name = "calculate" value = "Click Here To Calculate"onclick ="calc()"></td>
</tr>
<tr>
<td colspan = "2" align = "center">
<input type = "button" name = "Clear" value = "Click Here To Close"onclick ="myfunction1()"></td>
</tr>
<tr>
<td colspan = "2" align = "center">
<input type = "button" name = "Submit" value = "Click Here To Submit the form"onclick ="myfunction()"></td>
</tr>
<footer>
<p>Posted by: Company name</p>
<p>Contact information: <a href="mailto:xyz@example.com">xyz@example.com</a>.</p>
</footer>
</table>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.