Давайте создадим папку wheatherApp, а внутри нее будет файл index.html, style.css и скопируем сюда папку с изображениями.
В файле index.html наберем стартовые теги. Изменю название и язык, а также подключу наш файл css:
Наше приложение будет похоже на карточку. Основой этой карточки будет тег div с id card.
Сначала в нашем приложении будут идти поле и кнопка поиска. Для этого создам div с id search, т.е. поиск. Далее будут идти теги инпут и батн. Внутри тега батн будет картинка. Итак, раздел поиска готов. Переходим к следующей части – это раздел с ошибкой, который будет появляться если мы наберем название города с ошибкой. Id будет error. Внутри будет тег абзаца с текстом Неверное название города.
Далее нам необходимо создать раздел с результатом поиска. Также буду использовать тег div, id у него будет weather.
Первым тегов внутри этого div будет тег image где будет отображаться картинка погоды. Для примера давайте поставим картинку дождя.
Затем будет заголовок с градусами. Далее будет h2 заголовок с названием города. А после названия города будет идти небольшой подраздел со скоростью ветра и влажностью.
Сперва создаем часть с влажностью. Давайте воспользуемся тегом section вместо див, чтобы не задавать ему отдельный класс или id.
Вначале будет идти картинка, а затем две строчки текста внутри div. Скопируем этот тег section и просто поменяем данные.
HTML код готов. Переходим к CSS.
Далее задаем темно серый цвет фона для тега боди.
Затем настроим наш тег div с id card.
Далее переходим к разделу с поиском:
Сделаем так чтобы поле прижалось к левому краю, а кнопка к правому. Этом можно сделать с помощью свойства джастифай контент и значения спейс битвин. Далее настроим поле ввода:
Далее настроим кнопку:
Зададим размер кнопки:
И также зададим размер картнике погоды и верхнее поле.
Далее зададим стили для названия города и температуры:
Переходим к тегу с id details
Далее задаем стили его внутренним тегам секшин:
Затем зададим стили для картинок и текста внутри тегов секшн.
Проверим, что у нас получается. Осталось скрыть ошибку и данные по погоде и показывать когда это будет нужно.
И еще зададим тексту ошибки выравнивание по левому краю и поля.
CSS готов. Теперь перейдем на сайт, откуда мы будем получать данные погоды. Он он называется openweathermap.org
Здесь переходим в раздел API. Регистрируемся. Заполняем данные. Укажу что я использую их айпи для обучения. Теперь переходим в почту, туда должна прийти ссылка для подтверждения регистрации.
Далее выбираем api keys и копируем наш ключ.
Теперь заходим в API и ищем айпи Current Weather data
Жмем на кнопку API Doc. И ищем адрес запроса к Api, т.е. айпи кол. А вот и он.
В данном адресе вот этот текст является запросом к api, а далее идут параметры и их значения разделенными знаком &. Здесь написано какие параметры являются обязательными, а какие опциональными. Вместо долготы и ширины мы можем использовать параметр q и название города, хоть здесь этого не написано, но данный параметр есть в других айпи и применив его здесь он тоже заработал.
Также нам понадобятся units это единицы измерения, где мы укажем метрик, и нас интересует русский язык в параметре лэнг.
Итак начинаем набирать наш javascript код. Сперва создадим две константы, где будет наш айпи ключ и адрес запроса к айпи с некоторыми параметрами.
Далее создадим константы, чтобы получить доступ к поле ввода, кнопке, и картинке погоды.
Теперь создадим асинхронную функцию, назовем ее чекВезер. Параметром у нее будет название города.
Далее с помощью ключевого слова await обратимся к Api. И результат сохраним в константу с именем RESPONSE. Назвали мы её респонз, так как именно объект с таким именем вернет промис от функции fetch.
Если мы введем город неверный город, или просто что-то пойдет не так, то свойство status объекта респонс будет иметь значение 404. Если статус будет 404 то мы должны показать ошибку и скрыть данные погоды, если они отображены. Напишем этот код.
А если все пошло хорошо, и мы получили данные погоды города, то преобразуем полученные json данные в объект. Используем ключевое слово await, чтобы остиальной код не выполнялся пока текст джейсон не преобразуется в объект. И присвоим этот объект константе data.
Далее выведем объект в консоль. Теперь сделаем так, чтобы при клике на кнопку сработала эта функция, и мы увидели как получить доступ к необходимым свойствам.
Итак нам нужно свойство name, свойства temp и humidity которые находятся во внутреннем объекте main, а также свойство speed которое находится во внутреннем объекте wind, т.е. ветер.
Теперь возьмем эти данные и присвоим в виде текста необходимым тегам.
Для температуры мы используем свойство иннерхтмл так как хотим отобразись знак градуса, который введем как код html. Коды знаков можно найти в интернете, и код для отображения значка градусов выглядит так.
Теперь мы должны взять значение погоды из массива Везер, который содержит объект, в котором нам нужно свойство мейн. У свойства мейн может быть несколько значений – клаудс т.е. облачно, клир – т.е. ясно, рейн дождливо, дризл пасурно и мист туман.
В зависимости от этого значения будем выводить картинку на экран с помощью условного оператора свитч.
В конце осталось написать код чтобы данные погоды отображались, если введен верный город, и скрылась ошибка, если она была показана.
Здесь конечно можно было бы воспользоваться условным оператором if чтобы проверить была ли показана ошибка до нового запроса или скрыт ли див с айди везер, но и без них код будет работать корректно.
Проверим наше приложение. И всё работает! На этом урок заканчивается. До встречи на следующих уроках.
Домашнее задание. Добавьте в наше приложение прогноз погоды еще данные: данные об уровне над морем (данное значение находится в main – sea_level, и давление (main – pressure)).
