Homework SoursePLEASE HELP JAVASCRIPTHTML coding For the following two web
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.
Solution
<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>
