-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (105 loc) · 7.57 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
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/style.css">
<link type="image/png" href="./assets/favicon.png" rel="icon">
<title>Sport Spot</title>
</head>
<body>
<header>
<h1>Sport Spot</h1>
<p>Choose your sport. We find you the spots.</p>
</header>
<main id="main">
<div class="wrapper">
<!-- List of buttons for our user to select a sport from. The data-slug corresponds to the slug parameter in the Decathlon Sports API, allowing us to retreive a sport ID to then get facilities for that sport. -->
<p>Choose a sport:</p>
<ul class="main__ul-sports-btn">
<li>
<button data-slug="ice-hockey"><img src="./assets/hockey-icon.png" alt="ice hockey icon" title="Ice Hockey"></button>
</li>
<li>
<button data-slug="basketball"><img src="./assets/basketball-icon.png" alt="basketball icon" title="Basketball"></button>
</li>
<li>
<button data-slug="baseball"><img src="./assets/baseball-icon.png" alt="baseball icon" title="Baseball"></button>
</li>
<li>
<button data-slug="soccer"><img src="./assets/soccer-icon.png" alt="soccer icon" title="Soccer"></button>
</li>
<li>
<button data-slug="tennis"><img src="./assets/tennis-icon.png" alt="tennis icon" title="Tennis"></button>
</li>
<li>
<button data-slug="swimming"><img src="./assets/swimming-icon.png" alt="swimming icon" title="Swimming"></button>
</li>
<li>
<button data-slug="yoga"><img src="./assets/yoga-icon.png" alt="yoga icon" title="Yoga"></button>
</li>
<li>
<button data-slug="boxing"><img src="./assets/boxing-icon.png" alt="boxing icon" title="Boxing"></button>
</li>
</ul>
<!-- If the user does not want to share their location, this form will appear on the page.
We will then grab the value (coordinates) from the city input, and the value (slug) from the sport input.
The coordinates used for the cities are the city centers/downtown. -->
<form action="" class="main__form">
<fieldset class="main__fieldset-city">
<legend>Choose your city:<br><span>Note: Selecting a city will return facilities closest to the downtown core. We highly recommend sharing your location to receive tailored results.</span></legend>
<input type="radio" id="toronto" name="city" value="-79.384146, 43.656123" required>
<label for="toronto">Toronto</label>
<input type="radio" id="ottawa" name="city" value="-75.697452, 45.413122">
<label for="ottawa">Ottawa</label>
<input type="radio" id="montreal" name="city" value="-73.571203,45.504578">
<label for="montreal">Montreal</label>
<input type="radio" id="halifax" name="city" value="-63.578405, 44.645076">
<label for="halifax">Halifax</label>
<input type="radio" id="calgary" name="city" value="-114.059279,51.048079">
<label for="calgary">Calgary</label>
<input type="radio" id="moscow" name="city" value="37.618617,55.767653">
<label for="moscow">Moscow, RU</label>
<input type="radio" id="tokyo" name="city" value="139.772725,35.689321">
<label for="tokyo">Tokyo, JP</label>
</fieldset>
<fieldset class="main__fieldset-icon">
<legend>Choose a sport:</legend>
<input type="radio" id="ice-hockey" name="sport" value="ice-hockey" required>
<label for="ice-hockey" class="main__label-icon"><img src="./assets/hockey-icon.png" alt="ice hockey icon" title="Ice Hockey"></label>
<input type="radio" id="basketball" name="sport" value="basketball">
<label for="basketball" class="main__label-icon"><img src="./assets/basketball-icon.png" alt="basketball icon" title="Basketball"></label>
<input type="radio" id="baseball" name="sport" value="baseball">
<label for="baseball" class="main__label-icon"><img src="./assets/baseball-icon.png" alt="baseball icon" title="Baseball"></label>
<input type="radio" id="soccer" name="sport" value="soccer">
<label for="soccer" class="main__label-icon"><img src="./assets/soccer-icon.png" alt="soccer icon" title="Soccer"></label>
<input type="radio" id="tennis" name="sport" value="tennis">
<label for="tennis" class="main__label-icon"><img src="./assets/tennis-icon.png" alt="tennis icon" title="Tennis"></label>
<input type="radio" id="swimming" name="sport" value="swimming">
<label for="swimming" class="main__label-icon"><img src="./assets/swimming-icon.png" alt="swimming icon" title="Swimming"></label>
<input type="radio" id="yoga" name="sport" value="yoga">
<label for="yoga" class="main__label-icon"><img src="./assets/yoga-icon.png" alt="yoga icon" title="Yoga"></label>
<input type="radio" id="boxing" name="sport" value="boxing">
<label for="boxing" class="main__label-icon"><img src="./assets/boxing-icon.png" alt="boxing icon" title="Boxing"></label>
</fieldset>
<button type="submit" value="Submit">Submit</button>
<!-- A reset button is added to allow keyboard users to reset the form -->
<button type="reset" value="Reset">Reset</button>
</form>
<ul class="main__ul-sports-location">
<!-- Sports facilities results will be printed here using the append method -->
</ul>
<a href="#main">Return to sport selections.</a>
</div>
</main>
<footer>
<p>Made with the help of the <a href="https://developers.decathlon.com/" target="_blank" rel="noopener noreferrer">Decathlon</a> and <a href="https://developer.mapquest.com/" target="_blank" rel="noopener noreferrer">MapQuest</a> APIs. Sport Icons by <a href="https://thenounproject.com/coquet_adrien/collection/sport/" target="_blank" rel="noopener noreferrer">Adrien</a> Coquet from the Noun Project.</p>
<p>Copyright <a href="https://sylcodes.com/" target="_blank" rel="noopener noreferrer">Syl Aucoin</a> & <a href="https://victorhok.com/" target="_blank" rel="noopener noreferrer">Victor Hok</a> @ <a href="https://junocollege.com/" target="_blank" rel="noopener noreferrer">Juno College</a> 2020</p>
</footer>
<script src='https://code.jquery.com/jquery-3.5.1.js' integrity='sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc='
crossorigin='anonymous'></script>
<script src="./script.js"></script>
</body>
</html>