Create a GUI application that displays the total expenses of a college student p
ID: 3708940 • Letter: C
Question
Create a GUI application that displays the total expenses of a college student per year. Here is the information that the user must provide Number of months the student will be living away from home per year (Can be at most 12) .Cost of rent per month Cost of utilities per month Cost of food per month Cost of car rental or taxi fees per month Cost of gas per month, if personal vehicle is used Entertainment expenses per month Internet package as drop down menu with the options: o None: SO per month o Basic: $20 per month o Premium $50 per month Education expenses (tuition, books, etc.) for the year The student's parents reimburse the student according to the following rules: .Up to $400 for rent per month Up to $100 for utilities per month Up to $150 for food per month .Up to $40 for car rental or taxi fees per month Up to $60 for gas per month, if personal vehicle is used Up to $50 for entertainment per month Up to $20 for Internet per month All education expensesExplanation / Answer
Code to copy:
<html>parseFloat("10")
<head>
<script>
function calculateExpnse(){
var termsChecked = document.getElementById('terms').checked;
if(termsChecked){
var numOfMonth = parseFloat(document.getElementById('numOfMonth').value);
var costOfRentPerMonth = parseFloat(document.getElementById('costOfRent').value);
var costOfUtilityPerMonth = parseFloat(document.getElementById('costOfUtility').value);
var costOfFoodPerMonth = parseFloat(document.getElementById('costOfFood').value);
var costOfTaxiPerMonth = parseFloat(document.getElementById('costOfTaxi').value);
var costOfGasPerMonth = parseFloat(document.getElementById('costOfGas').value);
var costOfEntertainmentPerMonth = parseFloat(document.getElementById('costOfEntertainment').value);
var internetPackPerMonth = parseInt(document.getElementById('internet').value);
var costOfEducationPerYear = parseFloat(document.getElementById('costOfEducation').value);
var totalAllowableExpenses = (820*numOfMonth) + costOfEducationPerYear;
var totalExpenses = ((costOfRentPerMonth+costOfUtilityPerMonth+costOfFoodPerMonth+costOfTaxiPerMonth+costOfGasPerMonth+costOfEntertainmentPerMonth+internetPackPerMonth)* numOfMonth) + costOfEducationPerYear;
var moneySaved = totalAllowableExpenses - totalExpenses;
var excessAmount = 0;
if(moneySaved < 0){
moneySaved = 0;
excessAmount = totalExpenses - totalAllowableExpenses;
}
alert("Total expenses: $"+totalExpenses+" Total allowable expenses: $"+totalAllowableExpenses+" Excess balance student must pay: $"+excessAmount+" Money parent saved: $"+moneySaved);
}else{
alert("Please verify that the information is correct");
return;
}
}
function enableCostOfGas(){
document.getElementById('costOfGas').disabled= false;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Expense Calculator</title>
</head>
<body>
<form>
<table>
<tr>
<td>Number of months student is away:</td>
<td><input type="text" id="numOfMonth" name="numOfMonth" value="0"></td>
<tr>
<tr>
<td>Cost of rent per month:</td>
<td><input type="text" id="costOfRent" name="costOfRent" value="0"></td>
<tr>
<tr>
<td>Cost of utilities per month:</td>
<td><input type="text" id="costOfUtility" name="costOfUtility" value="0"></td>
<tr>
<tr>
<td>Cost of food per month:</td>
<td><input type="text" id="costOfFood" name="costOfFood" value="0"></td>
<tr>
<tr>
<td>Cost of car rental or taxi fees per month:</td>
<td><input type="text" id="costOfTaxi" name="costOfTaxi" value="0"></td>
<tr>
<tr>
<td><input type="radio" name="vehicleUsed" id="vehicleUsed">Personal vehicle used</td>
<td></td>
<tr>
<tr>
<td>Cost of gas per month:</td>
<td><input type="text" id="costOfGas" name="costOfGas" disabled="disabled" value="0"></td>
<tr>
<tr>
<td>Cost of entertainment per month:</td>
<td><input type="text" id="costOfEntertainment" name="costOfEntertainment" value="0"></td>
<tr>
<tr>
<td>Select Internet package:</td>
<td>
<select id="internet">
<option value="0">None</option>
<option value="20">Basic</option>
<option value="50">Premium</option>
</select>
</td>
<tr>
<tr>
<td>Cost of education for the year:</td>
<td><input type="text" id="costOfEducation" name="costOfEducation" value="0"></td>
<tr>
<tr>
<td><input type="checkbox" name="terms" id="terms">I verify the information above is correct </td>
<td></td>
<tr>
<tr>
<td>
<input type="reset" id="reset">
<input type="button" id="calculate" value="Calculate Total">
<input type="button" id="exit" value="Exit">
</td>
<td></td>
<tr>
</table>
</form>
</body>
</html>