Skip to content

Commit 9cbccb5

Browse files
Vatsal2054Vatsal2054
authored
Merge pull request #47 from PriyanshuValiya/main
Add graphical representation of 5-day forecast temperatures.
2 parents 34dfd67 + f1933e6 commit 9cbccb5

File tree

3 files changed

+147
-93
lines changed

3 files changed

+147
-93
lines changed

‎chart.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const data = JSON.parse(sessionStorage.getItem("forecastData")).list;
2+
3+
function getDayName(dateString) {
4+
const date = new Date(dateString);
5+
return date.toLocaleDateString("en-US", { weekday: "long" });
6+
}
7+
8+
if (data) {
9+
(async function () {
10+
new Chart(document.getElementById("myChart"), {
11+
type: "line",
12+
data: {
13+
labels: data.map((row) => getDayName(row.dt_txt.slice(0, 10))),
14+
datasets: [
15+
{
16+
label: "Temp ",
17+
data: data.map((row) => row.main.temp),
18+
},
19+
],
20+
},
21+
options: {
22+
scales: {
23+
y: {
24+
min: 0,
25+
max: 50,
26+
},
27+
},
28+
},
29+
});
30+
})();
31+
}

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" href="https://i.pinimg.com/originals/87/9e/00/879e002a9082b4d32901840cb70c0929.gif">
67
<link rel="stylesheet" href="./css/style.css">
78
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
89
<title>Weather.io</title>

‎weather_info.html‎

Lines changed: 115 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,133 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link rel="stylesheet" href="./css/information.css">
8-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="https://i.pinimg.com/originals/87/9e/00/879e002a9082b4d32901840cb70c0929.gif">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="./css/information.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
11+
/>
912
<title>Weather Information</title>
10-
</head>
13+
</head>
1114

12-
<body>
15+
<body>
1316
<div class="weather-container">
14-
<div id="weather-data" class="visible">
15-
<div class="city-info">
16-
<h2 id="city-name"></h2>
17-
<p id="current-date"></p>
17+
<div id="weather-data" class="visible">
18+
<div class="city-info">
19+
<h2 id="city-name"></h2>
20+
<p id="current-date"></p>
21+
</div>
22+
23+
<main>
24+
<section class="current-weather">
25+
<h3><i class="fas fa-temperature-high"></i> Current Weather</h3>
26+
<div id="weather-info" class="weather-details">
27+
<div class="weather-icon">
28+
<i id="weather-icon" class="fas fa-sun fa-4x"></i>
29+
</div>
30+
<div class="weather-text">
31+
<p id="temperature" class="temperature"></p>
32+
<p id="weather-desc" class="description"></p>
33+
</div>
1834
</div>
35+
</section>
1936

20-
<main>
21-
<section class="current-weather">
22-
<h3><i class="fas fa-temperature-high"></i> Current Weather</h3>
23-
<div id="weather-info" class="weather-details">
24-
<div class="weather-icon">
25-
<i id="weather-icon" class="fas fa-sun fa-4x"></i>
26-
</div>
27-
<div class="weather-text">
28-
<p id="temperature" class="temperature"></p>
29-
<p id="weather-desc" class="description"></p>
30-
</div>
31-
</div>
32-
</section>
37+
<section class="forecast">
38+
<h3><i class="fas fa-calendar-alt"></i> 5-Day Forecast</h3>
39+
<div id="forecast-info" class="forecast-container">
40+
<div id="forecasts" class="forecasts-row">
41+
<div class="forecast-card sunny">
42+
<h4 class="day">Monday, October 21</h4>
43+
<div class="weather-content">
44+
<div class="temp">24°C</div>
45+
<i class="fas fa-cloud-sun fa-3x icon"></i>
46+
</div>
47+
<p class="status">Partly Cloudy</p>
48+
</div>
49+
<div class="forecast-card cloudy">
50+
<h4 class="day">Tuesday, October 21</h4>
3351

34-
<section class="forecast">
35-
<h3><i class="fas fa-calendar-alt"></i> 5-Day Forecast</h3>
36-
<div id="forecast-info" class="forecast-container">
37-
<div id="forecasts" class="forecasts-row">
38-
<div class="forecast-card sunny">
39-
<h4 class="day">Monday, October 21</h4>
40-
<div class="weather-content">
41-
<div class="temp">24°C</div>
42-
<i class="fas fa-cloud-sun fa-3x icon"></i>
43-
</div>
44-
<p class="status">Partly Cloudy</p>
45-
</div>
46-
<div class="forecast-card cloudy">
47-
<h4 class="day">Tuesday, October 21</h4>
52+
<div class="weather-content">
53+
<div class="temp">22°C</div>
54+
<i class="fas fa-cloud fa-3x icon"></i>
55+
</div>
56+
<p class="status">Cloudy</p>
57+
</div>
58+
<div class="forecast-card rainy">
59+
<h4 class="day">Wednesday, October 21</h4>
4860

49-
<div class="weather-content">
50-
<div class="temp">22°C</div>
51-
<i class="fas fa-cloud fa-3x icon"></i>
52-
</div>
53-
<p class="status">Cloudy</p>
54-
</div>
55-
<div class="forecast-card rainy">
56-
<h4 class="day">Wednesday, October 21</h4>
61+
<div class="weather-content">
62+
<div class="temp">20°C</div>
63+
<i class="fas fa-cloud-rain fa-3x icon"></i>
64+
</div>
65+
<p class="status">Rainy</p>
66+
</div>
67+
<div class="forecast-card snowy">
68+
<h4 class="day">Thursday, October 21</h4>
5769

58-
<div class="weather-content">
59-
<div class="temp">20°C</div>
60-
<i class="fas fa-cloud-rain fa-3x icon"></i>
61-
</div>
62-
<p class="status">Rainy</p>
63-
</div>
64-
<div class="forecast-card snowy">
65-
<h4 class="day">Thursday, October 21</h4>
70+
<div class="weather-content">
71+
<div class="temp">-2°C</div>
72+
<i class="fas fa-snowflake fa-3x icon"></i>
73+
</div>
74+
<p class="status">Snowy</p>
75+
</div>
76+
<div class="forecast-card stormy">
77+
<h4 class="day">Friday, October 21</h4>
6678

67-
<div class="weather-content">
68-
<div class="temp">-2°C</div>
69-
<i class="fas fa-snowflake fa-3x icon"></i>
70-
</div>
71-
<p class="status">Snowy</p>
72-
</div>
73-
<div class="forecast-card stormy">
74-
<h4 class="day">Friday, October 21</h4>
79+
<div class="weather-content">
80+
<div class="temp">18°C</div>
81+
<i class="fas fa-bolt fa-3x icon"></i>
82+
</div>
83+
<p class="status">Stormy</p>
84+
</div>
85+
</div>
86+
</div>
87+
</section>
7588

76-
<div class="weather-content">
77-
<div class="temp">18°C</div>
78-
<i class="fas fa-bolt fa-3x icon"></i>
79-
</div>
80-
<p class="status">Stormy</p>
81-
</div>
82-
</div>
83-
</div>
84-
</section>
89+
<section class="forecast">
90+
<h3>
91+
<i
92+
class="fa-solid fa-chart-line"
93+
style="
94+
height: 30px;
95+
width: 30px;
96+
font-size: x-large;
97+
margin-right: 5px;
98+
"
99+
></i>
100+
Timeline Of Forecast
101+
</h3>
102+
<div id="chart" style="width: 100%">
103+
<canvas id="myChart"></canvas>
104+
</div>
105+
</section>
85106

86-
<section class="rain-humidity">
87-
<h3><i class="fas fa-tint"></i> Rain & Humidity</h3>
88-
<div id="rain-humidity-info" class="weather-details">
89-
<div class="detail-item">
90-
<i class="fas fa-umbrella"></i>
91-
<p id="chance-of-rain"></p>
92-
</div>
93-
<div class="detail-item">
94-
<i class="fas fa-water"></i>
95-
<p>Humidity :</p>
96-
<p id="humidity"></p>
97-
</div>
98-
</div>
99-
</section>
100-
</main>
101-
</div>
107+
<section class="rain-humidity">
108+
<h3><i class="fas fa-tint"></i> Rain & Humidity</h3>
109+
<div id="rain-humidity-info" class="weather-details">
110+
<div class="detail-item">
111+
<i class="fas fa-umbrella"></i>
112+
<p id="chance-of-rain"></p>
113+
</div>
114+
<div class="detail-item">
115+
<i class="fas fa-water"></i>
116+
<p>Humidity :</p>
117+
<p id="humidity"></p>
118+
</div>
119+
</div>
120+
</section>
121+
</main>
122+
</div>
102123

103-
<footer>
104-
<p>&copy; 2024 Weather.io. All rights reserved.</p>
105-
</footer>
124+
<footer>
125+
<p>&copy; 2024 Weather.io. All rights reserved.</p>
126+
</footer>
106127
</div>
107128

108129
<script src="./index.js"></script>
109-
</body>
110-
130+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
131+
<script src="./chart.js"></script>
132+
</body>
111133
</html>

0 commit comments

Comments
 (0)