forked from for-goodness-SAKE/wsi-project-two
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·79 lines (79 loc) · 4.53 KB
/
index.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
67
68
69
70
71
72
73
74
75
76
77
78
79
<!-- Start of HTML document-->
<!DOCTYPE html>
<html lang ="en"> <!-- Language is English-->
<!-- Start of head-->
<head>
<title>Project 2_Alpha Release</title> <!-- Document title-->
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="reset.css"/> <!-- Link reset CSS file-->
<link rel="stylesheet" type="text/css" href="common.css"/> <!-- Link common CSS file-->
<link rel="stylesheet" type="text/css" href="screen.css"/> <!-- Link screen CSS file-->
<script type="text/javascript" src = config.js></script> <!-- Link config JS file-->
<script type="text/javascript" src = search.js defer></script> <!-- Link search JS file-->
</head>
<!-- End of head-->
<!-- Start of body-->
<body>
<!-- Start of page header-->
<header class= "head">
<h1>National Park Finder</h1> <!-- Page title-->
</header>
<!-- End of page header-->
<!-- Start of Main-->
<main class = "filters">
<!-- Start of Form for filters-->
<form id="filter" class="form" autocomplete="off">
<!-- Start of section for filters- location and radius -->
<section class="filter1">
<!-- Label for location filter-->
<label for="location">Where do you want to go?</label>
<!-- Tooltip to help user what to input-->
<div id="help" class="tooltip">Help
<span class="tooltiptext">Please enter one of the following:<br> 1. City - Ex:Chicago, Washington <br> 2. Zipcode - Ex:60640, 46582
<br> 3.Park Name - Ex:Yosemite National Park, Grand Canyon National Park</span>
</div>
<!-- Example text for the location placeholder-->
<input id="loc" placeholder="Grand Canyon National Park *" type="text" value="" required>
<!-- Button to get the current location of user on click-->
<button onclick="current_location()" class="location">Get Current Location</button>
<!-- Start of div for progressive disclosure of radius filter-->
<div class = "form-group">
<!-- Label for radius filter-->
<label for="radius">How far do you want to travel?</label>
<!-- Start of select Dropdown options for radius-->
<select id="rad">
<option value=10>< 10 miles</option>
<option value=25>< 25 miles</option>
<option value=50 selected>< 50 miles</option> <!-- Defaulted to <50 miles-->
<option value=75>< 75 miles</option>
<option value=100>< 100 miles</option>
<option value=125>< 125 miles</option>
<option value=150>< 150 miles</option>
<option value=175>< 175 miles</option>
<option value=200>< 200 miles</option>
<option value=225>< 225 miles</option>
<option value=250>< 250 miles</option>
<option value=275>< 275 miles</option>
<option value=300>< 300 miles</option>
<option value=10000>> 300 miles</option>
</select>
<!-- End of select Dropdown options for radius-->
</div>
<!-- End of div for progressive disclosure of radius filter-->
</section>
<!-- End of section for filters- location and radius -->
</form>
<!-- End of Form for filters-->
<!-- Start of section for buttons-->
<section class="buttons">
<button onclick= "search()" class="button1">Search</button>
<button onclick="reset()" class="button2">Clear</button>
</section>
<!-- End of section for buttons-->
</main>
<!-- End of Main-->
</body>
<!-- Start of body-->
</html>
<!-- End of HTML document-->