-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
115 lines (76 loc) · 3.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&family=Open+Sans:wght@700&family=Source+Code+Pro:wght@300&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nova+Square&display=swap" rel="stylesheet">
<!-- CSS Reset -->
<link rel="stylesheet" href="assets/css/reset.css" type="text/css">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Animate.CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<!--Fontawesome CSS-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!--Local CSS-->
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<!--moment.js-->
<script src="https://momentjs.com/downloads/moment.js"></script>
<!--Bootstrap js-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!--Local js-->
<script src="assets/js/script.js"></script>
<link href="assets/images/favicon.ico" rel="icon" type="image/x-icon">
<title>Weather Dashboard</title>
</head>
<body>
<header class="container-fluid">
<div class='row justify-content-center'>
<div class='outline row self-align-center'>
<h1 class='inline'>WEATHER DASHBOARD</h1>
<button id="toggleBtn" class="btn btn-primary col" type="button" data-toggle="collapse" data-target="#searchCollapse" aria-expanded="false" aria-controls="searchCollapse">> Search Weather <</button>
</div>
</div>
</header>
<aside class='container-fluid collapse' id="searchCollapse">
<div class="searchCol" id="searchCol">
<div class='row justify-content-center' id="searchContent">
<h4 class='col-md-auto col-sm-auto' class id='searchHeader'>Search/History</h4>
<div class='col-md-auto col-sm-auto'>
<div class="input-group mb-3">
<input id="searchInput" type="text" class="form-control" placeholder="City or region">
<div class="input-group-append">
<button class="btn searchBtn btn-outline-secondary" type="button" id="searchBtn">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class='history row'>
</div>
</div>
</aside>
<main class="container-fluid">
<!-- JavaScript appends current weather data elements to this row. -->
<div class="row align-items-center justify-content-center" id="currentDay">
</div>
<!-- JavaScript appends 5-day forecast weather data elements to this row. -->
<div class="row" id="fiveDay">
</div>
</main>
<!-- Just footer things. -->
<footer>
Weather data provided by <a href="https://openweathermap.org/">openweathermap.org</a>
</footer>
</body>
</html>