Skip to content

Commit 63be2e3

Browse files
jblancohjblancoh
committed
feat(WeatherApp): Add weather app by city; add functions and request with javascript and html
1 parent 0ae5049 commit 63be2e3

File tree

3 files changed

+139
-2
lines changed

3 files changed

+139
-2
lines changed

‎medium/weather_app/app.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
const getWeatherByCity = async ({ lat, lon }) => {
3+
try {
4+
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=345abeeda579c1925297918d1e6e5511`);
5+
const data = await response.json();
6+
return data;
7+
} catch (error) {
8+
return error
9+
}
10+
}
11+
12+
const getCityData = async (city) => {
13+
try {
14+
const response = await fetch(`http://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=1&appid=345abeeda579c1925297918d1e6e5511`);
15+
const data = await response.json();
16+
if (data.length === 0) {
17+
return {message: 'City not found'}
18+
}
19+
return getWeatherByCity(data?.[0])
20+
} catch (error) {
21+
return error
22+
}
23+
}

‎medium/weather_app/index.html‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,52 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document</title>
7+
<link rel="stylesheet" href="style.css">
8+
<!-- link fonts robot api-->
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
10+
<title>Weather info</title>
811
</head>
912
<body>
10-
13+
<div class="container">
14+
<div class="container-data">
15+
<input type="text" id="city" placeholder="Enter city name">
16+
<input id="get-city" type="button" value="Get weather info" disabled>
17+
<span id="city-name"></span>
18+
<span id="city-date"></span>
19+
<span id="city-temp"></span>
20+
<span id="city-weather"></span>
21+
<span id="city-temp-min"></span>
22+
</div>
23+
</div>
24+
<script type="text/javascript" src="app.js">
25+
</script>
26+
<script>
27+
const title = document.getElementById("city-name");
28+
const button = document.getElementById("get-city");
29+
document.getElementById('city-date').innerHTML = new Date().toLocaleString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
30+
document.getElementById('city').addEventListener('keyup', function() {
31+
if (document.getElementById('city').value.length > 0) {
32+
button.disabled = false;
33+
} else {
34+
button.disabled = true;
35+
}
36+
});
37+
button.addEventListener("click", () => {
38+
const city = document.getElementById("city").value;
39+
getCityData(city)
40+
.then((data) => {
41+
if(data.message){
42+
return document.getElementById('city-weather').innerHTML = data.message
43+
}
44+
document.getElementById('city-temp').innerHTML = `${data.main.temp} °C`;
45+
document.getElementById('city-weather').innerHTML = data.weather[0].main;
46+
document.getElementById('city-temp-min').innerHTML = `${data.main.temp_min} °C / ${data.main.temp_max} °C`;
47+
title.innerHTML = `${city}, ${data.sys.country}`;
48+
})
49+
.catch((error) => {
50+
alert.apply("City not found");
51+
});
52+
});
53+
</script>
1154
</body>
1255
</html>

‎medium/weather_app/style.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body {
2+
font-family: 'Roboto';
3+
margin: 0;
4+
color: #fff;
5+
}
6+
.container {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
justify-content: center;
11+
height: 100vh;
12+
width: 100vw;
13+
background-image: url("https://picsum.photos/seed/190/1024");
14+
background-size: cover;
15+
background-repeat: no-repeat;
16+
}
17+
18+
.container-data {
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: space-around;
23+
height: 70vh;
24+
padding: 10px;
25+
}
26+
27+
h2 {
28+
font-size: 2rem;
29+
font-weight: 400;
30+
color: #333;
31+
}
32+
33+
input {
34+
width: 200px;
35+
height: 30px;
36+
border: 1px solid #ccc;
37+
border-radius: 5px;
38+
padding: 5px;
39+
}
40+
41+
input[type="button"] {
42+
background-color: #4CAF50;
43+
color: white;
44+
padding: 5px 10px;
45+
border: none;
46+
border-radius: 4px;
47+
cursor: pointer;
48+
}
49+
50+
#city-temp {
51+
font-size: 4rem;
52+
font-weight: 400;
53+
}
54+
55+
#city-name {
56+
font-size: 2rem;
57+
font-weight: 400;
58+
color: #333;
59+
}
60+
61+
#city-date {
62+
font-size: 1.5rem;
63+
font-weight: 400;
64+
}
65+
66+
#city-weather,
67+
#city-temp-min {
68+
font-size: 1.5rem;
69+
font-weight: 400;
70+
color: #333;
71+
}

0 commit comments

Comments
 (0)