ycloud-school-weather-project

Название и уровень сложности

Умный сервис прогноза погоды. Средний уровень.

Язык программирования и технологии

Язык — JavaScript. Фреймворк — Vue.js (+ vuex).

Пользовательский интерфейс

Сайт.

Форма ответа.

С помощью API OpenWeather будут получены данные в формате JSON и вставлены в шаблон: «Мы определили ваш город как ${cityName}, ${region} Сейчас на улице ${weatherDesc}. Текущая температура составляет ${currentTemp}℃. Ощущается как ${feelsLike}. Максимум составит ${maxTemp}℃, а минимум — ${minTemp}℃. Текущая влажность — ${humidity}%. Ветер ${windSpeed} м/сек.»

Демонстрация (видео)

Loom

Алгоритм

Веб-приложение для получения информации о текущей погоде.

• Пользователь вводит название города в input
• При отправке формы обнуляются данные об ошибках, кодах ответа и погоде.
• Происходит проверка на длину строки, если строка меньше 2, то выводится ошибка, запрос не отправляется.
• Если длина строки равна или превышает 2, то отправляется GET запрос на сервер OpenWeather.
• Полученные данные о коде ответа (ошибках, если есть) и погоде сохраняются во vuex.
• Если есть ошибки, выводятся сообщения об ошибках. При отправленном запросе и наличии ошибки, о которой сообщает сервер, выводится ее код. При неотправленном запросе и других ошибках выводится тип ошибки и ее сообщение.
• При успешном запросе выводится сообщение о погоде (в шаблон подставляются данные с сервера, сохраненные в vuex).
• При нажатии на reset (кнопка с крестиком) обнуляются данные об ошибках и погоде, очищается поле ввода, на которое наводится фокус.

Как запустить

• Через консоль перейти в папку /dist и выполнить команду live-server (https://www.npmjs.com/package/live-server)
• При нежелании запускать live-server и установленном vue-cli можно запустить из корня проекта dev-версию через команду npm run serve