Create travel tour price calculation application (max. 100%) A travel agency sel
ID: 3728113 • Letter: C
Question
Create travel tour price calculation application (max. 100%) A travel agency sells the holiday packages to Sunshine Beach with the compound discounts for groups. Total package price is a sum of air tickets price and hotel price. Write a web application that asks the company’s client to enter the number of adult persons, number of children, number of days and calculates the package price. Ontario HST (13%) has to be applied to the total sale price. Total cost = ((air ticket price) * (number of persons) + (hotel price) * (number of days)) * HST. Note: Hotel accommodation is shared by the group members. Current tariffs: Air ticket/person: $350 Hotel/day: $125 Discounts: For air tickets: 2 or more adult persons: -15% for each person. Children: - 50%. ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ === Note: one adult does not have a air ticket discount even if the children also are in the group. For hotel price: 8 or more days: -5% for each day. Example 1: One adult person buys 7 day vacation package. Total cost calculation for this package: Air tickets: 350 * 1 = $350 Hotel: 125 * 7 = $875 Total before taxes: $350 + $875 = $1225 Total cost: $1225 + HST (13%) = $1225 + $159.25 = $1384.25 Example 2: A family of 2 parents and 3 children buys 10 day vacation package. Total cost calculation for this package: Air tickets: ((350 * 0.85) * 2) + ((350 * 0.5) * 3) = 529 + 525 = $1120 Hotel: ((125 * 0.95) * 10) = $1187.50 Total before taxes: $1120 + $1187.50 = $2307.50 Total cost: $2307.50 + HST (13%) = $2307.50 + $299.98 = $2607.48 Assignment steps: 1) Open index.html file and inspect it. Then run it. Click to Get Price to see it does nothing when we enter data. 2) You don’t need to modify HTML or CSS. Write the code in the attached JavaScript file (vacations.js in scripts folder) to calculate the price before taxes, amount of taxes (HST) and total price which include taxes, after user enters data and clicks “Get Price” button. (bonus point if you show always 2 decimal points in the calculated text boxes, even for rounded numbers, for example 1234.50 instead of 1234.5 and 1234.00 instead of 1234). (75%) 3) Round the calculated tax amount to 2 decimal places. (1%) 4) Provide data validation with these rules: (15%) Number of adults must be integer number minimum 1 maximum 8 Number of children must be integer number minimum 0 maximum 5 (bonus point if you allow it to be empty for meaning 0) Number of days must be integer number minimum 3 maximum 30. In case of error in data validation show the appropriate messages next to invalid fields, does not calculate the price, and clean already calculated values. 5) disable the text boxes of calculated values so that the user can;t enter anything in them (4%) 6) Allow user to clean all text boxes by double clicking on any text box where he is allowed to enter data. In this case clean all text boxes on the form. (4%) 7) Set focus in the first text box when the page loads. (1%)
here is html
<!DOCTYPE html>
<!-- CSD 2214. Assignment 3 on jQuery. Instructor: V.Khachidze -->
<html>
<head>
<title>Sunshine Beach Vacations</title>
<link rel="stylesheet" href="styles/vacations.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<script src="scripts/vacations.js"></script>
</head>
<body>
<main class="animated zoomIn">
<h1 class="animated zoomInLeft">Sunshine Beach Vacations</h1>
<form action="#" class="animated rotateIn">
<p><label for="adults">Number of adults:</label><input type="text" id="adults"><span></span></p>
<p><label for="kids">Number of children:</label><input type="text" id="kids"><span></span></p>
<p><label for="days">Number of days:</label><input type="text" id="days"><span></span></p>
<p><label for="price_wo_tax">Price before taxes ($):</label><input type="text" id="price_wo_tax"></p>
<p><label for="tax">HST (13%) ($):</label><input type="text" id="tax"></p>
<p><label for="price_w_tax">Total price ($):</label><input type="text" id="price_w_tax"></p>
<p><input type="button" value="Get Price" id="get_price"></p>
</form>
</main>
</body>
</html>
Explanation / Answer
<!DOCTYPE HTML>
<html>
<head>
<link rel='stylesheet' href="style.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="calculator.js" type="text/javascript"></script>
</head>
<body>
<center>
<div class="body">
<h1>Travel Calculator</h1>
<form id='accordion'>
<ul>
<li><a href="#"><span>Travel Expenses</span></a>
<ul>
<li>
<a>Plane/Train/Bus Tickets</a>$<input type="text" id="amount1" name="amount" placeholder="0"></li>
<li><a>Checked Baggage Fees</a>$<input type="text" id="amount2" name="amount" placeholder="0">
</li>
<li><a href="#"><span>Parking at Airport/Station</span></a>$<input type="text" id="amount3" name="amount" placeholder="0"></li>
<li><a href="#"><span>Gas & Tolls</span></a>$<input type="text" id="amount4" name="amount" placeholder="0"></li>
<li><a href="#"><span>Taxi/Shuttle to Airport/Station</span></a>$<input type="text" id="amount5" name="amount" placeholder="0"></li>
</ul>
</li>
<li><a href="#"><span>Accomodation</span></a>
<ul>
<li><a href="#"><span>Hotel (Price x Number of Nights)</span></a>$<input type="text" id="hotel-price" name="amount" placeholder="0 (price per night)">x<input type="text" id="hotel-nights" name="amount" placeholder="0 (number of nights)"></li>
<li><a href="#"><span>Hotel Services (Spa, Minibar, Tips, etc.)</span></a>$<input type="text" id="hotel-services" name="amount" placeholder="0"></li>
</ul>
</li>
<li><a href="#"><span>Food & Drink</span></a>
<ul>
<li><a href="#"><span>Food (Amount per Day x Number of Days)</span></a>$<input type="text" id="food-daily" name="amount" placeholder="0 (amount per day)">x<input type="text" id="food-days" name="amount" placeholder="0 (number of days)"></li>
<li><a href="#"><span>Nightlife (Amount per Day x Number of Days)</span></a>$<input type="text" id="nightlife-price" name="amount" placeholder="0 (amount per day)">x<input type="text" id="nightlife-days" name="amount" placeholder="0 (number of days)"></li>
</ul>
</li>
<li><a href="#"><span>Entertainment</span></a>
<ul>
<li><a href="#"><span>Attractions (Entry Fees, Transport, Tours)</span></a>$<input type="text" id="attractions" name="amount" placeholder="0"></li>
<li><a href="#"><span>Shopping & Souvenirs</span></a>$<input type="text" id="shopping" name="amount" placeholder="0"></li>
</ul>
</li>
<li><a href="#"><span>Logistics</span></a>
<ul>
<li><a href="#"><span>Passport and Visa Fees</span></a>$<input type="text" id="passports" name="amount" placeholder="0"></li>
<li><a href="#"><span>Travel Insurance</span></a>$<input type="text" id="insurance" name="amount" placeholder="0"></li>
<li><a href="#"><span>Luggage</span></a>$<input type="text" id="luggage" name="amount" placeholder="0"></li>
<li><a href="#"><span>Other</span></a>$<input type="text" id="other" name="amount" placeholder="0"></li>
</ul>
</li>
</ul>
<input id="submit" type="submit" value="Calculate">
<input id="reset" type="reset" value="Start Over">
</form>
<h2 id="total">The Damage: $0</h2>
</div>
</center>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.