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!