Your page will simulate a reservation form for a hotel stay. It should include the following:...

Question

Question

Your page will simulate a reservation form for a hotel stay. It should include the following:

Name à Text field
Email à Text field
Number of nights à Text field (of size 3)
Type of room? à Select box with options for Regular ($100), Deluxe ($150), Suite ($250)
Would you like to join our Frequent Travellers Club? If you join, we will take $50 off your first order. à Checkbox

Write the function that will confirm what the user requested. You should output the total cost of their order. You should output this information to the <div> section called ‘results’.

For example, if the user wanted to stay for 3 nights and chose the "deluxe room", and checked the frequent travellers club, you would output the following:

Thank you, NAME for your reservation! You are staying for 3 nights in a deluxe room. We will add you to our Frequent Travellers Club. The total cost of your stay is $400.00.

Comfort Corner Suites Name: Yosef Mendelsohn Email: ymendels@depaul.edu Number of Nights: 3 Type of Room? Deluxe ($150 per ni

Note: The cost was arrived at by: 3 nights * $150 per night, minus $50 for joining the frequent travllers club.

Note: If the user chooses only 1 night, you don't have to worry about saying "night" v.s. "nights". That is, it's okay if you use the plural form for each.

Include the functionality mentioned above so that if they choose more than 1 night, you output "nights", but if they only choose 1 night you output "night".

Important Tip: Remember to start very, very small on the concatenation and build. That is, don't try to do it all at once. Start in pieces and build it until it all comes together.

Hints:

you will want a variable to keep track of the cost, and to adjust it as you see what's in the form (e.g. number of nights, type of room, etc.)
You will want an if/else if sequence to figure out the which room they chose and then will multiply by the number of nights.
You will probably want a separate single if block for the frequent travellers club.
Your version may be different from what I have offered in these tips, yet still be perfectly correct.

Other Requirements:

You MUST use "else if" for the room types in your JavaScript. That is, I do not want to see separate 'if' statements. There should be one "if" and two "else if" statements.
Output to 2 decimal places (since this is a monetary amount). Recall that there is a method called toFixed() that allows you to do this.
Set the width of your entire page to 450 pixels. You can do this by applying your style to the <body> tag. Note: Some feel that styling the <body> tag is not the ideal way to do this, but let's keep it relatively simple for now.
Using a contextual selector, style the results section so that any text inside is displayed in italics. This section should also have a red border that is 2 pixels wide. The background color of the section should be blue, and the foreground should be white. (If you'd like to choose different colors, that's fine too).
Experiment with padding and/or margins to make your section a little 'cleaner'. That is, without using these features, you may find that the text abuts directly against the border. Using borders or padding can help clean it up a little.
All styling must be done in an external style sheet.

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Simple Explanation :

We are going to use different input type so as to make sure that the required need is fullfilled and a appropiate label likewise. Simple but effective way of handling the tags is embedding them with the specific id which can be further used in the javascript section.As it is very clear from the question itself and every steps are explained in details in the question. Some extra feature added like if we try to click the reserve button with filling details it would "Please fill up details". we can get the values of the tag by using

var value=document.getElementById("id-name").value;

The above equation fetch's the value from the webpage and stores it in the variable itself and then we can use it like any other variable.

We had attached the script file and css file to the HTML.

NOTE: Make sure, all the three files should be saved in the same directory(HTML FILE, CSS FILE , JS FILE).

Everything is given below with screenshot and code

HTML CODE:

Reservation.html

<!DOCTYPE html>
<html>
<head>
   <title>Hotel Reservation Form</title>
   <link rel="stylesheet" type="text/css" href="Reservation.css">
</head>
<body>
   <h1>Comfort Corner Suites</h1>
   <div>
       <label>Name:</label>
       <input type="name" name="name" id="name">
   </div>
   <br>
   <div>
       <label>Email:</label>
   <input type="Email" name="Email" id="email">
   </div>
   <br>
   <div>
       <label>Number of Nights:</label>
       <input type="Number" name="numberOfNights" id="numberOfNights">
   </div>
   <br>
   <div>
       <label>Type of Room?</label>
       <select id="room">
           <option value="100">Regular($100 per night)</option>
           <option value="150">Deluxe($150 per night)</option>
           <option value="250">Suite($250 per night)</option>
       </select>
   </div>
   <br>
   <div>
       <label>Would you like to join our Frequent Travellers Club? If you join, we will take $50 off your first order.</label>
       <input type="checkbox" name="club" id="club">
   </div>
   <br>
   <input type="button" onclick="Reserve()" value="Reserve My Room!">
   <br>
   <br>

   <div id="result" style="visibility: hidden;"></div>

CSS CODE:

Reservation.css

body{
   text-align: center;
   border:2px black solid;
   margin:100px;
   padding: 10px;
   width: 450px;
}
#result{
   border:2px red solid;
   background-color: blue;
   color: white;
   font-style: italic;
}

JAVASCRIPT CODE:

Reservation.js

function Reserve() {

   var room=document.getElementById('room').value;
   var name=document.getElementById('name').value;
   var email=document.getElementById('email').value;
   var numberOfNights=document.getElementById('numberOfNights').value;
   var club=document.getElementById('club').checked;

var roomType;

   if (room=="150") {
       roomType="deluxe";
   }
   else if (room=="100") {
       roomType="regular";
   }
   else{
       roomType="suite";
   }

var memberClub,discount;

   if (club) {
       discount=50;
       memberClub=" We will add you to our Frequent Travellers Club.";
   }
   else{
       discount=0;
       memberClub="";
   }
   var totalCostOfStay=0;

totalCostOfStay=numberOfNights*room-discount;

var showNight;

   if (numberOfNights>1) {
       showNight="nights";
   }
   else{
       showNight="night";
   }

   if (name!="" && email!="" && numberOfNights!="") {
       document.getElementById('result').style.visibility = "visible";
       document.getElementById('result').innerHTML="Thank you, "+name+" for your reservation! You are staying for "+
                                               numberOfNights+" "+showNight+" in a "+roomType+" room."+memberClub+
                                               " The total cost of your stay is $"+totalCostOfStay+".0.";
   }
   else{
       alert("Please, fill up all details!!!");
   }

}

OUTPUT :

CODE SCREENSHOT :

Please provide feedback and comment down if any problem arises.

Add a comment

Answer 2

Your page will simulate a reservation form for a hotel stay. It should include the following:...

Homework Answers

Add Answer to:
Your page will simulate a reservation form for a hotel stay. It should include the following:...

Post as a guest

Earn Coins

Create an HTML5 page that contains a form to collect the following data. The text in...

Assignment:Super Lotto This exercise is JavaScript only. No jQuery, please. Your page should work as follows: Ask the user the highest number that they want to generate. (Some lotteries are 1 ‐ 47, so...

HTML / CSS Content Requirements Create a home page with the following elements and settings: Set...

2. HTMIICSS Coding Write the XHITMI and CSS code necessary to recreate the following appearance on-screen. Adaprted from the WA.B.L page of the Washington Beer Commision webrite, washingtonbeer.c...

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

making a file You are tasked with creating a text-based program for storing data on Hotel...

IF YOU ZOOM IN ON THE PICTURES ON YOUR COMPUTER YOU SHOULD BE ABLE TO SEE...

My question is about the case study “ Comparing Apples and Oranges: which group yuelds the...

Your page will simulate a reservation form for a hotel stay. It should include the following:...

Homework Answers

Add Answer to: Your page will simulate a reservation form for a hotel stay. It should include the following:...

Post as a guest

Earn Coins

Add Answer to:
Your page will simulate a reservation form for a hotel stay. It should include the following:...