Skip to content

Commit f89dfa1

Browse files
iamnikhilranjaniamnikhilranjan
committed
Day 24: Solved
1 parent c4caff3 commit f89dfa1

File tree

4 files changed

+262
-133
lines changed

4 files changed

+262
-133
lines changed

‎24_weather_app/index.html

+42-45
Original file line numberDiff line numberDiff line change
@@ -5,55 +5,52 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="styles.css">
8-
9-
<title>Document</title>
8+
<title>5 Days Weather Forecast</title>
109
</head>
1110
<body onload="DefaultScreen()">
12-
<center>
13-
<h1 id="Para1">5 Days Weather Forecast</h1>
14-
<p id="inputContainer">City: <input type="text" id="cityInput"></p>
15-
<button type="button" onclick="GetInfo()">Click Me</button>
16-
<h2 id="cityName">---London---</h2>
17-
</center>
18-
19-
<div id = "weatherContainer">
20-
<div id="iconsContainer">
21-
<div class = "icons">
22-
<p class="weather" id="day1"></p>
23-
<div class="image"><img src="dots.png" class="imgClass" id="img1"></div>
24-
<p class="minValues" id="day1Min">Loading...</p>
25-
<p class="maxValues" id="day1Max">Loading...</p>
26-
</div>
27-
<div class = "icons">
28-
<p class="weather" id="day2"></p>
29-
<div class="image"><img src="dots.png" class="imgClass" id="img2"></div>
30-
<p class="minValues" id="day2Min">Loading...</p>
31-
<p class="maxValues" id="day2Max">Loading...</p>
32-
</div>
33-
<div class = "icons">
34-
<p class="weather" id="day3"></p>
35-
<div class="image"><img src="dots.png" class="imgClass" id="img3"></div>
36-
<p class="minValues" id="day3Min">Loading...</p>
37-
<p class="maxValues" id="day3Max">Loading...</p>
38-
</div>
39-
<div class = "icons">
40-
<p class="weather" id="day4"></p>
41-
<div class="image"><img src="dots.png" class="imgClass" id="img4"></div>
42-
<p class="minValues" id="day4Min">Loading...</p>
43-
<p class="maxValues" id="day4Max">Loading...</p>
44-
</div>
45-
<div class = "icons">
46-
<p class="weather" id="day5"></p>
47-
<div class="image"><img src="dots.png" class="imgClass" id="img5"></div>
48-
<p class="minValues" id="day5Min">Loading...</p>
49-
<p class="maxValues" id="day5Max">Loading...</p>
11+
<div class="container">
12+
<header>
13+
<h1 id="Para1">5 Days Weather Forecast</h1>
14+
<div id="inputContainer">CITY: <input type="text" id="cityInput" ></div>
15+
<button type="button" onclick="GetInfo()">Click here</button>
16+
<h2 id="cityName">---London---</h2>
17+
</header>
18+
19+
<div id="weatherContainer">
20+
<div id="iconsContainer">
21+
<div class="icons">
22+
<p class="weather" id="day1"></p>
23+
<div class="image"><img src="dots.png" class="imgClass" id="img1"></div>
24+
<p class="minValues" id="day1Min">Loading...</p>
25+
<p class="maxValues" id="day1Max">Loading...</p>
26+
</div>
27+
<div class="icons">
28+
<p class="weather" id="day2"></p>
29+
<div class="image"><img src="dots.png" class="imgClass" id="img2"></div>
30+
<p class="minValues" id="day2Min">Loading...</p>
31+
<p class="maxValues" id="day2Max">Loading...</p>
32+
</div>
33+
<div class="icons">
34+
<p class="weather" id="day3"></p>
35+
<div class="image"><img src="dots.png" class="imgClass" id="img3"></div>
36+
<p class="minValues" id="day3Min">Loading...</p>
37+
<p class="maxValues" id="day3Max">Loading...</p>
38+
</div>
39+
<div class="icons">
40+
<p class="weather" id="day4"></p>
41+
<div class="image"><img src="dots.png" class="imgClass" id="img4"></div>
42+
<p class="minValues" id="day4Min">Loading...</p>
43+
<p class="maxValues" id="day4Max">Loading...</p>
44+
</div>
45+
<div class="icons">
46+
<p class="weather" id="day5"></p>
47+
<div class="image"><img src="dots.png" class="imgClass" id="img5"></div>
48+
<p class="minValues" id="day5Min">Loading...</p>
49+
<p class="maxValues" id="day5Max">Loading...</p>
50+
</div>
5051
</div>
5152
</div>
5253
</div>
53-
54-
55-
<script src="main.js"></script>
56-
57-
54+
<script src="script.js"></script>
5855
</body>
5956
</html>

‎24_weather_app/script.js

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
function GetInfo() {
2+
3+
var newName = document.getElementById("cityInput");
4+
var cityName = document.getElementById("cityName");
5+
cityName.innerHTML = newName.value.toUpperCase();
6+
7+
fetch('https://api.openweathermap.org/data/2.5/forecast?q='+newName.value+'&appid=3b660235bde751da6d75632d555bf8e3')
8+
.then(response => response.json())
9+
.then(data => {
10+
11+
//Getting the min and max values for each day
12+
for(i = 0; i<5; i++){
13+
document.getElementById("day" + (i+1) + "Min").innerHTML = "Min: " + Number(data.list[i].main.temp_min - 273.15).toFixed(1)+ "°";
14+
//Number(1.3450001).toFixed(2); // 1.35
15+
}
16+
17+
for(i = 0; i<5; i++){
18+
document.getElementById("day" + (i+1) + "Max").innerHTML = "Max: " + Number(data.list[i].main.temp_max - 273.15).toFixed(2) + "°";
19+
}
20+
//------------------------------------------------------------
21+
22+
//Getting Weather Icons
23+
for(i = 0; i<5; i++){
24+
document.getElementById("img" + (i+1)).src = "http://openweathermap.org/img/wn/"+
25+
data.list[i].weather[0].icon
26+
+".png";
27+
}
28+
//------------------------------------------------------------
29+
console.log(data)
30+
31+
32+
})
33+
34+
.catch(err => alert("Something Went Wrong: Try Checking Your Internet Coneciton"))
35+
}
36+
37+
function DefaultScreen(){
38+
document.getElementById("cityInput").defaultValue = "London";
39+
GetInfo();
40+
}
41+
42+
43+
//Getting and displaying the text for the upcoming five days of the week
44+
var d = new Date();
45+
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday",];
46+
47+
//Function to get the correct integer for the index of the days array
48+
function CheckDay(day){
49+
if(day + d.getDay() > 6){
50+
return day + d.getDay() - 7;
51+
}
52+
else{
53+
return day + d.getDay();
54+
}
55+
}
56+
57+
function formatDate(date) {
58+
const options = { day: 'numeric', month: 'short' };
59+
return new Intl.DateTimeFormat('en-US', options).format(date);
60+
}
61+
62+
function getNextDate(baseDate, daysToAdd) {
63+
const date = new Date(baseDate);
64+
date.setDate(date.getDate() + daysToAdd);
65+
return date;
66+
}
67+
68+
const today = new Date();
69+
for (let i = 0; i < 5; i++) {
70+
const currentDate = getNextDate(today, i);
71+
if (i === 0) {
72+
document.getElementById("day" + (i+1)).innerHTML = `${weekday[CheckDay(i)]}<br/><span style="font-size: 0.75em;">Today</span>`;
73+
} else {
74+
document.getElementById("day" + (i+1)).innerHTML = `${weekday[CheckDay(i)]}<br/><span style="font-size: 0.75em;">${formatDate(currentDate)}</span>`;
75+
}
76+
}
77+
78+

0 commit comments

Comments
 (0)