-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (126 loc) · 4.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta
name="description"
content="Showing the Local Weather on Currently, Next 48 Hours and Next 7 Days"
/>
<meta
name="keywords"
content="show local weather, local weather, fcc, freecodecamp, lam pham, completejavascript"
/>
<title>Show the Local Weather - Lam Pham</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="./css/main.css" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-96543695-6"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-96543695-6");
</script>
</head>
<body>
<div class="main-app">
<header>
<h1 class="title my-transition">Weather App</h1>
<p class="subtitle my-transition">
Simple Weather App using
<a href="https://darksky.net/dev/">Dark Sky API</a>,
<a href="https://darkskyapp.github.io/skycons/">Skycons</a>.
</p>
</header>
<section class="currently my-box-shadow my-transition">
<div class="heading">
<div class="title">Currently</div>
<div class="menu">
<span class="item active" unit="F">°F</span>
<span class="item" unit="C">°C</span>
</div>
</div>
<div class="content">
<div class="item location"></div>
<div class="item temp"></div>
<div class="item icon">
<canvas id="current-icon"></canvas>
</div>
<div class="item summary"></div>
<div class="item humidity">
<i class="fa fa-tint"></i>
<span class="detail"></span>
</div>
</div>
</section>
<section class="next-48h my-box-shadow my-transition">
<div class="heading">
<div class="title">Next 48 Hours</div>
<div class="select-style">
<select></select>
</div>
</div>
<div class="content">
<div class="item time"></div>
<div class="item temp"></div>
<div class="item icon">
<canvas id="next48h-icon"></canvas>
</div>
<div class="item summary"></div>
<div class="item humidity">
<i class="fa fa-tint"></i>
<span class="detail"></span>
</div>
</div>
</section>
<section class="next-7d my-box-shadow my-transition">
<div class="heading">
<div class="title">Next 7 Days</div>
<div class="select-style">
<select></select>
</div>
</div>
<div class="content">
<div class="item day"></div>
<div class="item temp"></div>
<div class="item icon">
<canvas id="next7d-icon"></canvas>
</div>
<div class="item summary"></div>
<div class="item humidity">
<i class="fa fa-tint"></i>
<span class="detail"></span>
</div>
</div>
</section>
<footer>
Made with <i class="fa fa-heart heart"></i> by
<a href="http://about.phamvanlam.com">Lam Pham</a>
</footer>
</div>
<div class="loading">
<div>
Please, waiting for retrieving your location and the local weather.
</div>
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/darkskyapp/skycons/master/skycons.js"></script>
<script src="./js/main.js"></script>
</body>
</html>