You\'ve been hired by University Parking Services (UPS) to create a web page tha
ID: 3805225 • Letter: Y
Question
You've been hired by University Parking Services (UPS) to create a web page that manages parking permits. UPS sells the following permits:
Category
Cost per semester
Student-undergraduate
$275
Student-graduate
$325
Faculty
$400
Staff
$425
Permit data is stored in a two-dimensional array. Space is added to the array as each permit is added. Information stored for each permit includes:
Permit ID
Name (the permit holder)
Category (Student-undergraduate, Student-graduate, Faculty, Staff)
Selected semesters (summer, fall, winter)
Selected lot (PS1 – PS8)
Fee
You've been hired again by University Parking Services (UPS) to to enhance the web page that manages parking permits. Make the following enhancements to the web site using html and javascript:
summary web page
Add a Summary page that dynamically builds a table from data in the permits array. You may use localStorage to transfer array data from the main web page. Show summary information above the table including:
Total permit count
Permit counts by category
Permit counts by semester
Permit counts by parking structure
Total fees
permit is stored in an nx array. This is what i have for the first webpage:
// Declare variables
var permitID = 999;
var permitCount = 0;
var permitPtr = 0;
// Declare sales array
var permits = new Array(permitCount);
//==================================================
// newPermit
//==================================================
function newPermit()
{
// Update counters
permitID = permitID + 1;
permitCount = permitCount + 1;
// Expand permits array
permits.length = permitCount;
permits[permitCount - 1] = new Array(6);
// Update pointer and show sale
permitPtr = permitCount - 1;
permits[permitPtr][0] = permitID;
showPermit();
}
//==================================================
// showPermit
//==================================================
function showPermit()
{
// Declare variables
var i;
// Clear fields
resetPermit();
// Show ID and name
document.getElementById('tID').value = permits[permitPtr][0];
if (permits[permitPtr][1] != undefined)
document.getElementById('tName').value = permits[permitPtr][1];
// Show category
if (permits[permitPtr][2] != undefined)
{
i = permits[permitPtr][2];
if (i == 1)
document.getElementById('rbStudentUndergraduate').checked = true;
else if (i == 2)
document.getElementById('rbStudentGraduate').checked = true;
else if (i == 3)
document.getElementById('rbFaculty').checked = true;
else if (i == 4)
document.getElementById('rbStaff').checked = true;
}
// Show selected semesters
if (permits[permitPtr][3] != undefined)
{
i = permits[permitPtr][3];
if (i == 1)
{
document.getElementById('cbSummer').checked = false;
document.getElementById('cbFall').checked = false;
document.getElementById('cbWinter').checked = true;
}
if (i == 2)
{
document.getElementById('cbSummer').checked = false;
document.getElementById('cbFall').checked = true;
document.getElementById('cbWinter').checked = false;
}
if (i == 3)
{
document.getElementById('cbSummer').checked = false;
document.getElementById('cbFall').checked = true;
document.getElementById('cbWinter').checked = true;
}
if (i == 4)
{
document.getElementById('cbSummer').checked = true;
document.getElementById('cbFall').checked = false;
document.getElementById('cbWinter').checked = false;
}
if (i == 5)
{
document.getElementById('cbSummer').checked = true;
document.getElementById('cbFall').checked = false;
document.getElementById('cbWinter').checked = true;
}
if (i == 6)
{
document.getElementById('cbSummer').checked = true;
document.getElementById('cbFall').checked = true;
document.getElementById('cbWinter').checked = false;
}
if (i == 7)
{
document.getElementById('cbSummer').checked = true;
document.getElementById('cbFall').checked = true;
document.getElementById('cbWinter').checked = true;
}
}
// Show selected lot and fee
if (permits[permitPtr][4] != undefined)
document.getElementById('cmbLot').value = permits[permitPtr][4];
if (permits[permitPtr][5] != undefined)
document.getElementById('tFee').value = permits[permitPtr][5];
}
//==================================================
// savePermit
//==================================================
function savePermit()
{
// Declare variables
var i;
// Save name
permits[permitPtr][1] = document.getElementById('tName').value;
// Save category
if (document.getElementById('rbStudentUndergraduate').checked)
i = 1;
else if (document.getElementById('rbStudentGraduate').checked)
i = 2;
else if (document.getElementById('rbFaculty').checked)
i = 3;
else if (document.getElementById('rbStaff').checked)
i = 4;
else
i = 0;
permits[permitPtr][2] = i;
// Save selected semesters
if (!document.getElementById('cbSummer').checked &&
!document.getElementById('cbFall').checked &&
!document.getElementById('cbWinter').checked)
i = 0;
else if (!document.getElementById('cbSummer').checked &&
!document.getElementById('cbFall').checked &&
document.getElementById('cbWinter').checked)
i = 1;
else if (!document.getElementById('cbSummer').checked &&
document.getElementById('cbFall').checked &&
!document.getElementById('cbWinter').checked)
i = 2;
else if (!document.getElementById('cbSummer').checked &&
document.getElementById('cbFall').checked &&
document.getElementById('cbWinter').checked)
i = 3;
else if (document.getElementById('cbSummer').checked &&
!document.getElementById('cbFall').checked &&
!document.getElementById('cbWinter').checked)
i = 4;
else if (document.getElementById('cbSummer').checked &&
!document.getElementById('cbFall').checked &&
document.getElementById('cbWinter').checked)
i = 5;
else if (document.getElementById('cbSummer').checked &&
document.getElementById('cbFall').checked &&
!document.getElementById('cbWinter').checked)
i = 6;
else
i = 7;
permits[permitPtr][3] = i;
// Save selected lot and fee
permits[permitPtr][4] = document.getElementById('cmbLot').value;
permits[permitPtr][5] = document.getElementById('tFee').value;
}
//==================================================
// prevPermit
//==================================================
function prevPermit()
{
if (permitCount == 0)
window.alert("There are currently no permits.");
else
{
savePermit();
permitPtr = permitPtr - 1;
if (permitPtr < 0)
permitPtr = permitCount - 1;
showPermit()
}
}
//==================================================
// nextPermit
//==================================================
function nextPermit()
{
if (permitCount == 0)
window.alert("There are currently no permits.");
else
{
savePermit();
permitPtr = permitPtr + 1;
if (permitPtr == permitCount)
permitPtr = 0;
showPermit()
}
}
//==================================================
// resetPermit
//==================================================
function resetPermit()
{
document.getElementById('tName').value = "";
document.getElementById('rbStudentUndergraduate').checked = false;
document.getElementById('rbStudentGraduate').checked = false;
document.getElementById('rbFaculty').checked = false;
document.getElementById('rbStaff').checked = false;
document.getElementById('cbSummer').checked = false;
document.getElementById('cbFall').checked = false;
document.getElementById('cbWinter').checked = false;
document.getElementById('cmbLot').value = "";
document.getElementById('tFee').value = "";
}
//deletePermit
function deletePermit()
{
var i;
var j;
if (permitCount == 0)
window.alert("There are no permits to delete.");
else
{
for (i = permitPtr; i < permitCount - 1; i++)
{
for (j = 0; j < 6; j++)
{
permits[i][j] = permits[i + 1][j] ;
}
}
// Update pointer
if (permitPtr > 0) permitPtr = permitPtr - 1;
permitCount = permitCount - 1;
permits.length = permitCount;
showPermit()
}
}
// Calculate Fee
function calculateFee()
{
var base;
var count;
var fee;
if (document.getElementById('rbStudentUndergraduate').checked)
base = 275;
else if (document.getElementById('rbStudentGraduate').checked)
base = 325;
else if (document.getElementById('rbFaculty').checked)
base = 400;
else if (document.getElementById('rbStaff').checked)
base = 425;
else
base = 0;
// Determine fee
if (!document.getElementById('cbSummer').checked &&
!document.getElementById('cbFall').checked &&
!document.getElementById('cbWinter').checked)
count = 0;
else if (!document.getElementById('cbSummer').checked &&
!document.getElementById('cbFall').checked &&
document.getElementById('cbWinter').checked)
count = 1;
else if (!document.getElementById('cbSummer').checked &&
document.getElementById('cbFall').checked &&
!document.getElementById('cbWinter').checked)
count = 1;
else if (!document.getElementById('cbSummer').checked &&
document.getElementById('cbFall').checked &&
document.getElementById('cbWinter').checked)
count = 2;
else if (document.getElementById('cbSummer').checked &&
!document.getElementById('cbFall').checked &&
!document.getElementById('cbWinter').checked)
count = 1;
else if (document.getElementById('cbSummer').checked &&
!document.getElementById('cbFall').checked &&
document.getElementById('cbWinter').checked)
count = 2;
else if (document.getElementById('cbSummer').checked &&
document.getElementById('cbFall').checked &&
!document.getElementById('cbWinter').checked)
count = 2;
else
count = 3;
// Show and save fee
fee = base * count;
document.getElementById('tFee').value = fee.toFixed(2);
permits[permitPtr][5] = document.getElementById('tFee').value;
}
Program is editable!
Category
Cost per semester
Student-undergraduate
$275
Student-graduate
$325
Faculty
$400
Staff
$425
Explanation / Answer
This is html code:
<!DOCTYPE html>
<html>
<head>
<title>International Products Calculator</title>
<style>
body {background-image:url(boat3.jpg);
width: 100%; height: 650px;
background-size: 100% 100%;
background-repeat: no-repeat;}
</style>
</head>
<body>
<center>
<h1>International Products Calculator</h1>
<script type="text/javascript">
function CalcPrice(){
var quantity = document.getElementById('tQuantity').value;
var cost = document.getElementById('tUnitCost').value;
var price = parseInt(quantity) * parseInt(cost);
/* document.write(quantity);
document.write(cost);
document.write(total); */
if(!isNaN(price)){
document.getElementById('tPrice').value = price;
}
}
function CalcTax(){
var price=document.getElementById('tPrice').value;
var tax = parseInt(price) * 0.06;
if(!isNaN(tax)){
document.getElementById('tTax').value = tax;
}
}
function CalcTotal(){
var price=document.getElementById('tPrice').value;
var tax=document.getElementById('tTax').value;
var total = parseFloat(price)+parseFloat(tax);
if(!isNaN(total)){
document.getElementById('tTotal').value = total;
}
}
</script>
<style>
#product{
height:30px;
font-size:20pt;
}
#tQuantity{
height:30px;
font-size:20pt;
}
#tUnitCost{
height:30px;
font-size:20pt;
}
#tPrice{
height:30px;
font-size:20pt;
}
#tTax{
height:30px;
font-size:20pt;
}
#tTotal{
height:30px;
font-size:20pt;
}
#Price{
height:30px;
font-size:20pt;
}
#Tax{
height:30px;
font-size:20pt;
}
#Total{
height:30px;
font-size:20pt;
}
</style>
<hr>
<font size="9">Product </font> <input type="text" id="product" maxlength="10" />
<hr>
<font size="9">Product Total Quantity</font> <input type="text" id="tQuantity"/>
<hr>
<font size="9">Product Unit Cost </font> <input type="text" id="tUnitCost"/>
<hr>
<font size="9">Product Total Price </font> <input type="text" id="tPrice" read-only="true" />
<hr>
<font size="9">Total Tax </font> <input type="text" id="tTax" read-only="true" />
<hr>
<font size="9">Total </font> <input type="text" id="tTotal" read-only="true" />
<hr>
<input type="submit" value="Price" id="Price">
<input type="submit" value="Tax" id="Tax">
<input type="submit" value="Total" id="Total">
</center>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.