-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchallenge02.html
109 lines (98 loc) · 3.59 KB
/
challenge02.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS -->
<link rel="stylesheet" href="../WDD330/css/Challenge02/challenge02.css" />
<!-- ICONS -->
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" />
<title>Challenge 02: Geolocation API</title>
</head>
<body>
<!-- Top Navigation Menu -->
<div class="top-nav">
<a href="../WDD330/challenge02.html" class="active">Challenge 02 Project</a>
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
<a href="../WDD330/challenge02.html">GeoAPI</a>
<a href="../WDD330/challenge02_part2.html">JS Game</a>
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="img-group">
<img src="../WDD330/assests/geo.jpg" alt="Geolocation API Infographic">
</div>
<!-- Page Description -->
<div class="page-text">
<h2>What is this?</h2>
<p>This is part 1 of the Challenge 02 Project. This part will focus on the use of API knowledge, specifically the
Geolocation API.</p>
</div>
<!-- Simple Location Finder Section -->
<div class="api_module">
<h3>Simple Location Finder</h3>
<p>Pressing this button will prompt for access to your location data. It will then display your coordinates and
clicking on the link will
send you to Google Maps where your location is.</p>
<div class="button-group">
<button id="requestLocation">Request Location</button>
</div>
<div class="output-group">
<h3>Your Current Coordinates</h3>
<p id="currentLocation"></p>
<a id="google-map-link-1" target="_blank"></a>
</div>
</div>
<!-- Simple Map Search Query -->
<div class="api_module">
<h3>Simple Map Search Query</h3>
<p>Search for something in your near you! For example if you search McDonald's, it will find all of the nearest
McDonalds near you.</p>
<div class="text-group">
<label for="searchQuery">What would you like to search for in your area?</label>
<input type="text" id="searchQuery" name="searchQuery" /> <br />
</div>
<div class="button-group">
<button id="requestQuery">Search</button>
</div>
<div class="output-group">
<h3>Your Query</h3>
<p id="queryLocation"></p>
<a id="google-map-link-2" target="_blank"></a>
</div>
</div>
<!-- Contact Section -->
<div id="contact" class="contact-info">
<div class="contact-card">
<i class="card-icon far fa-envelope"></i>
<p>[email protected]</p>
</div>
<div class="contact-card">
<i class="card-icon fas fa-phone"></i>
<p>(951)391-9320</p>
</div>
<div class="contact-card">
<a href="https://github.com/ilagazo">
<i class="card-icon fab fa-github"></i>
<p>My Repositories</p>
</a>
</div>
<div class="contact-card">
<a href="https://www.linkedin.com/in/ivanro-lagazo/">
<i class="card-icon fab fa-linkedin"></i>
<p>My Profile</p>
</a>
</div>
</div>
<!-- JS Script -->
<script src="../WDD330/js/Challenge02/challenge02.js"></script>
</body>
</html>