Skip to content

Commit 610c542

Browse files
PBJIPBJI
authored
Merge pull request #884 from Shuklaaa/master
Weather APP
2 parents 337916d + e4a9bae commit 610c542

File tree

4 files changed

+246
-0
lines changed

4 files changed

+246
-0
lines changed

‎WeatherApp/Shuklaaa/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
#Weather App
2+
3+
##Overview
4+
This is a simple weather app that provides current weather information for a location using data from a weather API. It is built using HTML, CSS, and JavaScript. The special thing about it is that the background image changes according to the search location.
5+
6+
##Features
7+
- Current weather information including temperature, description, and location.
8+
- Dynamic background image that changes based on the weather conditions.
9+
- Easy-to-use and intuitive user interface.
10+
11+
##SCREENSHOTS
12+
![image](https://github.com/Shuklaaa/javascript-mini-projects/assets/93446673/1b12e800-0e5c-46f3-8b67-aef5780c3c9a)
13+
![image](https://github.com/Shuklaaa/javascript-mini-projects/assets/93446673/0ac3cb4e-3972-4573-a297-1cdb17b26d26)
14+
![image](https://github.com/Shuklaaa/javascript-mini-projects/assets/93446673/6800e633-2a6a-4b3e-9de8-5a1560914479)
15+
16+

‎WeatherApp/Shuklaaa/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>WEATHER APP</title>
9+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="./style.css">
11+
<script src="./script.js" defer></script>
12+
</head>
13+
14+
<body>
15+
<div class="card">
16+
<div class="search">
17+
<input type="text" class="search-bar" placeholder="Enter name of City, State">
18+
<button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024"
19+
height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg">
20+
<path
21+
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
22+
</path>
23+
</svg></button>
24+
</div>
25+
<div class="weather loading">
26+
<h2 class="city">Weather in Denver</h2>
27+
<h1 class="temp">51°C</h1>
28+
<div class="flex">
29+
<img src="https://openweathermap.org/img/wn/04n.png" alt="" class="icon" />
30+
<div class="description">Cloudy</div>
31+
</div>
32+
<div class="humidity">Humidity: 60%</div>
33+
<div class="wind">Wind speed: 62km/h</div>
34+
</div>
35+
</div>
36+
</body>
37+
38+
</html>
39+

‎WeatherApp/Shuklaaa/script.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
let weather = {
2+
"apikey": "466ddaa21a8de191e9f608bd11a56acb",
3+
fetchWeather: function(city){
4+
fetch(
5+
"https://api.openweathermap.org/data/2.5/weather?q="
6+
+ city
7+
+ "&units=metric&appid="
8+
+ this.apikey
9+
)
10+
.then((response) => response.json())
11+
.then((data) => this.displayWeather(data));
12+
},
13+
14+
displayWeather: function(data){
15+
const{ name } = data;
16+
const{ icon, description } = data.weather[0];
17+
const{ temp, humidity } = data.main;
18+
const{ speed } = data.wind;
19+
// console.log(name,icon,description,temp,humidity,speed);
20+
document.querySelector(".city").innerText = "Weather in " + name;
21+
document.querySelector(".icon").src = "https://openweathermap.org/img/wn/"+ icon +".png";
22+
document.querySelector(".description").innerText = description;
23+
document.querySelector(".temp").innerText = temp +"°C";
24+
document.querySelector(".humidity").innerText = "Humidity: "+ humidity + "%";
25+
document.querySelector(".wind").innerText = "Wind speed: "+ speed + "km/h";
26+
document.querySelector(".weather").classList.remove("loading");
27+
document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?" + name + "')"
28+
},
29+
search: function(){
30+
this.fetchWeather(document.querySelector(".search-bar").value);
31+
}
32+
};
33+
34+
let geocode = {
35+
reverseGeocode: function (latitude ,longitude) {
36+
var api_key = '089943fd115440dbb4d95b091479e834';
37+
38+
var api_url = 'https://api.opencagedata.com/geocode/v1/json'
39+
40+
var request_url = api_url
41+
+ '?'
42+
+ 'key=' + api_key
43+
+ '&q=' + encodeURIComponent(latitude + ',' + longitude)
44+
+ '&pretty=1'
45+
+ '&no_annotations=1';
46+
47+
// see full list of required and optional parameters:
48+
// https://opencagedata.com/api#forward
49+
50+
var request = new XMLHttpRequest();
51+
request.open('GET', request_url, true);
52+
53+
request.onload = function() {
54+
// see full list of possible response codes:
55+
// https://opencagedata.com/api#codes
56+
57+
if (request.status === 200){
58+
// Success!
59+
var data = JSON.parse(request.responseText);
60+
weather.fetchWeather(data.results[0].components.city);
61+
62+
} else if (request.status <= 500){
63+
// We reached our target server, but it returned an error
64+
65+
console.log("unable to geocode! Response code: " + request.status);
66+
var data = JSON.parse(request.responseText);
67+
console.log('error msg: ' + data.status.message);
68+
} else {
69+
console.log("server error");
70+
}
71+
};
72+
73+
request.onerror = function() {
74+
// There was a connection error of some sort
75+
console.log("unable to connect to server");
76+
};
77+
78+
request.send(); // make the request
79+
},
80+
81+
getLocation: function(){
82+
function success(data){
83+
geocode.reverseGeocode(data.coords.latitude, data.coords.longitude);
84+
85+
86+
if(navigator.geolocation){
87+
navigator.geolocation.getCurrentPosition(success, console.error);
88+
}
89+
else{
90+
weather.fetchWeather("denver");
91+
}
92+
}
93+
}
94+
}
95+
96+
document.querySelector(".search button").addEventListener("click", function () {
97+
weather.search();
98+
});
99+
100+
document.querySelector(".search-bar").addEventListener("keyup", function(event) {
101+
if(event.key == 'Enter'){
102+
weather.search();
103+
}
104+
});
105+
106+
107+
geocode.getLocation();

‎WeatherApp/Shuklaaa/style.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
font-family: 'Open Sans', sans-serif;
8+
background: #222;
9+
background-image: url('https://source.unsplash.com/1600x900/?landscape');
10+
font-size: 120%;
11+
}
12+
13+
.card {
14+
background: #000000d0;
15+
color: white;
16+
padding: 2em;
17+
border-radius: 35px;
18+
width: 100%;
19+
max-width: 420px;
20+
margin: 1em;
21+
}
22+
23+
.search {
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
}
28+
29+
button {
30+
margin: 0.5em;
31+
border-radius: 50%;
32+
border: none;
33+
height: 44px;
34+
width: 44px;
35+
outline: none;
36+
background: #7c7c7c2b;
37+
color: white;
38+
cursor: pointer;
39+
transition: 0.2s ease-in-out;
40+
}
41+
42+
button:hover {
43+
background: #7c7c7c6b;
44+
}
45+
46+
input.search-bar {
47+
border: none;
48+
outline: none;
49+
padding: 0.4em 1em;
50+
border-radius: 24px;
51+
background: #7c7c7c2b;
52+
color: white;
53+
font-family: inherit;
54+
font-size: 105%;
55+
width: calc(100% - 100px);
56+
}
57+
58+
.flex{
59+
display: flex;
60+
text-align: center;
61+
}
62+
63+
.description{
64+
text-transform:capitalize;
65+
margin-top: 10px;
66+
}
67+
68+
.weather.loading{
69+
visibility: hidden;
70+
max-height: 20px;
71+
position: relative;
72+
}
73+
.weather.loading::after{
74+
visibility: visible;
75+
content: "Loading...";
76+
color: white;
77+
position: absolute;
78+
top: 0;
79+
}
80+
81+
h1.temp {
82+
margin: 0;
83+
margin-bottom: 0.5em;
84+
}

0 commit comments

Comments
 (0)