-When you select the \"Calculate tuition & fees button it currently says (LAST N

ID: 3915255 • Letter: #

Question

-When you select the "Calculate tuition & fees button it currently says (LAST NAME) would owe (TUITION COST)
---Change it so it says (FIRSTNAME + LAST NAME) would owe (TUITION COST)
---Center the text and make it look nicer

-Validate that if part time is selected only 1-12 credits are selected
-Validate that if full time is selected only 12-20 credits are selected

============================= HOME.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<!-Sets the title for the page->
<title>Tuition Fee Calculator</title>
<!-MetaData for the html->
<meta charset="utf-8">
<!-Address to the external script->
<script src="variables.js"></script>
<!-Internal stylesheet->
<style>
table {
margin: 0 auto;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<!-Body of the html->
<body>
<!-Image tag for the logo->
<img src="logo.png" alt="CalU logo">
<!-Form to submit the request->
<form method="GET" action="formprocess.html" name="userform">
<!-table tag for the form->
<table>
<tr>
<td>
<!-Heading for the table->
<h3>Tuition fee Calculator</h3>
</td>
<td></td>
</tr>
<tr>
<td>
<!-Form for data input->
FristName   
<input id="fname" name="fname" required="required" />
</td>
<td>
LastName   
<input id="lname" name="lname" required="required"/>
</td>
</tr>
<tr>
<td>Email Address</td>
<td>
<input type="email" id="emailid" name="emailid" required="required"/>
</td>
</tr>
<tr>
<td>Tuition Type</td>
<td>
<input type="radio" id="instate1" name="tuition_type" value="In-State" required="required"/> In-State
<input type="radio" id="outofstate1" name="tuition_type" value="Out-of-State" required="required"/> Out-of-State
<input type="radio" id="international1" name="tuition_type" value="International tuition " required="required"/> International tuition
</td>
</tr>
<tr>
<td>Financial Aid</td>
<td>
<input type="checkbox" name="finance" value="">
</td>
</tr>

<tr>
<td>Full-time/Part-time</td>
<td>
<input type="radio" id="fulltime1" name="time" value="Full-time" /> Full-time
<input type="radio" id="parttime1" name="time" value="Part-time" /> Part-time
</td>
</tr>
<tr>
<td>Number of credits</td>
<td>
<input type="number" name="credits" id="credits" required="required" />
<span class="err" id="creditsErr">
</span>
</td>
</tr>
<tr>
<td>Major</td>
<td>
<!-menu list and displayAlert() method from variables.js is called for any changes occured->
<select name="major" id="major" required="required">
<option selected disabled value="">Select the Major</option>
<option id="CIS" value="CIS">Computer & Information Systems</option>
<option id="Business" value="Business"> Business Management </option>
<option id="Economics" value="Economics"> Economics</option>
<option id="Finance" value="Finance"> Finance</option>
<option id="General" value="General"> General Education</option>
<option id="maj6" value="maj6"> Data Science</option>
<option id="maj7" value="maj7"> Artificial Intelligence</option>
<option id="maj8" value="maj8"> Mechanical Engineering</option>
<option id="maj9" value="maj9"> Embedded System</option>
<option id="maj10" value="maj10"> Electrical Engineering</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" value="calculate Tuition and fees"></td>
<td>
<input type="submit" value="Submit" />
<input type="button" value="Reset">

<button type="button">Cancel</button>
</td>
</tr>

<tr>
<td></td>
<td>
</td>
</tr>
</table>
</form>
<span id="result"></span>
<br>
<br>
<br>

<div id="map"></div>
<script>
//Script to dsplay google map
function myMap() {
//create a variable to represent map div
var mapCanvas = document.getElementById("map");
//Define the properties of map
var mapOptions = {
center: new google.maps.LatLng(40.064416, -79.884218),
zoom: 17
};
//Set the map
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBb7-XZU_SPwHme6yNhYRMpiDmRE73GVjw&callback=myMap"></script>
</body>
</html>

=========================== VARIABLES.JS

=========================== FORMPROCESS.HTML

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Processor</title>

<meta charset="utf-8">
<link rel="stylesheet" href="js_styles.css" type="text/css" />
</head>
<body>
<script>
document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");
alert("Someone From our University will contact you via Email.")
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i = 0; i < formArray.length; ++i) {
document.writeln(formArray[i] + "<br />");
}
</script>
</body>
</html>

Explanation / Answer

If you have any doubts, please give me comment...

home.html

<!DOCTYPE html>

<head>

<!-Sets the title for the page->

<title>Tuition Fee Calculator</title>

<!-MetaData for the html->

<!-Address to the external script->

<!-Internal stylesheet->

<style>

table {

margin: 0 auto;

}

img {

display: block;

margin-left: auto;

margin-right: auto;

}

</style>

</head>

<!-Body of the html->

<body>

<!-Image tag for the logo->

<!-Form to submit the request->

<!-table tag for the form->

<table>

<tr>

<td>

<!-Heading for the table->

<h3>Tuition fee Calculator</h3>

</td>

</tr>

<tr>

<td>

<!-Form for data input->

FristName   

</td>

<td>

LastName   

</td>

</tr>

<tr>

<td>Email Address</td>

<td>

</td>

</tr>

<tr>

<td>Tuition Type</td>

<td>

<input type="radio" id="instate1" name="tuition_type" value="In-State" required="required" /> In-State

<input type="radio" id="outofstate1" name="tuition_type" value="Out-of-State" required="required" /> Out-of-State

<input type="radio" id="international1" name="tuition_type" value="International tuition " required="required" /> International tuition

</td>

</tr>

<tr>

<td>Financial Aid</td>

<td>

</td>

</tr>

<tr>

<td>

<input type="radio" id="fulltime1" name="time" value="Full-time" /> Full-time

<input type="radio" id="parttime1" name="time" value="Part-time" /> Part-time

</td>

</tr>

<tr>

<td>Number of credits</td>

<td>

</span>

</td>

</tr>

<tr>

<td>Major</td>

<td>

<!-menu list and displayAlert() method from variables.js is called for any changes occured->

<option selected disabled value="">Select the Major</option>

<option id="CIS" value="CIS">Computer & Information Systems</option>

<option id="Business" value="Business"> Business Management </option>

<option id="Economics" value="Economics"> Economics</option>

<option id="Finance" value="Finance"> Finance</option>

<option id="General" value="General"> General Education</option>

<option id="maj6" value="maj6"> Data Science</option>

<option id="maj7" value="maj7"> Artificial Intelligence</option>

<option id="maj8" value="maj8"> Mechanical Engineering</option>

<option id="maj9" value="maj9"> Embedded System</option>

<option id="maj10" value="maj10"> Electrical Engineering</option>

</select>

</td>

</tr>

<tr>

<td>

<button type="button">Cancel</button>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

<br />

<br>

//Script to dsplay google map

function myMap() {

//create a variable to represent map div

var mapCanvas = document.getElementById("map");

//Define the properties of map

var mapOptions = {

center: new google.maps.LatLng(40.064416, -79.884218),

zoom: 17

};

//Set the map

var map = new google.maps.Map(mapCanvas, mapOptions);

}

</script>

</body>

</html>

variables.js

function validateForm() {

var form = document.forms["userform"]; //acccess form with the name

var fname = form["fname"].value; //acccess firstname value using by name=fname parameter

var lname = form["lname"].value; //acccess lastname value using by name=lname parameter

var email = form["emailid"].value; //acccess email value using by name=emailid parameter

var tuition_type = getTutitonType(); //acccess tuition_type value using by name=tuition_type parameter

var credits = form["credits"].value; //acccess credits value using by name=credits parameter

var major = getMajor(); //acccess major value using by name=major parameter

var emailpatt = /^[_a-zA-ZáéíñóúüÁÉÍÑÓÚÜ0-9-]+(.[_a-zA-ZáéíñóúüÁÉÍÑÓÚÜ0-9-]+)*@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*(.[a-zA-Z]{2,4})$/; //regular expression for global email address

var validationReport = ""; // all error are append to this string intially we don't have no errors so it is empty

if (fname == null || fname == undefined || fname == "") {

validationReport += "[*]FirstName is Required*" + " "; //if firstname is not entered

} else {

//here i made changes to check for digit in the first name

if (/d/.test(fname)) {

validationReport += "[*]FirstName has number*" + " ";

}

if (lname == null || lname == undefined || lname.length <= 0) {

validationReport += "[*]LastName is Required*" + " "; //if lastname is not entered

} else {

//here i made changes to check for digit in the last name

if (/d/.test(fname)) {

validationReport += "[*]LastName has number*" + " ";

}

if (email == null || email == undefined || email.length <= 0) {

validationReport += "[*]Email is Required*" + " "; //if email is not entered

} else if (!emailpatt.test(email)) {

validationReport += "[*]Invalid Email" + " "; //if invalid email is not entered

} else {

}

if (tuition_type == null || tuition_type == undefined || tuition_type.length <= 0) {

validationReport += "[*]Tuition Type is required*" + " "; //if Tuition Type is not entered

} else {

}

if (credits == null || credits == undefined || credits == "") {

validationReport += "[*]credits Field is Required*" + " "; //if credits are not entered

} else if (isNaN(credits)) {

validationReport += "[*]Credits should be numerical" + " "; //if Non numerical credits are not entered

} else {

}

if (major == null || major == undefined || major == "") {

validationReport += "[*]Major is required*" + " "; //if Major is not selected

} else {

var major1 = getMajor();

if (major1 == "") {

validationReport += "[*]Invalid Major is selected" + " "; //if Major is not selected form the listed above

} else {

}

if (validationReport == "") {

//if validation errors

var a = confirm("Are you sure to Submit?");

if (a == true) {

//user confrim to submit

return true;

} else {

//user press cancel to submit

return false;

}

} else {

//If validation Errors are there we presenting them with a alert

alert("Validations is Failed: " + validationReport);

return false;

}

//here is the form reset function

//to display the confirmation dialog box and

//reset accordingly

function resetForm() {

if (confirm("Do you want to reset the form?") == true) {

var f = document.forms["userform"];

f.reset();

}

function getTutitonType() {

if (document.getElementById("instate1").checked) {

return "In-State";

} else if (document.getElementById("outofstate1").checked) {

return "Out-of-State";

} else if (document.getElementById("international1").checked) {

return "International Tuition "

}

return "";

}

// Full time or part time

function getFullTimeOrPartTime() {

var fulltime1 = document.getElementById("fulltime1").checked;

var parttime1 = document.getElementById("parttime1").checked;

if (fulltime1) {

return "Full Time";

} else if (parttime1) {

return "Part Time";

}

return "";

}

// Majors

function getMajor() {

major = String(document.getElementById("major").value);

if (major == "CIS") {

return "Computer & Information Systems";

} else if (major == "Business") {

return "Business";

} else if (major == "Economics") {

return "Economics";

} else if (major == "Finance") {

return "Finance";

} else if (major == "General") {

return "General Education";

} else if (major == "maj6") {

return "Data Science";

} else if (major == "maj7") {

return "Artificial Intelligence";

} else if (major == "maj8") {

return "Mechanical Engineering";

} else if (major == "maj9") {

return "Embedded System";

} else if (major == "maj10") {

return "Electrical Engineering";

}

return "";

}

//Displays Alert when an option is selected

function displayAlert() {

major = String(document.getElementById("major").value);

if (major == "CIS") {

alert('Computer & Information Systems majors are great for people who enjoy computers, coding, networking, and databases.');

} else if (major == "Business") {

alert('Business Management degrees can get you a wide range of jobs and require you to have a lot of knowledge in finance, economics, or accounting.');

} else if (major == "Economics") {

alert('An economics degree can et you positoins in a wide range of positions related to finance and technology.');

} else if (major == "Finance") {

alert('The finance degree involves helping businesses and consumers organize money.');

} else if (major == "General") {

alert('This choice will let you take a few classes to better gauge what you would like your degree to be in.');

} else if (major == "maj6") {

alert('A Data Science degree helps you to gain expertisse in big data.');

} else if (major == "maj7") {

alert('An Artificial Intelligence Degree helps to understand machine intelligence');

} else if (major == "maj8") {

alert('Mechanical Engineering helps you understand basic mechanism and principles behind various machines');

} else if (major == "maj9") {

alert('Embedded System degree will help one to design embedded smart systems.');

} else if (major == "maj10") {

alert('An Electrical Engineering degree will help you to deal with various electrical components and circuits.');

} else {

alert('Please Select a valid Major');

}

// This gets the information for displaying a summary of everything on the form as an alert

function buildStudentProfile() {

var lname = document.getElementById('lname').value;

var fname = document.getElementById('fname').value;

var emailid = document.getElementById('emailid').value;

var credits = document.getElementById("credits").value;

var str = "Student Name: " + fname + " " + lname + ' ';

str += "Email ID: " + emailid + ' ';

str += "Tuition Type: " + getTutitonType() + ' ';

str += "Fulltime or part time: " + getFullTimeOrPartTime() + ' ';

str += "Number of credits: " + credits + ' ';

str += "Major: " + getMajor() + ' ';

return str;

}

//This function hides the amount on pressing reset button

function hideResult() {

document.getElementById("result").style.visibility = "hidden";

}

function result() {

var fulltime1 = document.getElementById("fulltime1").checked;

var parttime1 = document.getElementById("parttime1").checked;

var confirmation = confirm("Are you sure want to print results?");

var credits = document.getElementById("credits").value;

var instft = [3746, 232, 33.20]

var instpt = [312, 20, 33.20]

var instate1 = document.getElementById("instate1").checked;

var oosft = [5619, 353, 49.80]

var oospt = [468, 30, 49.80]

var outofstate1 = document.getElementById("outofstate1").checked;

var ift = [7305, 353, 63.90];

var ipt = [609, 30, 63.90];

var international1 = document.getElementById("international1").checked;

var name = document.getElementById('lname').value;

// This line will print the results if the confirmation is true

if (confirmation === true) {

var results;

var secondConfirmation;

// In state full time

if (instate1 == true && fulltime1 == true && credits >= 12 && credits <= 18) {

results = (instft[2] * credits) + (instft[0] + instft[1]);

secondConfirmation = confirm(buildStudentProfile() + ((instft[2] * credits) + (instft[0] + instft[1])));

}

// In state part time

else if (instate1 == true && parttime1 == true && credits < 12) {

results = (credits * instpt[0]) + (credits * instpt[1]) + (credits * instpt[2]);

secondConfirmation = confirm(buildStudentProfile() + ((credits * instpt[0]) + (credits * instpt[1]) + (credits * instpt[2])));

}

// Out of state full time

else if (outofstate1 == true && fulltime1 == true && credits >= 12 && credits <= 18) {

results = (oosft[2] * credits) + (oosft[0] + oosft[1]);

secondConfirmation = confirm(buildStudentProfile() + ((oosft[2] * credits) + (oosft[0] + oosft[1])));

}

// Out of state part time

else if (outofstate1 == true && parttime1 == true && credits < 12) {

results = (credits * oospt[0]) + (credits * oospt[1]) + (credits * oospt[2]);

secondConfirmation = confirm(buildStudentProfile() + ((credits * oospt[0]) + (credits * oospt[1]) + (credits * oospt[2])));

}

// International full time

else if (international1 == true && fulltime1 == true && credits >= 12 && credits <= 20) {

results = (ift[2] * credits) + (ift[0] + ift[1]);

secondConfirmation = confirm(buildStudentProfile() + ((ift[2] * credits) + (ift[0] + ift[1])));

}

// International part time

else if (international1 == true && parttime1 == true && credits >= 1 && credits < 12) {

results = (credits * ipt[0]) + (credits * ipt[1]) + (credits * ipt[2]);

majorirmation = confirm(buildStudentProfile() + (credits * ipt[0]) + (credits * ipt[1]) + (credits * ipt[2]));

} else if (secondConfirmation === false) {

alert('Correct any errors on the form.');

secondConfirmation = true;

} else {

alert('Correct any errors on the form.');

}

var lname = document.getElementById("lname").value;

var fname = document.getElementById("fname").value;

document.getElementById("result").innerHTML = (fname + " " + lname) + " would owe <b>$" + results + "</b>";

} else {

alert('Correct any errors on the form.');

}

Navigate

-When the temperature of a solution is increased, which answer describes the sol

-Where is melanocyte stimulating hormone produced ? adrenal gland, anterior pitu

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

-When you select the \"Calculate tuition & fees button it currently says (LAST N

Question

Explanation / Answer

Related Questions

Navigate