-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththeme_park_calculator.html
66 lines (63 loc) · 2.63 KB
/
theme_park_calculator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!--
This file contains the markup for the theme park
tickets calculator.
Author: Dee Brecke
File: theme_park_calculator.html
Date: 1/12/2022
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Theme Park Ticket Calculator</title>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<header>
<img src="images/tp_top.png" alt="Picture of a circus or carnival">
</header>
<h1>Theme Park Ticket Calulator</h1>
<!-- user inputs: two text boxes and two drop down menus all in one form-->
<form>
<label>Adult Cost</label>
<input type=number id="adult-cost" placeholder="$35.00"><br>
<label>Child Cost</label>
<input type=number id="child-cost" placeholder="$20.00"><br>
<label>Adult Tickets</label>
<select id="adult-num">
<option value = "0">0 tickets</option>
<option value = "1">1 ticket</option>
<option value = "2">2 tickets</option>
<option value = "3">3 tickets</option>
<option value = "4">4 tickets</option>
<option value = "5">5 tickets</option>
<option value = "6">6 tickets</option>
<option value = "7">7 tickets</option>
<option value = "8">8 tickets</option>
<option value = "9">9 tickets</option>
<option value = "10">10 tickets</option>
</select><br>
<label>Child Tickets</label>
<select id="child-num">
<option value = "0">0 tickets</option>
<option value = "1">1 ticket</option>
<option value = "2">2 tickets</option>
<option value = "3">3 tickets</option>
<option value = "4">4 tickets</option>
<option value = "5">5 tickets</option>
<option value = "6">6 tickets</option>
<option value = "7">7 tickets</option>
<option value = "8">8 tickets</option>
<option value = "9">9 tickets</option>
<option value = "10">10 tickets</option>
</select><br><br>
<!--calculation formula is in javascript file-->
<button>Calculate!</button>
</form>
<h1 id="total-cost">Total cost for tickets: </h1>
<footer>
<img src="images/tp_bottom.png" alt = "Picture of another circus/carnival">
</footer>
<script src="scripts/tickets.js"></script>
</body>
</html>