Desarrollo de una aplicación de pronóstico del tiempo semanal

Introducción

En este proyecto, aprenderás a crear una aplicación de pronóstico del tiempo que muestre la información meteorológica semanal de una ubicación específica. El proyecto implica obtener datos meteorológicos de una API, analizar la respuesta y actualizar dinámicamente los elementos HTML para presentar el pronóstico del tiempo al usuario.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo obtener datos de pronóstico del tiempo de una API utilizando la funcionalidad AJAX de jQuery
• Cómo vincular los datos obtenidos a los elementos HTML correspondientes en la página web
• Cómo mostrar la información de pronóstico del tiempo semanal en un formato amigable para el usuario

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Crear una simple aplicación de pronóstico del tiempo que proporcione a los usuarios información meteorológica semanal
• Comprender cómo hacer solicitudes AJAX para obtener datos de una API
• Demostrar la capacidad de manipular el DOM y actualizar elementos HTML utilizando jQuery

Configura la estructura del proyecto

En este paso, establecerás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── images        ## recursos de imágenes
├── js            ## directorio para archivos js y archivos json
├── index.html    ## página de pronóstico del tiempo
├── style.css     ## archivo css

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Obtén los datos de pronóstico del tiempo

En este paso, aprenderás a obtener los datos de pronóstico del tiempo semanal para W-town utilizando la API proporcionada.

1. Abre el archivo js/index.js en tu editor de código.
2. Localiza la función getweather(), que se encarga de obtener los datos de pronóstico del tiempo.
3. Dentro de la función getweather(), utiliza el método $.get() de jQuery para realizar una solicitud GET al punto final de la API js/weather.json.

// TODO
$.get("js/weather.json", function (data) {
  // Vincula los datos de pronóstico del tiempo a los elementos HTML
  //...
});

4. Los datos de respuesta de la API se pasarán a la función de devolución de llamada como el parámetro data. Estos datos contienen la información de pronóstico del tiempo semanal.

Asocia los datos de pronóstico del tiempo con el HTML

En este paso, aprenderás a vincular los datos de pronóstico del tiempo obtenidos a los elementos HTML correspondientes en la página.

1. Dentro de la función de devolución de llamada del método $.get(), localiza el código donde vincularás los datos al HTML.
2. Utiliza jQuery para seleccionar los elementos HTML necesarios, como el icono del tiempo, la descripción del tiempo, la temperatura y la información del viento.

function getweather() {
  // TODO
  $.get("js/weather.json", function (data) {
    let item = $(".item");
    let img, one, two, three, time;
    for (let i = 0; i < data.result.length; i++) {
      img = item[i].children[0];
      one = item[i].children[1].children[0];
      two = item[i].children[1].children[1];
      three = item[i].children[1].children[2];
      time = item[i].children[1].children[3].children;
      img.src = data.result[i].weather_icon;
      one.innerText = data.result[i].weather;
      two.innerText = data.result[i].temperature;
      three.innerText = data.result[i].winp;
      time[0].innerText = data.result[i].days;
      time[1].innerText = data.result[i].week;
    }
  });
}

3. El código anterior itera a través del array data.result, que contiene la información de pronóstico del tiempo semanal. Para cada elemento, selecciona los elementos HTML correspondientes y actualiza su contenido con los datos de la respuesta de la API.
4. Guarda los cambios en el archivo js/index.js.
5. Actualiza la página web, y deberías ver la información de pronóstico del tiempo semanal mostrada como se muestra en la imagen objetivo.

¡Felicidades! Has completado con éxito el proyecto de pronóstico del tiempo al obtener los datos de la API y vincularlos a los elementos HTML de la página.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.