Hello, this is my code. moest of the things works but when select the price, i...

Question

Question

Hello, this is my code. moest of the things works but when select the price, i...

Hello, this is my code. moest of the things works but when select the price, i just dont get my total. can someone help me out . thank you My queshion is also here

The page will simulate the site for a Chicago-based small bus line that travels to St Louis, Milwaukee, and Detroit.

Here are the requirements:

The home page (i.e. the main page) should simply be the heading, image, and slogan of the site. The home page should NOT be the one that has the reservations form. It is simply the ‘main’ page for your business’ website. Add a little blurb / slogan about your bus line.

The header section should be styled (you decide which styles to apply).

Name this page: busline_home.htm

· Have a navigation section that includes links to all of the other pages on your site: Makea Reservation, Contact Us, Join Our Mailing List, Home. This section should have either a background color or a border (or both if you prefer). Feel free to add other styles if you like. This table of contents must appear on all pages. Place this table of contents inside a div tag called ‘nav’. Style this ‘nav’ section as a contextual selector inside your external sheet.

· The reservations page, is described below.

· Have a page called ‘Contact Us’ that includes a (fake) address, phone number, e-mail address, etc of your company.

· Have a page called ‘Join Mailing List’ that has a form requesting the user’s name and e-mail address. When the user submits the form, they should see a confirmation message thanking them for joining the mailing list and confirming that they have joined the list. (Obviously you do not have to write the code that actually joins them in a real mailing list!)

· ALL of the pages should have a similar look. For example, if you change the background color, it should be the same on all pages. Use an External Stylesheet to accomplish this task. (You may still use embedded styles to alter something on a given page–remember the rules for priority of styles—but any styles meant to apply to all pages need to be written in an external sheet).

· In addition to the External Style Sheet, you must use External Javascript Files for all pages using Javascript.

· ALL pages should have the company name somewhere on the page. Place this name in within your ‘header’ section. Style this section as a contextual selector in your external style sheet.

· Have a ‘footer’ section in which you have the phone number and address of your company at the bottom of each page on your site. Style inside your external stylesheet. Use a different font, make the text size a little bit smaller than the rest of your page, and italicize.

The Reservations Page:

The form:

The last name as a textbox

The first name as a textbox

Arrival City: Use a radio button. Choices should be: St Louis ($40), Milwaukee ($20), Detroit ($35)

Hotel choice: Radio button – Economy ($50/day), Standard ($70/day), Upscale ($120/day)

Number of travelers: select box with 1 through 6

Number of days as a select box with options from 2 through 7

Have checkboxes for the following options: Wifi ($10), Fully-reclining seat ($20)

Radio button for meal choice: None, Snack ($5), Full meal ($10)

Have a text area for “Special Requests”.

A button to submit the form. The button should say ‘Book My Trip’

Name your form: reservation

When the user submits their form, you should provide a cost estimate for their trip. Use the following business rules to make the estimate:

Note: Be careful about your calculations! For example, the cost of the meals, wifi, etc should be multiplied by the number of travellers. However, the hotel cost should not be. (You can assume that everybody stays in the same room!)

Sample fare: 2 people traveling to Minneapolis ($20x2), request wifi ($10x2), and reclining seats ($20x2), with full meals ($10x2). They wish to stay at an economy hotel for 5 days ($50 * 5) will have a total cost of $370.

Output your cost estimate using innerHTML.

<!DOCTYPE html>

<head>

<title> V-Bus service </title>

function vbus()

{

var inputFNAME, inputLNAME, city, hotel, travelers,meal,wifi;

// get input entered by the user

inputFNAME=document.getElementById("txtFNAME").value;

inputLNAME=document.getElementById("txtLNAME").value;

inputSpecialInstructions = document.getElementById("txtSpecialInstructions").value;

city=document.getElementById("select_city").value;

hotel=document.getElementById("select_hotel").value;

travelers=document.getElementById("number_of_travelers").value;

meal=document.getElementById("select_meal").value;

wife=document.getElementById("select_wife").value;

// write out the data to placeholders below

document.getElementById("p1").innerHTML="We have your first name is "+ inputFNAME;

document.getElementById("p2").innerHTML="We have your Last name is " + inputLNAME;

if(city.localeCompare("city")==0){//if city variable contains personal

}else if(city.localeCompare("St.Louis")==0){

city_price=40;

}else if(city.localeCompare("Milwaukee")==0){

city_price=20;

}else if(city.localeCompare("Detroit")==0){

city_price=35;

if(hotel.localeCompare("hotel")==0){

} else if(hotel.localeCompare("Economy")==0){
hotel_price=50;

} else if(hotel.localeCompare("standard")==0){
hotel_price=70;

} else if(hotel.localeCompare("upscale")==0){
hotel_price=120;

document.getElementById("p3").innerHTML="You selected city "+ city+", amount $"+city_price//print selecrte

document.getElementById("p4").innerHTML="You selected hotel "+ hotel+ ", amount $"+hotel_price;

document.getElementById("p5").innerHTML="Number of travelers "+ travelers+ ", amount $"+desserts;

// b.9: display special instructions

document.getElementById("p6").innerHTML="Special Instructions are: "+ inputSpecialInstructions ;

var total=city_price + hotel_price + travelers;

document.getElementById("p7").innerHTML="Total cost $"+total;

document.getElementById("p8").innerHTML=getTimeStamp();

}

function getTimeStamp() {

var now = new Date();

return ((now.getMonth() + 1) + '/' +

(now.getDate()) + '/' +

now.getFullYear() + " " +

now.getHours() + ':' +

((now.getMinutes() < 10)

? ("0" + now.getMinutes())

: (now.getMinutes())) + ':' +

((now.getSeconds() < 10)

? ("0" + now.getSeconds())

: (now.getSeconds())));

}

</script>

<style>

p {

font-size:150%;

font-family: Verdana;

color: #00008B;

}

#form{

text-align:center;

border: 3px solid #B22222;

width: 300px;

}

#maincontent

{

color: #66FFFF;

}

#tagline{

text-align:center;

}

#footer{

border:3px solid;

border-color:#000000;

width:300px;

text-align:center;

background-color:#FF00FF;

font-family: Arial;

font-style: italic;

}

body{

background-color: #A9A9A9;

}

</style>

</head>

<body>

<h1> V-Bus service </h1>

</div>

<h2><p> <ins> Let's travel with V-Bus Service </ins></p></h2>

</div>

<table>

<tr><td><i> First Name </i></td> <td> <input type="text" id="txtFNAME"> </td><tr>

<tr><td><i> Select City </i></td> <td> <select id="select_city">

<option value="St Louis">St Louis = $40</option>

<option value="Milwauke">Milwaukee = $20</option>

<option value="Detroit">Detroit= $35</option>

</select>

</td><tr>

<tr><td><i> Select Hotel </i></td> <td> <select id="select_hoetl">

<option value="Economy">Economy = $50</option>

<option value="Standard">Standard = $70</option>

<option value="Upscale">Detroit= $120</option>

</select></td><tr>

<tr><td><i> Select number of Travelers </i></td> <td> <select id="number_of_travelers">

</select> </td><tr>

<tr><td><i> Special insrtuctions </i></td> <td> <textarea id="txtSpecialInstructions" rows="4" cols="20"></textarea></td></tr>

</table>

</div>

</body>

</html>

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Hi please find the answer

If you have any query please let me know first i will give solution

===============================================

<!DOCTYPE html>

<head>

<title>V-Bus service </title>

function vbus() {

var inputFNAME, inputLNAME, city, hotel, travelers, meal, wifi, city_price, hotel_price,meal_price,wifi_price;

// get input entered by the user

inputFNAME = document.getElementById("txtFNAME").value;

inputLNAME = document.getElementById("txtLNAME").value;

inputSpecialInstructions = document.getElementById("txtSpecialInstructions").value;

city = document.getElementById("select_city").value;

hotel = document.getElementById("select_hotel").value;

travelers = document.getElementById("number_of_travelers").value;

meal = document.getElementById("select_meal").value;

wifi = document.getElementById("select_wifi").value;

// write out the data to placeholders below

document.getElementById("p1").innerHTML = "We have your first name is " + inputFNAME;

document.getElementById("p2").innerHTML = "We have your Last name is " + inputLNAME;

if (city.localeCompare("city") == 0) {//if city variable contains personal

} else if (city.localeCompare("St.Louis") == 0) {

city_price = 40;

} else if (city.localeCompare("Milwaukee") == 0) {

city_price = 20;

} else if (city.localeCompare("Detroit") == 0) {

city_price = 35;

}

if (hotel.localeCompare("hotel") == 0) {

} else if (hotel.localeCompare("Economy") == 0) {
hotel_price = 50;

} else if (hotel.localeCompare("Standard") == 0) {
hotel_price = 70;

} else if (hotel.localeCompare("Upscale") == 0) {
hotel_price = 120;
}

if (hotel.localeCompare("hotel") == 0) {

} else if (hotel.localeCompare("Economy") == 0) {
hotel_price = 50;

} else if (hotel.localeCompare("Standard") == 0) {
hotel_price = 70;

} else if (hotel.localeCompare("Upscale") == 0) {
hotel_price = 120;
}

if (meal.localeCompare("meal") == 0) {

} else if (meal.localeCompare("Full Meals") == 0) {
meal_price = 10;

} else if (meal.localeCompare("No") == 0) {
meal_price = 0;

}

if (wifi.localeCompare("wifi") == 0) {

} else if (wifi.localeCompare("Request Wifi") == 0) {
wifi_price = 10;

} else if (wifi.localeCompare("No") == 0) {
wifi_price = 0;

}

document.getElementById("p3").innerHTML = "You selected city " + city + ", amount $" + city_price//print selecrte

document.getElementById("p4").innerHTML = "You selected hotel " + hotel + ", amount $" + hotel_price;

document.getElementById("p5").innerHTML = "Number of travelers " + travelers;

document.getElementById("pWifi").innerHTML = "You selected Wifi is " + wifi +", amount $" + wifi_price;

document.getElementById("pMeals").innerHTML = "You selected Meals is " + meal + ", amount $" + meal_price;

// b.9: display special instructions

document.getElementById("p6").innerHTML = "Special Instructions are: " + inputSpecialInstructions;

var total = (city_price + hotel_price + wifi_price + meal_price) * travelers;

document.getElementById("p7").innerHTML = "Total cost $" + total;

document.getElementById("p8").innerHTML = getTimeStamp();
}

function getTimeStamp() {

var now = new Date();

return ((now.getMonth() + 1) + '/' +

(now.getDate()) + '/' +

now.getFullYear() + " " +

now.getHours() + ':' +

((now.getMinutes() < 10)

? ("0" + now.getMinutes())

: (now.getMinutes())) + ':' +

((now.getSeconds() < 10)

? ("0" + now.getSeconds())

: (now.getSeconds())));

}

</script>

#form
{
text-align: center;
border: 3px solid #B22222;
width: 300px;
}

#maincontent
{
color: #66FFFF;
}

#tagline
{
text-align: center;
}

#footer
{
border: 3px solid;
border-color: #000000;
width: 300px;
text-align: center;
background-color: #FF00FF;
font-family: Arial;
font-style: italic;
}

body
{
background-color: #A9A9A9;
}
</style>

</head>

<body>

<h1>V-Bus service </h1>

</div>

<h2>
<p><ins>Let's travel with V-Bus Service </ins></p>
</h2>

</div>

<table>

<tr>
<td><i>First Name </i></td>
<td>
<input type="text" id="txtFNAME">
</td>
<tr>

<tr>
<td><i>Select City </i></td>
<td>
<select id="select_city">

<option value="St.Louis">St Louis = $40</option>

<option value="Milwaukee">Milwaukee = $20</option>

<option value="Detroit">Detroit= $35</option>

</select>

</td>
<tr>

<tr>
<td><i>Select Hotel </i></td>
<td>
<select id="select_hotel">

<option value="Economy">Economy = $50</option>

<option value="Standard">Standard = $70</option>

<option value="Upscale">Upscale= $120</option>

</select></td>
<tr>

<tr>
<td><i>Select Wifi</i></td>
<td>
<select id="select_wifi">

<option value="Request Wifi">Request Wifi = $10</option>

</select>
</td>
<tr>

<tr>
<tr>
<td><i>Select Meals </i></td>
<td>
<select id="select_meal">

<option value="Full Meals">Full Meals = $10</option>

</select>
</td>
<tr>

<tr>
<tr>
<td><i>Select number of Travelers </i></td>
<td>
<select id="number_of_travelers">

</select>
</td>
<tr>

<tr>
<td><i>Special insrtuctions </i></td>
<td>
<textarea id="txtSpecialInstructions" rows="4" cols="20"></textarea></td>
</tr>

</table>

</div>

</body>

</html>

=============================================

Output

=======================================================

If you have any query please let me know first i will give solution

Add a comment

Answer 2

Hello, this is my code. moest of the things works but when select the price, i...

Homework Answers

Add Answer to:
Hello, this is my code. moest of the things works but when select the price, i...

Post as a guest

Earn Coins

I have the code buts its not working as this below instruction can anyone help Use...

I need to complete 3 validation cases in this Javascript code. I need to validate email,...

Hello Ive been tryting to add the CDN of jquery to my html code and I...

Modify this code to store the form elements as variables and display them on the page...

I need HELP to get the code to do these function: If I keep clicking "Generate"...

JavaScript (Please debug this code) When a user enters a string in the input box, the...

How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...

PLEASE HELP: EASY CODE. Using your template create a webpage that contains a div. Give the...

HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

Hello, this is my code. moest of the things works but when select the price, i...

Homework Answers

Add Answer to: Hello, this is my code. moest of the things works but when select the price, i...

Post as a guest

Earn Coins

Add Answer to:
Hello, this is my code. moest of the things works but when select the price, i...