Proyecto JavaScript: crear una app que te diga si conviene lavar ropa según el clima

Cómo usar una API del clima con JavaScript (ejemplo práctico)

Las APIs meteorológicas son una excelente forma de aprender a consumir servicios REST utilizando JavaScript. En este proyecto creamos una pequeña herramienta que analiza el clima actual de tu ubicación y te da recomendaciones rápidas.

La aplicación consulta una API pública del clima y con base en la temperatura y la lluvia genera sugerencias como:

  • Si conviene lavar ropa
  • Si conviene lavar el coche
  • Si es buen día para caminar
  • Si es buen día para hacer ejercicio al aire libre

Además, la aplicación utiliza la geolocalización del navegador para detectar tu ubicación automáticamente.




API utilizada

Para este ejemplo utilizamos la API meteorológica gratuita de Open-Meteo:

https://api.open-meteo.com/v1/forecast

El endpoint permite consultar el clima actual enviando la latitud y longitud.

Ejemplo de llamada a la API

fetch("https://api.open-meteo.com/v1/forecast?latitude=19.4326&longitude=-99.1332&current_weather=true")

.then(res => res.json())

.then(data => {

  console.log(data.current_weather.temperature);

});

¿Cómo funciona la aplicación?

El flujo de la aplicación es el siguiente:

  • Se solicita permiso para acceder a la ubicación del usuario
  • Se obtienen las coordenadas GPS
  • Se consulta la API del clima
  • Se aplican reglas simples para generar recomendaciones

Este tipo de proyectos es ideal para aprender:

  • Consumo de APIs con JavaScript
  • Uso de fetch()
  • Geolocalización en el navegador
  • Manipulación del DOM
Para probar la página utiliza la siguiente url


En este blog también puedes encontrar otros ejemplos de APIs como:

Todos estos ejemplos muestran cómo integrar APIs públicas en proyectos reales.

Comentarios

🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!

Entradas más populares de este blog

Guía Práctica: Ejemplo Completo de ASPX para Desarrolladores Web

Macro en Word para automatizar documentos: genera diplomas en segundos (con código VBA)

API de banxico para obtener tipo de cambio utilizando Javascript