Weather App

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

---

Содержание

• Функционал
• Используемые технологии
• Особенности
• Проблемы в процессе разработки
• Недостатки в реализации проекта ❗❗❗
• To do
• Автор

Функционал

• Актуальная погода: Последние данные о погоде, включая температуру, влажность, скорость ветра и атмосферное давление.
• Почасовой прогноз: Температура, погодные условия и другие данные на ближайшие часы.
• Прогноз на 3 дня: Подробный прогноз на три дня, включая температуру, влажность, скорость ветра и атмосферное давление.
• Карта: Визуализация местоположения выбранного города на карте.

Используемые технологии

• HTML/CSS: Структура и стилизация приложения.
• JavaScript: Получение и отображение данных о погоде.
• Weather API: WeatherAPI используется для получения данных о погоде.
• Static API: Яндекс карты API для генерации изображения карты.

Особенности

• БЭМ, семантика, адаптив.
• Отзывчивая вёрстка: размеры всех элементов — включая текст, отступы и тд. — реагируют на изменение ширины экрана.
• Добавлен preloader при загрузке карты, т.к. она долго грузится.

Проблемы в процессе разработки

• Изначально для получения данных о погоде по API использовался севис OpenWeatherMap, однако сейчас есть проблемы с доступом к сервису из России (стабильно работает только с VPN). Решение — перешёл на другой сервис - WeatherAPI

Недостатки в реализации проекта

1. Частые манипуляции с DOM:
   • В коде многократно вызываются методы вроде document.querySelectorAll() и напрямую изменяется содержимое элементов DOM, что может быть дорогим с точки зрения рендеринга.
2. Излишние запросы к API:
   • Сейчас для плучения прогноза на сегодня по часам и прогноза на 3 дня используются два идентичных запроса, то есть можно использовать один запрос вместо двух.
   • Кроме того, для получения текущей погоды используется отдельный запрос, хотя в прогнозных данных сервис предоставляет и текущую погоду, нам не обязательно использовать специальный отдельный запрос для текущей погоды.
3. Отсутствие обработки ошибок:
   • В функциях, выполняющих запросы к API, отсутствует обработка ошибок. Если запрос завершится неудачей (например, из-за сетевой ошибки), это может привести к некорректной работе интерфейса.

To do

• Вынести все document.querySelector() из функций в переменные, чтобы мы не искали элементы каждый раз при вызове функции.
• Вместо трёх запросов к API оставить один.
• Добавить обработку ошибок.
• Добавить переключение на тёмную тему.

Автор

Денис Вакуленко:

• telegram
• e-mail