Skip to content

Commit 2c87544

Browse files
Navkaran0Navkaran0
authored
Add files via upload
0 parents  commit 2c87544

File tree

12 files changed

+232
-0
lines changed

12 files changed

+232
-0
lines changed

‎Weather-App-main/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 Tan Jia Hui
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎Weather-App-main/images/clear.png

6.43 KB
Loading

‎Weather-App-main/images/clouds.png

12.4 KB
Loading

‎Weather-App-main/images/drizzle.png

10.1 KB
Loading

‎Weather-App-main/images/humidity.png

1.59 KB
Loading

‎Weather-App-main/images/mist.png

11.9 KB
Loading

‎Weather-App-main/images/rain.png

5.7 KB
Loading

‎Weather-App-main/images/search.png

1.52 KB
Loading

‎Weather-App-main/images/snow.png

10.8 KB
Loading

‎Weather-App-main/images/wind.png

2.15 KB
Loading

‎Weather-App-main/index.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Online Weather Application</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="card">
11+
<h1 class="title">Check City Weather</h1>
12+
<div class="search">
13+
<input type="text" placeholder="Enter city name" spellcheck="false">
14+
<button><img src="images/search.png"></button>
15+
</div>
16+
<div class="error">
17+
<p>Invalid city name</p>
18+
</div>
19+
<div class="weather">
20+
<img src="images/rain.png" alt="weather icon" class="weather-icon">
21+
<h1 class="temp">20°C</h1>
22+
<h2 class="city">New York</h2>
23+
<div class="details">
24+
<div class="col">
25+
<img src="images/humidity.png" alt="humidity icon">
26+
<div>
27+
<p class="humidity">50%</p>
28+
<p>Humidity</p>
29+
</div>
30+
</div>
31+
<div class="col">
32+
<img src="images/wind.png" alt="wind icon">
33+
<div>
34+
<p class="wind">15 KM/H</p>
35+
<p>Wind Speed</p>
36+
</div>
37+
</div>
38+
</div>
39+
40+
</div>
41+
</div>
42+
<script>
43+
const apiKey = "312abfd953c970ceaf81f671079f6e22";
44+
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
45+
const searchBox = document.querySelector(".search input");
46+
const searchBtn = document.querySelector(".search button");
47+
const weatherIcon = document.querySelector(".weather-icon");
48+
49+
async function checkWeather(city){
50+
const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
51+
52+
if(response.status == 404){
53+
document.querySelector(".error").style.display = "block";
54+
document.querySelector(".weather").style.display = "none";
55+
}else{
56+
//variable data contains all weather information from apiUrl
57+
var data = await response.json(); //object that contains method for parsing values and convert values to JSON
58+
59+
//queryselector returns first element within document that matches specified selector, if no matches are found null is returned
60+
//innerHTML = gets/sets HTML markup contained within the element
61+
//in this case it will search for the class city, select the h2 element and replace the city name
62+
document.querySelector(".city").innerHTML = data.name;
63+
document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°C";
64+
document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
65+
document.querySelector(".wind").innerHTML = data.wind.speed + "km/h";
66+
67+
if(data.weather[0].main == "Clouds")
68+
{
69+
weatherIcon.src = src = "images/clouds.png";
70+
}
71+
else if(data.weather[0].main == "Clear"){
72+
weatherIcon.src = src = "images/clear.png";
73+
}
74+
else if(data.weather[0].main == "Rain"){
75+
weatherIcon.src = src = "images/rain.png";
76+
}
77+
else if(data.weather[0].main == "Drizzle"){
78+
weatherIcon.src = src = "images/drizzle.png";
79+
}
80+
else if(data.weather[0].main == "Mist"){
81+
weatherIcon.src = src = "images/mist.png";
82+
}
83+
else if(data.weather[0].main == "Snow"){
84+
weatherIcon.src = src = "images/snow.png";
85+
}
86+
else{
87+
weatherIcon.src = src = "images/wind.png";
88+
}
89+
90+
document.querySelector(".weather").style.display = "block"; // block the display element -> display weather
91+
document.querySelector(".error").style.display = "none";
92+
}
93+
}
94+
95+
searchBtn.addEventListener("click", ()=>{
96+
checkWeather(searchBox.value);
97+
})
98+
</script>
99+
</body>
100+
</html>

‎Weather-App-main/style.css

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins', sans-serif;
5+
box-sizing: border-box;
6+
}
7+
8+
body{
9+
background: #222;
10+
}
11+
12+
.card{
13+
width: 90%;
14+
max-width: 470px;
15+
background: linear-gradient(135deg, #00feba, #5b548a);
16+
color: #fff; /*text colour*/
17+
margin: 25px auto 25px; /*left right auto top 100 bottom 0*/
18+
border-radius: 20px; /*make border round*/
19+
padding: 40px 35px;
20+
text-align: center;
21+
}
22+
23+
.search{
24+
width: 100%;
25+
display: flex; /*Displays an element as a block-level flex container */
26+
align-items: center;
27+
justify-content: space-between; /* distributes space between and around content items along the main-axis of a flex container */
28+
}
29+
30+
.search input{
31+
border: 0;
32+
outline: 0;
33+
background: #ebfffc;
34+
color: #555;
35+
padding: 10px 25px;
36+
height: 60px;
37+
border-radius: 30px;
38+
flex: 1; /*Grow and take all available space within container */
39+
margin-right: 16px;
40+
font-size: 18px;
41+
}
42+
43+
.search button{
44+
border: 0;
45+
outline: 0;
46+
background: #ebfffc;
47+
border-radius: 50%;
48+
width: 60px;
49+
height: 60px;
50+
cursor: pointer;
51+
}
52+
53+
.search button img{
54+
width:16px;
55+
}
56+
57+
.weather-icon{
58+
width: 170px;
59+
margin-top: 30px;
60+
}
61+
62+
.weather h1{
63+
font-size: 80px;
64+
font-weight: 500;
65+
}
66+
67+
.weather h2{
68+
font-size: 80px;
69+
font-weight: 500;
70+
margin-top: -10px;
71+
}
72+
73+
.details{
74+
display: flex; /*to create 2 column */
75+
align-items: center;
76+
justify-content: space-between;
77+
padding: 0 20px; /*20px for left and right */
78+
margin-top: 50px;
79+
}
80+
81+
.col{
82+
display: flex;
83+
align-items: center;
84+
text-align: left;
85+
}
86+
87+
.col img{
88+
width: 40px;
89+
margin-right: 10px;
90+
}
91+
92+
.humidity, .wind{
93+
font-size: 28px;
94+
margin-top: -6px;
95+
}
96+
97+
.weather{
98+
display: none;
99+
}
100+
101+
.error{
102+
text-align: left;
103+
margin-left: 10px;
104+
font-size: 14px;
105+
margin-top: 10px;
106+
display: none;
107+
}
108+
109+
.title {
110+
margin-bottom: 20px;
111+
}

0 commit comments

Comments
 (0)