Skip to content

Commit efe9ada

Browse files
Divi03devvsakib
Divi03
and
devvsakib
authored
Current Weather (#55)
* Add files via upload * Update app.js Co-authored-by: DevvSakib <devvsakib@gmail.com>
1 parent 62df04a commit efe9ada

File tree

3 files changed

+200
-0
lines changed

3 files changed

+200
-0
lines changed

‎CurrentWeather/app.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// api.openweathermap.org/data/2.5/weather?q={city name}&appid={your api key}
2+
3+
const weatherApi = {
4+
key: "bab281d79e5f1e9755a68d754cc313e7",
5+
baseUrl: "https://api.openweathermap.org/data/2.5/weather",
6+
}
7+
8+
const searchInputBox = document.getElementById('input-box');
9+
10+
// Event Listener Function on keypress
11+
searchInputBox.addEventListener('keypress', (event) => {
12+
13+
if(event.keyCode == 13) {
14+
getWeatherReport(searchInputBox.value);
15+
document.querySelector('.weather-body').style.display = "block";
16+
}
17+
18+
});
19+
20+
// Get Weather Report
21+
function getWeatherReport(city) {
22+
fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`)
23+
.then(weather => {
24+
return weather.json();
25+
}).then(showWeatherReport);
26+
}
27+
28+
// Show Weather Report
29+
function showWeatherReport(weather){
30+
31+
let city = document.getElementById('city');
32+
city.innerText = `${weather.name}, ${weather.sys.country}`;
33+
34+
let temperature = document.getElementById('temp');
35+
temperature.innerHTML = `${Math.round(weather.main.temp)}&deg;C`;
36+
37+
let minMaxTemp = document.getElementById('min-max');
38+
minMaxTemp.innerHTML = `${Math.floor(weather.main.temp_min)}&deg;C (min)/ ${Math.ceil(weather.main.temp_max)}&deg;C (max) `;
39+
40+
let weatherType = document.getElementById('weather');
41+
weatherType.innerText = `${weather.weather[0].main}`;
42+
43+
let date = document.getElementById('date');
44+
let todayDate = new Date();
45+
date.innerText = dateManage(todayDate);
46+
47+
let weather_iconEl = document.getElementById('weather-icon');
48+
weather_iconEl.innerHTML = `<img src="http://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png">
49+
<div class="weather" id="weather">${weather.weather[0].main}</div>
50+
`
51+
let cityname = `${weather.name}` ;
52+
document.body.style.background = "url('https://source.unsplash.com/1600x900/?" + cityname +"') no-repeat"
53+
document.body.style.backgroundSize = "cover"
54+
}
55+
56+
// Date manage
57+
function dateManage(dateArg) {
58+
59+
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
60+
61+
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
62+
63+
let year = dateArg.getFullYear();
64+
let month = months[dateArg.getMonth()];
65+
let date = dateArg.getDate();
66+
let day = days[dateArg.getDay()];
67+
68+
return `${date} ${month} (${day}), ${year}`;
69+
}
70+

‎CurrentWeather/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
<link rel="stylesheet" href="styles.css">
7+
<title>Weather App</title>
8+
</head>
9+
<body>
10+
<div class="app-main">
11+
<div class="searchInputBox">
12+
<input type="text" id="input-box" class="input-box" placeholder="Location..." autocomplete="off">
13+
</div>
14+
15+
<div class="weather-body">
16+
<div class="location-details">
17+
<div class="city" id="city"><!--Mandi, IN--></div>
18+
<div class="date" id="date"><!--2 March (Wednesday), 2021--></div>
19+
</div>
20+
21+
<div class="weather-status">
22+
<div class="temp" id="temp"></div>
23+
<div class="min-max" id="min-max"></div>
24+
<div class= "icon-name" id="weather-icon">
25+
<img src="">
26+
<div class="weather" id="weather"><!--Sunny--></div>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
32+
<script src="app.js"></script>
33+
</body>
34+
</html>

‎CurrentWeather/styles.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: url('https://source.unsplash.com/1600x900/?weather') no-repeat;
9+
overflow:hidden;
10+
background-size:cover;
11+
background-position: top center;
12+
font-family: Arial, Helvetica, sans-serif;
13+
}
14+
15+
.app-main {
16+
width: 50vh;
17+
margin: 100px auto;
18+
background-color: rgba(240,248,255, 0.6);
19+
padding: 20px;
20+
text-align: center;
21+
}
22+
23+
.app-main > * {
24+
margin-bottom: 20px;
25+
}
26+
27+
.input-box {
28+
width: 100%;
29+
background-color: rgba(255,255,255,0.6);
30+
border: none;
31+
outline: none;
32+
color: #582233;
33+
font-size: 1.2rem;
34+
height: 50px;
35+
border-radius: 5px;
36+
padding: 0 10px;
37+
text-align: center;
38+
}
39+
40+
.input-box:focus {
41+
background-color: rgba(255,255,255);
42+
}
43+
44+
45+
.weather-body {
46+
display: none;
47+
color: #582233;
48+
padding: 20px;
49+
line-height: 2rem;
50+
border-radius: 10px;
51+
background-color: rgba(255,255,255,0.6);
52+
height: 50vh;
53+
}
54+
55+
.location-details {
56+
font-weight: bold;
57+
}
58+
59+
60+
.weather-status {
61+
padding: 1px;
62+
}
63+
64+
.temp {
65+
font-size: 50pt;
66+
font-weight: 700;
67+
margin: 20px 0;
68+
text-shadow: 2px 4px rgba(0,0,0,0.3);
69+
}
70+
71+
div #weather.weather{
72+
margin: -30px;
73+
padding: 5px;
74+
}
75+
76+
77+
.weather-status{
78+
display: flex;
79+
justify-content: center;
80+
align-items: center;
81+
flex-direction: column;
82+
}
83+
84+
.weather-status .icon-name{
85+
background: #7e7e7e5e;
86+
border-radius:20px;
87+
width: fit-content;
88+
}
89+
90+
91+
92+
.min-max, .weather {
93+
margin: 5px;
94+
font-size: 12pt;
95+
font-weight: 600;
96+
}

0 commit comments

Comments
 (0)