Skip to content

Commit 7790945

Browse files
tejan-singhtejan-singh
authored
Merge pull request #314 from Mukulbaid63/wf_1
Weather Forecast Added
2 parents a4d3bc7 + dc36f22 commit 7790945

File tree

5 files changed

+165
-0
lines changed

5 files changed

+165
-0
lines changed

‎JavaScript/WeatherForecast/Capture.JPG

38.7 KB
Loading

‎JavaScript/WeatherForecast/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
## Weather Forecast App:
2+
- This app is built using HTML,CSS and Javascript is a Weather Forecast App.
3+
- It automatically detects the location of the user if the browser supports the geolocation.
4+
- It displays the location, temperature, weather and the wind-speed and direction.
5+
6+
![Image](Capture.jpg)
7+
8+
- If the browser doesn't supports geolocation, a notification appears on the screen for it.
9+
10+
### OpenWeatherMap API is used to get the weather data

‎JavaScript/WeatherForecast/app.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
var temp = {
2+
key: "87cde31000e5170290cebdd94820d23d",
3+
base: "https://api.openweathermap.org/data/2.5/"
4+
}
5+
var notificationElement = document.querySelector(".notification");
6+
if (navigator.geolocation) {
7+
navigator.geolocation.getCurrentPosition(setPosition);
8+
notificationElement.innerHTML = "";
9+
10+
}
11+
else {
12+
notificationElement.innerHTML = "Geolocation is not supported by this browser.";
13+
}
14+
15+
function setPosition(position){
16+
let latitude = position.coords.latitude;
17+
let longitude = position.coords.longitude;
18+
19+
getWeather(latitude, longitude);
20+
}
21+
function getWeather(lat,lon) {
22+
fetch(`${temp.base}weather?lat=${lat}&lon=${lon}&units=metric&appid=${temp.key}`)
23+
.then(weather => {
24+
return weather.json();
25+
}).then(displayResults);
26+
}
27+
28+
function displayResults (weather) {
29+
let city = document.querySelector('.location .city');
30+
city.innerText = `${weather.name}, ${weather.sys.country}`;
31+
32+
let temp = document.querySelector('.current .temp');
33+
temp.innerHTML =`${Math.round(weather.main.temp)}<span>°C</span>`
34+
35+
let weather_el = document.querySelector('.current .weather');
36+
weather_el.innerText = weather.weather[0].main;
37+
38+
let wind=document.querySelector('.wind-speed');
39+
wind.innerText=weather.wind.speed;
40+
41+
let deg=document.querySelector('.wind-degree');
42+
deg.innerText=weather.wind.deg;
43+
44+
}
45+
46+
47+

‎JavaScript/WeatherForecast/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
6+
<title>Weather Forecast</title>
7+
8+
<link rel="stylesheet" href="style.css">
9+
<script src="app.js"></script>
10+
</head>
11+
<body>
12+
13+
<div class="container">
14+
<div class="app-wrap">
15+
16+
17+
<section class="location">
18+
<div class="notification">Geolocation not supported by the browser</div>
19+
<div class="city">-</div>
20+
</section>
21+
<div class="current">
22+
<div class="temp">-<span>°c</span></div>
23+
<div class="weather">-</div>
24+
25+
<div class="speed">Wind-speed:<span class="wind-speed">-</span> m/s</div>
26+
<div class="degree">Wind-degree:<span class="wind-degree">-</span> degrees</div>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<script src="app.js"></script>
32+
</body>
33+
</html>

‎JavaScript/WeatherForecast/style.css

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-size: cover;
9+
background-position: top center;
10+
}
11+
12+
13+
.app-wrap {
14+
display: flex;
15+
flex-direction: column;
16+
17+
}
18+
19+
header {
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
padding: 50px 15px 15px;
24+
}
25+
26+
header input {
27+
width: 100%;
28+
max-width: 280px;
29+
padding: 10px 15px;
30+
outline: none;
31+
font-size: 20px;
32+
font-weight: 300;
33+
transition: 0.2s ease-out;
34+
}
35+
36+
header input:focus {
37+
background-color: rgba(255, 255, 255, 0.6);
38+
}
39+
40+
.container {
41+
flex: 1 1 100%;
42+
padding: 25px 25px 50px;
43+
display: flex;
44+
flex-direction: column;
45+
align-items: center;
46+
text-align: center;
47+
}
48+
49+
.location {
50+
color: #000;
51+
font-size: 16px;
52+
}
53+
54+
.current .temp {
55+
color: #000;
56+
font-size: 102px;
57+
font-weight: 900;
58+
margin: 30px 0px;
59+
}
60+
61+
.current .temp span {
62+
font-weight: 400;
63+
}
64+
65+
66+
.city {
67+
font-size: 30px;
68+
font-weight: bolder;
69+
}
70+
.current {
71+
color: #000;
72+
font-size: 22px;
73+
font-weight: normal;
74+
margin-bottom: 15px;
75+
}

0 commit comments

Comments
 (0)