-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
99 lines (86 loc) · 2.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Local List</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./Assets/style.css">
</head>
<body>
<!--Page Header-->
<div class="title">
<h1>The Local List</h1>
</div>
<!--Contains Search Bar And Tag Line On Page-->
<div class="search">
<div id="tagLine">
<h3>Where Are You Traveling To Next?</h3>
</div>
<!--The Search Bar-->
<div class="searchBar">
<div>
<input id="destinationInput" type="text" placeholder="Where Are You Going Next...">
</div>
<div class="searchButton">
<button id="button" type="button">Search</button>
</div>
</div>
</div>
<!--Previous Searches-->
<div class="recent">
<h4>Recent Searches</h4>
<ul id="prevSearches">
</ul>
</div>
<!--Results For The Desired Location-->
<div class="results">
<div id="placeholder">
<h2>5 Day Weather Forecast</h2>
</div>
<div id="cityName">
</div>
<div class="weather-container">
<div class="heading-flex">
<h2 id="city-name"></h2>
<img src="" id="weather-icon">
</div>
<p id="current-date"></p>
<p id="temp"></p>
<p id="wind"></p>
<p id="humidty"></p>
<h2 id="5-day-forecast"></h2>
<div id="display-forecast"></div>
</div>
</div>
<!--Events section-->
<section id="eventsSection">
<h1 id="eventsLbl">Events</h1>
<div>
<h1 id="eventSearchLbl">Search By</h1>
<input id="eventsKeywordInput" type="text" placeholder="Keyword...">
<div class="searchButton" style="padding:10px">
<button id="button2" type="button">Search</button>
</div>
</div>
<div id="eventsList" class="grid grid-flow-row auto-rows-max">
</div>
</section>
</div>
<!-- The Modal -->
<div id="msgModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p id="informMessage"></p>
</div>
</div>
<!--Holds all of the Script Links for JS And APIs-->
<div class="Scripts">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="./Assets/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js"
integrity="sha256-iu/zLUB+QgISXBLCW/mcDi/rnf4m4uEDO0wauy76x7U=" crossorigin="anonymous"></script>
</div>
</body>
</html>