Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>The Happy Hoppin' Hotel</title>
    <link type="text/css" rel="stylesheet" href="happyhoppin_skeleton.css" />
    <script src="happyhoppin_skeleton.js" language="javascript" type="text/javascript"></script> 
  </head>
    <body>
        <form>
            <h1>The Happy Hoppin' Hotel Checkout Page</h1>
            <p>Fill out the form below to calculate balance due</p>
            Guest ID Number: <input type="text" id="custID" /><div id="guestID"> </div>
            Room Type: 
            <select id="roomType" />
                <option></option>
                <option>Double</option>
                <option>Single</option>
                <option>Parlor</option>
            </select><div id="room"> </div>
            Length of Stay: <input type="text" id="stayLength" name="" /><div id="stay"> </div>
            Number of Drinks: <input type="text" id="drinkNum" name="" /><div id="drink"> </div>
            Number of Towels: <input type="text" id="towelNum" name="" /><div id="towel"> </div>
            Number of Flushes: <input type="text" id="flushNum" name="" /><div id="flush"> </div>
            Bug Complaints?:  <label><br>
            <input type="radio" id="radio" name="bugComplaint" value="Yes" onclick="getCheckedRadio(this)" />Yes<br>
            <input type="radio" id="radio" name="bugComplaint" value="No" onclick="getCheckedRadio(this)" />No
            
            <div id="comments">Customer Comments: 
            <textarea name="customerComment" id="comments" onFocus="this.value=''" value="Make me disappear" cols="50" rows="5">Enter your comments here...</textarea> 
            </div>
            <input type="button" onclick="calculateFinalBill()" value="Calculate">
        </form>
    </body> 
</html>
 
//constants
const doublePrice = 150;
const singlePrice = 100;
const parlorPrice = 80;
const drinkPrice = 5;
const towelPrice = 3;
const flushPrice = 1;
​
//variables
var custID;
var roomPrice;
var stayLength;
var drinkNum;
var towelNum;
var flushNum;
var totalDue;
var subtotal;
var roomType;
var bugDiscount;
​
​
​
function calculateFinalBill() {
    validateForm();
        if(roomType == "Double"){
        roomPrice = doublePrice;
        }
        
        if(roomType == "Single"){
        roomPrice = singlePrice;
        }
        
        if(roomType == "Parlor"){
        roomPrice = parlorPrice;
        }
        
        roomTotal = roomPrice * stayLength
        
        towelTotal = towelPrice * towelNum
        
        flushTotal = flushPrice * flushNum
        
        drinkTotal = drinkPrice * drinkNum
        
        subtotal = roomTotal + towelTotal + flushTotal + drinkTotal
        
        totalDue = subtotal - bugDiscount
        
        //error flag = 0
        //assign error flag to 1 if any of the alerts fire
        //if error flag is 0 then display bill
        //http://jsbin.com/uletet/1/edit
        displayBill();
}
        
function getCheckedRadio(which){
    var bugValue = which.value;
        if (bugValue == "No"){
        bugDiscount = 0;
        }
        if (bugValue == "Yes"){
        bugDiscount = 20;
        }
}
​
function validateForm(){
    custID = parseInt(document.getElementById("custID").value);
    if(isNaN(custID)){
        document.getElementById('guestID').innerHTML="*Guest ID must be a number"
        throw "stop execution";
    }
    
    if(custID <= 0){
        document.getElementById('guestID').innerHTML="*Guest ID must be greater than zero"
        throw "stop execution";
    }
    
    roomType = document.getElementById("roomType").value;
    if(roomType == ""){
        document.getElementById('room').innerHTML="*Room type must be selected"
        throw "stop execution";
    }
    
    stayLength = parseInt(document.getElementById("stayLength").value);
    if(isNaN(stayLength)){
        document.getElementById('stay').innerHTML="*Length of Stay must be a number"
        throw "stop execution";
        }
    if(stayLength < 0){
        document.getElementById('stay').innerHTML="*Length of Stay must be greater than zero"
        throw "stop execution";
    }
    
    drinkNum = parseInt(document.getElementById("drinkNum").value);
    if(isNaN(drinkNum)){
        document.getElementById('drink').innerHTML="*Number of Drinks must be a number"
        throw "stop execution";
        }
    if(drinkNum < 0 || drinkNum > 25){
        document.getElementById('drink').innerHTML="*Number of Drinks must be 0-25"
        throw "stop execution";
    }
    
    towelNum = parseInt(document.getElementById("towelNum").value);
    if(isNaN(towelNum)){
        document.getElementById('towel').innerHTML="*Number of Towels must be a number"
        throw "stop execution";
        }
    if(towelNum < 0){
        document.getElementById('towel').innerHTML="*Number of Towels must be zero or greater"
        throw "stop execution";
    }
    
    flushNum = parseInt(document.getElementById("flushNum").value);
    if(isNaN(flushNum)){
        document.getElementById('flush').innerHTML="*Number of Flushes must be a number"
        throw "stop execution";
        }
    if(flushNum < 0){
        document.getElementById('flush').innerHTML="*Number of Flushes must be zero or greater"
        throw "stop execution";
    }
    
    customerComment = document.getElementById("customerComment");
}
​
function displayBill(){
    var newPage =  "<html><head><title>Billing Summary</title></head>"; //Add CSS after title
        newPage += "<body><h1>Happy Hoppin Hotel</h1>";
        newPage += "<h2>Guest Billing Summary</h2>";
        newPage += "Guest Identification: " + custID;
        newPage += "<br />";
        newPage += "Room Type: " + roomType;
        newPage += "<br />";
        newPage += "Length of Stay: " + stayLength;
        newPage += "<br />";
        newPage += "Room Charge: $" + roomTotal;
        newPage += "<br />";
        newPage += "Drink Charge: $" + drinkTotal;
        newPage += "<br />";
        newPage += "Towel Charge: $" + towelTotal;
        newPage += "<br />";
        newPage += "Flushing Charge: $" + flushTotal;
        newPage += "<br />";
        newPage += "Subtotal: $" + subtotal;
        newPage += "<br />";
        if(bugDiscount != 0)
        {
        newPage += "Discount: $" + bugDiscount;
        newPage += "<br />";
        }
        newPage += "Total Due: $" + totalDue;
        newPage += "<br />";
        newPage += "Come back and visit us again at the Happy Hoppin' Hotel"
​
    var j = window.open('','','width=400,height=500');
    j.document.write(newPage);
    j.document.close();
    
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kooldude069pro
0viewers