Skip to content

Commit bc97079

Browse files
nandini7637nandini7637
authored
Merge pull request Dezenix#120 from Atif0604/Atif1
Added Weather App
2 parents 964dcf2 + 81babc6 commit bc97079

File tree

5 files changed

+211
-0
lines changed

5 files changed

+211
-0
lines changed

‎Weather-App/Readme.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Snake Game
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
8+
![preview](https://user-images.githubusercontent.com/64218887/153142472-95000b65-0b7f-429d-82f8-0d0b850b3883.png)

‎Weather-App/index.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Weather App</title>
8+
<link rel="preconnect" href="https://fonts.gstatic.com">
9+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
10+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
11+
<link rel= "icon" href= "https://image.flaticon.com/icons/png/128/1146/1146869.png">
12+
<link rel="stylesheet" href="./style.css">
13+
14+
</head>
15+
16+
<body class ="body">
17+
<div>
18+
<div class="card">
19+
<div class="search">
20+
<input type="text" class="search-bar" placeholder="Search">
21+
<button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
22+
width="1.5em" xmlns="http://www.w3.org/2000/svg">
23+
<path
24+
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">
25+
</path>
26+
</svg></button>
27+
</div>
28+
<div class="weather loading">
29+
<h2 class="city">Weather in Denver</h2>
30+
<h1 class="temp">51°C</h1>
31+
<div class="flex">
32+
<img src="https://openweathermap.org/img/wn/04n.png" alt="" class="icon" />
33+
<div class="description">Cloudy</div>
34+
</div>
35+
<div class="humidity">Humidity: 60%</div>
36+
<div class="wind">Wind speed: 6.2 km/h</div>
37+
</div>
38+
</div>
39+
<br>
40+
<br>
41+
<div class="footer">
42+
<h4 >Designed & Developed with &#10084;&#65039; by Atif</h4>
43+
</div>
44+
<script src="./script.js" defer></script>
45+
</body>
46+
47+
</html>
48+

‎Weather-App/preview.png

970 KB
Loading

‎Weather-App/script.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
let weather = {
2+
apiKey: "67b92f0af5416edbfe58458f502b0a31",
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) => {
11+
if (!response.ok) {
12+
alert("No weather found.");
13+
throw new Error("No weather found.");
14+
}
15+
return response.json();
16+
})
17+
.then((data) => this.displayWeather(data));
18+
},
19+
displayWeather: function (data) {
20+
const { name } = data;
21+
const { icon, description } = data.weather[0];
22+
const { temp, humidity } = data.main;
23+
const { speed } = data.wind;
24+
document.querySelector(".city").innerText = "Weather in " + name;
25+
document.querySelector(".icon").src =
26+
"https://openweathermap.org/img/wn/" + icon + ".png";
27+
document.querySelector(".description").innerText = description;
28+
document.querySelector(".temp").innerText = temp + "°C";
29+
document.querySelector(".humidity").innerText =
30+
"Humidity: " + humidity + "%";
31+
document.querySelector(".wind").innerText =
32+
"Wind speed: " + speed + " km/h";
33+
document.querySelector(".weather").classList.remove("loading");
34+
document.body.style.backgroundImage =
35+
"url('https://source.unsplash.com/1600x900/?" + name + "')";
36+
},
37+
search: function () {
38+
this.fetchWeather(document.querySelector(".search-bar").value);
39+
},
40+
};
41+
42+
document.querySelector(".search button").addEventListener("click", function () {
43+
weather.search();
44+
});
45+
46+
document
47+
.querySelector(".search-bar")
48+
.addEventListener("keyup", function (event) {
49+
if (event.key == "Enter") {
50+
weather.search();
51+
}
52+
});
53+
54+
weather.fetchWeather("Patna");
55+

‎Weather-App/style.css

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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/?nature,water,landscape");
10+
font-size: 120%;
11+
}
12+
13+
.card {
14+
background: #000000d0;
15+
color: white;
16+
padding: 2em;
17+
border-radius: 30px;
18+
width: 100%;
19+
max-width: 420px;
20+
margin: 1em;
21+
}
22+
23+
.search {
24+
display: flex;
25+
align-items: center;
26+
justify-content: 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+
input.search-bar {
43+
border: none;
44+
outline: none;
45+
padding: 0.4em 1em;
46+
border-radius: 24px;
47+
background: #7c7c7c2b;
48+
color: white;
49+
font-family: inherit;
50+
font-size: 105%;
51+
width: calc(100% - 100px);
52+
}
53+
54+
button:hover {
55+
background: #7c7c7c6b;
56+
}
57+
58+
h1.temp {
59+
margin: 0;
60+
margin-bottom: 0.4em;
61+
}
62+
63+
.flex {
64+
display: flex;
65+
align-items: center;
66+
}
67+
68+
.description {
69+
text-transform: capitalize;
70+
margin-left: 8px;
71+
}
72+
73+
.weather.loading {
74+
visibility: hidden;
75+
max-height: 20px;
76+
position: relative;
77+
}
78+
79+
.weather.loading:after {
80+
visibility: visible;
81+
content: "Loading...";
82+
color: white;
83+
position: absolute;
84+
top: 0;
85+
left: 20px;
86+
}
87+
88+
.footer {
89+
position: absolute;
90+
padding: 0.4rem !important;
91+
margin: 10px;
92+
border-color: inherit;
93+
border-style: solid;
94+
border-width: 0;
95+
background-color: #212529 !important;
96+
}
97+
.footer h4 {
98+
color: white;
99+
text-align: center;
100+
}

0 commit comments

Comments
 (0)