El siguiente enfoque cubre cómo crear una aplicación meteorológica en Vanilla JavaScript utilizando Open Weather Map API. Usando esta API, podemos obtener datos meteorológicos para cada coordenada.
Configuración del proyecto:
- Paso 1: Ahora vaya a https://openweathermap.org/ y cree una cuenta y obtenga su CLAVE API.
- Paso 2: después de eso, puede crear una carpeta y agregar un archivo, por ejemplo, un archivo index.html y script.js.
- Paso 3: podemos obtener coordenadas geográficas utilizando los siguientes enfoques:
- API de llamada por coordenadas geográficas: latitud y longitud
- API de llamadas por ID de ciudad
api.openweathermap.org/data/2.5/weather?id={id de la ciudad}&appid={clave API}
api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={clave API}
Ejemplo:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--The CSS styling-->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(rgb(123, 184, 104), rgb(13, 87, 10));
font-size: 2rem;
font-family: sans-serif;
color: rgb(7, 9, 10);
}
.container {
height: 20rem;
width: 15rem;
background-color: rgb(152, 228, 165);
text-align: center;
padding-top: 12px;
border-radius: 16px;
border: 2px solid rgb(14, 43, 1);
}
</style>
</head>
<body>
<div class="container">
<div class="icon">---</div>
<div class="temp">-°C</div>
<div class="summary">----</div>
<div class="location"></div>
</div>
<!--Linking the javascript code-->
<script src="script.js"></script>
</body>
</html>
script.js
// Declaring the variables
let lon;
let lat;
let temperature = document.querySelector(".temp");
let summary = document.querySelector(".summary");
let loc = document.querySelector(".location");
let icon = document.querySelector(".icon");
const kelvin = 273;
window.addEventListener("load", () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
console.log(position);
lon = position.coords.longitude;
lat = position.coords.latitude;
// API ID
const api = "6d055e39ee237af35ca066f35474e9df";
// API URL
const base =
`http://api.openweathermap.org/data/2.5/weather?lat=${lat}&` +
`lon=${lon}&appid=6d055e39ee237af35ca066f35474e9df`;
// Calling the API
fetch(base)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
temperature.textContent =
Math.floor(data.main.temp - kelvin) + "°C";
summary.textContent = data.weather[0].description;
loc.textContent = data.name + "," + data.sys.country;
let icon1 = data.weather[0].icon;
icon.innerHTML =
`<img src="icons/${icon1}.svg" style= 'height:10rem'/>`;
});
});
}
});
Producción:
Referencia: https://openweathermap.org/current
Publicación traducida automáticamente
Artículo escrito por debjani1413 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA