Skip to content

Commit 989c9b3

Browse files
ht-l1ht-l1
committed
implemented dynamic chart and redesigned background
1 parent 789c0f2 commit 989c9b3

File tree

4 files changed

+131
-20
lines changed

4 files changed

+131
-20
lines changed

‎README.md

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
# Deployment
44

5-
I've deployed my site here:
5+
I've deployed my site here:
66
🚀[https://ht-l1.github.io/weather/](https://ht-l1.github.io/weather/)
77

88
Please ensure you allow the browser to know your location as the weather info is user location specific:
@@ -12,6 +12,7 @@ Please ensure you allow the browser to know your location as the weather info is
1212

1313
A weather app that shows the current temperature and condition based on user location using the Open-Meteo API. It is built using JavaScript, HTML, and CSS.
1414
It offers a few key features:
15+
1516
- a client-side JavaScript snippet that allows a user to see the weather condition based on their own geography
1617
- a server-side API that fetches the weather information from Open-Meteo.com
1718
- a web application that displays the captured information for each user
@@ -23,16 +24,28 @@ It offers a few key features:
2324

2425
## Project Timeline
2526

26-
Milestone 2: Implementations and Design (Completed by October 28th)
27+
Milestone 3: Implementation and Redesign (Completed by November 5th, 2024)
28+
29+
- Added dynamic chart to show temperature trend with relative dates
30+
- Redesigned the animated background
31+
32+
Milestone 2: Implementations and Design (Completed by October 28th, 2023)
33+
2734
- Redesigned the home page
28-
- Added the light dark theme toggle
35+
- Added the light dark theme toggle
2936
- Added fun facts section
30-
31-
Milestone 1: Framework Setup and API Fetching (Completed by October 4th)
37+
38+
Milestone 1: Framework Setup and API Fetching (Completed by October 4th, 2023)
39+
3240
- Set up the basic framework for the weather app
3341
- Implemented functionality to fetch temperature and wind speed data from the API
3442

3543
## Website Screenshot
44+
45+
Release 2\
46+
<img src="https://github.com/user-attachments/assets/834a63ef-58b5-4ebc-b23d-f322eb4c517d" width="30%" >
47+
48+
Release 1\
3649
<img src="https://github.com/ht-l1/weather/assets/106502799/9fc3dd2f-238f-4d7c-8305-aeac43c3fae8" width="30%" >
3750
<img src="https://github.com/ht-l1/weather/assets/106502799/f38c80e6-e145-4f5b-8106-4d6bf3c3d2b4" width="32.5%" >
3851
<img src="https://github.com/ht-l1/weather/assets/106502799/a0f41dbb-1912-46a3-b482-a80c101418e1" width="30%" >

‎index.html

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,40 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="styles.css">
8+
9+
<!-- font -->
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Bonbon&display=swap" rel="stylesheet">
13+
814
<script src="https://kit.fontawesome.com/f2df0e5efa.js" crossorigin="anonymous"></script>
915
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10-
<title>Weather App</title>
16+
<title>Weather Now</title>
17+
1118
</head>
1219

1320
<body>
1421
<div class="wrapper">
1522
<div id="weather-container">
16-
<h1>Weather Now&nbsp;</h1>
23+
<h1 style="
24+
font-family: 'Bonbon', cursive;
25+
font-size: 3rem;
26+
color: #0077be;
27+
text-align: center;
28+
padding: 20px;
29+
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
30+
letter-spacing: 1px;
31+
background: linear-gradient(45deg, rgb(152, 101, 152), rgb(210, 164, 210));
32+
-webkit-background-clip: text;
33+
background-clip: text;
34+
color: transparent;
35+
">Weather Now&nbsp;</h1>
1736

37+
<div id="theme-toggler">
1838
<!-- add toggle for themes -->
19-
<button id="theme-toggler">
39+
<button>
2040
<i id="theme-icon" class="fa-regular fa-sun"></i> Toggle Theme
21-
</button>
41+
</button></div>
2242
<p></p>
2343
<p></p>
2444

@@ -57,7 +77,7 @@ <h1>Weather Now&nbsp;</h1>
5777

5878

5979
<!-- animated -->
60-
<div class="box">
80+
<!-- <div class="box">
6181
<div></div>
6282
<div></div>
6383
<div></div>
@@ -68,7 +88,15 @@ <h1>Weather Now&nbsp;</h1>
6888
<div></div>
6989
<div></div>
7090
<div></div>
71-
</div>
91+
</div> -->
92+
93+
<!-- second animated -->
94+
<div class="center">
95+
<h1>
96+
97+
</h1>
98+
</div>
99+
72100
</div>
73101
</body>
74102

‎script.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,13 @@ async function updateChart(days) {
7676
{
7777
label: 'Max Temperature',
7878
data: maxTemps,
79-
borderColor: 'red',
79+
borderColor: '#FF6B6B',
8080
fill: false
8181
},
8282
{
8383
label: 'Min Temperature',
8484
data: minTemps,
85-
borderColor: 'blue',
85+
borderColor: '#4ECDC4',
8686
fill: false
8787
}
8888
]
@@ -92,7 +92,12 @@ async function updateChart(days) {
9292
title: {
9393
display: true,
9494
text: 'Temperature Trend'
95-
}
95+
},
96+
plugins: {
97+
legend: {
98+
labels: {
99+
usePointStyle: true, // enable the use of point style in the legend
100+
pointStyle: 'dash' }}}
96101
}
97102
});
98103
}

‎styles.css

Lines changed: 71 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
body {
22
font-family: Arial, sans-serif;
3-
/* background-color: #f0f0f0; */
43
background-color: #222222;
54
padding: 20px;
6-
color: #DEE4E7;
7-
/* toggle theme */
5+
/* color: #DEE4E7; */
86
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
97
}
108

9+
/* .lilita-one-regular {
10+
font-family: "Lilita One", sans-serif;
11+
font-weight: 400;
12+
font-style: normal;
13+
} */
14+
15+
1116
/* toggle theme */
1217
.light-theme {
1318
background-color: white;
@@ -47,10 +52,19 @@ hr {
4752
border-radius: 10px;
4853
padding: 20px;
4954
max-width: 400px;
55+
/* outline: dashed 1px lightgrey; */
5056
margin: auto;
5157
/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
5258
}
5359

60+
#theme-toggler {
61+
/* background-color: black; */
62+
display: flex;
63+
flex-direction: column;
64+
justify-content: center;
65+
align-items: center;
66+
}
67+
5468
h1 {
5569
margin-bottom: 20px;
5670
}
@@ -98,7 +112,7 @@ a:link {
98112
}
99113

100114
a:visited {
101-
color: pink;
115+
/* color: pink; */
102116
background-color: transparent;
103117
text-decoration: none;
104118
}
@@ -120,7 +134,7 @@ a:active {
120134
#chart-container {
121135
width: 80%;
122136
margin: 20px auto;
123-
background-color: #9490cb;
137+
/* background-color: #9490cb; */
124138
}
125139

126140
#time-toggle {
@@ -139,7 +153,7 @@ a:active {
139153

140154

141155
/* animated */
142-
body {
156+
/* body {
143157
margin: 0;
144158
padding: 0;
145159
}
@@ -232,4 +246,55 @@ body {
232246
border-radius: 50%;
233247
opacity: 0;
234248
}
249+
} */
250+
251+
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200');
252+
253+
body {
254+
background-image: url('https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg');
255+
background-size:cover;
256+
-webkit-animation: slidein 100s;
257+
animation: slidein 100s;
258+
259+
-webkit-animation-fill-mode: forwards;
260+
animation-fill-mode: forwards;
261+
262+
-webkit-animation-iteration-count: infinite;
263+
animation-iteration-count: infinite;
264+
265+
-webkit-animation-direction: alternate;
266+
animation-direction: alternate;
267+
}
268+
269+
@-webkit-keyframes slidein {
270+
from {background-position: top; background-size:3000px; }
271+
to {background-position: -100px 0px;background-size:2750px;}
272+
}
273+
274+
@keyframes slidein {
275+
from {background-position: top;background-size:3000px; }
276+
to {background-position: -100px 0px;background-size:2750px;}
277+
278+
}
279+
280+
.center
281+
{
282+
display: flex;
283+
align-items: center;
284+
justify-content: center;
285+
position: absolute;
286+
margin: auto;
287+
top: 0;
288+
right: 0;
289+
bottom: 0;
290+
left: 0;
291+
background: rgba(75, 75, 250, 0.3);
292+
border-radius: 3px;
293+
pointer-events: none;
294+
}
295+
.center h1{
296+
text-align:center;
297+
color:white;
298+
font-family: 'Source Code Pro', monospace;
299+
text-transform:uppercase;
235300
}

0 commit comments

Comments
 (0)