A parking garage charges a $2.00 minimum fee to park for up to three hours. The garage charges an additional $0.50 per hour for each hour or part thereof in excess of three hours. The maximum charge for any given 24-hour period is $10.00. Assume that no car parks for longer than 24 hours at a time. Write a script that calculates and displays the parking charges for each customer who parked a car in this garage yesterday. You should input from the user the hours parked for each customer. The program should display the charge for the current customer and should calculate and display the running total of yesterday's receipts. The program should use the function calculateCharges to determine the charge for each customer. Use a text input field to obtain the input from the user.

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Park It </title>
<script type="text/javascript">
<!--
var total_value=0;
var pfee=0;
function calculateCharges()
{
var customer_hours = document.getElementById("hours").value;
var cust_hours=parseInt(customer_hours);
var extra_hours;
if(cust_hours <=3)
{
pfee=2;
}
else if(cust_hours > 3)
{
extra_hours = cust_hours - 3;
pfee= 2 + parseInt(extra_hours)*0.5;
if(parseInt(extra_hours) >= 16)
{
pfee=10;
}
}
document.getElementById("charge").value=pfee;
total();
}
function total()
{
total_value=total_value + pfee;
document.getElementById("total").value=total_value;
return
}
// -->
</script>
</head>
<body>
<h1>Park It</h1>
<hr />

<p>Press F5 or Refresh to load script again.</p>
<form name = "garage" action = "">
<table border = "1">
<caption>Parking Garage Charges</caption>
<tr><td>Customer Parking Hours</td>
<td><input name = "hours" type = "text" />
</td></tr>
<tr><td>Customer Charge Amount</td>
<td><input name = "charge" type = "text" disabled="disabled" />
</td></tr>
<tr><td>Running Total Receipt</td>
<td><input name = "total" type = "text" disabled="disabled" />
</td></tr>
<tr><td><input type = "button" value = "Calculate"
onclick = "calculateCharges()" /></td></tr>
</table>
</form>
</body>
</html>