Разработка приложения для недельного прогноза погоды

Введение

В этом проекте вы научитесь создавать приложение для прогноза погоды, которое отображает недельную информацию о погоде для определенного места. Проект включает получение данных о погоде из API, разбор ответа и динамическое обновление HTML-элементов для представления прогноза погоды пользователю.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• Получать данные о прогнозе погоды из API с использованием функциональности AJAX библиотеки jQuery
• Привязывать полученные данные к соответствующим HTML-элементам на веб-странице
• Отображать недельную информацию о прогнозе погоды в удобочитаемом формате

🏆 Достижения

После завершения этого проекта вы сможете:

• Создать простое приложение для прогноза погоды, которое предоставляет пользователям недельную информацию о погоде
• Разобраться, как отправлять AJAX-запросы для получения данных из API
• Показать способность манипулировать DOM и обновлять HTML-элементы с использованием jQuery

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── images        ## ресурсы изображений
├── js            ## директория для js-файлов и json-файлов
├── index.html    ## страница с прогнозом погоды
├── style.css     ## css-файл

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Получение данных о прогнозе погоды

В этом шаге вы научитесь получать недельные данные о прогнозе погоды для города W с использованием предоставленного API.

1. Откройте файл js/index.js в вашем редакторе кода.
2. Найдите функцию getweather(), которая отвечает за получение данных о прогнозе погоды.
3. Внутри функции getweather() используйте метод $.get() библиотеки jQuery для отправки GET-запроса по адресу API js/weather.json.

// TODO
$.get("js/weather.json", function (data) {
  // Привяжите данные о прогнозе погоды к HTML-элементам
  //...
});

4. Данные ответа от API будут переданы в функцию обратного вызова в качестве параметра data. Эти данные содержат недельную информацию о прогнозе погоды.

Привязать данные о прогнозе погоды к HTML

В этом шаге вы научитесь связывать полученные данные о прогнозе погоды с соответствующими HTML-элементами на странице.

1. Внутри функции обратного вызова метода $.get() найдите код, где вы будете связывать данные с HTML.
2. Используйте jQuery для выбора необходимых HTML-элементов, таких как иконка погоды, описание погоды, температура и информация о ветре.

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. Код выше перебирает массив data.result, который содержит недельную информацию о прогнозе погоды. Для каждого элемента он выбирает соответствующие HTML-элементы и обновляет их содержимое данными из ответа API.
4. Сохраните изменения в файле js/index.js.
5. Обновите веб-страницу, и вы должны увидеть недельную информацию о прогнозе погоды, отображенную, как показано на целевой картинке.

Поздравляем! Вы успешно завершили проект по прогнозу погоды, получив данные из API и привязав их к HTML-элементам на странице.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.