Как создать погодное приложение для новичков с помощью Open Weather API ?

Здравствуйте, уважаемый «кандидат в разработчики».
Я начинающий программист и начинающий писатель, поэтому я, вероятно, лучше вас утешу, чем старший разработчик, поскольку мы занимаем схожие должности.
Я хотел бы поделиться с вами своим первым погодным приложением и своим решением.

Во-первых, я хотел бы заявить, что я поставил перед собой задачу заполнить заявку, не заглядывая в онлайн-ресурсы (не поймите меня неправильно, 80% программирования, вероятно, проверяет что-то в Интернете. Тем не менее, я считаю, что это хорошая идея иногда бросать себе вызов )

Начнем с того, что это приложение и как оно выглядит. Теперь давайте углубимся в детали и узнаем, как создать подобное приложение.

Как обычно мы начинаем с выбора элементов, с которыми будем работать.
Нам нужен ввод, чтобы достичь введенного значения, отправить, чтобы добавить событие клика, и предупреждение для отображения предупреждения в случае пустых или недопустимых значений.

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

Мы собираемся передать событие нажатия кнопки отправки, чтобы мы могли использовать метод .addEventListener. Первое, что нам нужно обработать, — это пустые запросы и отобразить «предупреждающее» сообщение для пользователя. Мы можем проверить это, проверив, является ли input.value === «» или нет. Однако есть более элегантный способ сделать это, просто сказав if(!input.value), что можно перевести так, как если бы входное значение было истинным значением. Мы можем просто написать предупреждающее сообщение как innerText. Поскольку я не хотел, чтобы предупреждение отображалось в течение длительного времени, я создал функцию setTimeout, чтобы настроить innerText обратно на пустое значение.

Все остальное будет происходить внутри блока else.
Сначала я создаю функцию с именем getTheCity(), где я получаю данные из API. Я использовал fetch API, но вы можете просто использовать Axios или Async Await.
Поскольку я хочу войти в API, чтобы получить город, который пользователь вводит на экране, я могу просто использовать input.value внутри литералов шаблона. Обязательно используйте метод toLowerCase(), чтобы не создавать головной боли при проверке повторяющихся значений внутри массива.

Для простоты я не стал слишком много заниматься обработкой ошибок и написал всего лишь простую строку кода, где я проверяю, возвращается ли ответ (res) в порядке или нет. Обычно API возвращает ответ не в порядке (ответ, не начинающийся с кода 200) в случае недопустимых записей, поэтому я решил отобразить простое предупреждение пожалуйста, введите действительный город. Конечно, вы можете изменить его и сделать обработку ошибок более эффективной. Как вы уже знаете, я использовал простой setTimeout для очистки внутреннего текста элемента предупреждения.
Вне блока if обязательно преобразуйте ответ в объект javascript с помощью метода .json().

Теперь, когда у нас есть достоверные данные, мы можем использовать .then() для обработки данных и отображения того, что мы хотим отобразить. Однако перед обработкой всех условий в данных мы должны создать функцию для отображения городов.
Мы вернемся к этой части и подробно объясним ее после создания функции.

Я решил вызвать функцию displayTheCity и ввести параметр данные. Во-первых, нам нужно выбрать пустой weatherContainer, который мы создали внутри HTML. (Это ссылка моего репозитория, так что вы можете просто скопировать и вставить оттуда HTML и CSS).
Всегда полезно деструктурировать объект вместо того, чтобы использовать точки или квадратные скобки для получения значения.< br /> Вот очень полезная ссылка MDN, чтобы узнать больше о деструктуризации.

Я европеец, и мы используем градусы Цельсия для измерения температуры, поэтому я преобразовал значение Кельвина по умолчанию в градусы Цельсия. Если вы американец, вы, конечно, можете использовать шкалу Фаренгейта. Вот ссылка Reddit на страны, в которых используется шкала Фаренгейта. Видишь, это только ты.

Поскольку нам просто нужно название города, чтобы проверить, является ли город повторяющимся значением, достаточно поместить название города в массив. Я советую вам использовать метод toLowerCase(), так будет легче проверять повторяющиеся значения.

Я создал карточку раньше и просто скопировал ее в файл innerHTML weatherContainer. Обратите внимание, как я использовал литералы шаблонов и деструктурированные переменные для генерации новых значений каждый раз, когда запрос отправляется на сервер. Я использовал имя, степень, описание страны и значки в качестве элементов, которые хотел отобразить. Вы можете получить значки из моего репозитория, который я прикреплю в конце статьи.
Я хотел, чтобы каждый раз, когда я ищу город, отображаемая карта была первой в очереди, поэтому я использовал (+ weatherContainer.innerHTML) в конце обратных кавычек.

Теперь, когда у нас есть наша функция, пришло время вернуться к нашей функции и объяснить ее условия. Во-первых, мы деструктурируем имя, так как оно нам нужно для проверки повторяющихся значений. Мы можем проверить это с помощью встроенного метода .includes(). Если город уже существует, будет показано короткое предупреждающее сообщение, которое будет удалено через 3 секунды с помощью метода setTimeout(). Это необязательно, но я установил максимальное количество 4 городов для отображения в целях стилизации. Вы можете полностью игнорировать это условие или изменить его по своему желанию. Наконец, если ни одно из предыдущих условий не выполняется, мы можем отобразить город, вызвав только что созданную функцию displayTheCity().

Непосредственно под созданной нами функцией displayTheCity() мы можем вызвать функцию getTheCity(), а затем сбросить значение нашего ввода на «пустое». Обязательно вызовите функцию внутри начального блока else.

Если вы хотите, вы также можете дать функциональность элементу ввода, добавив eventListener. Во-первых, вы должны решить, какую клавишу вы собираетесь использовать при вызове функции (я решил использовать клавишу «Enter», ). Простой (event.code === «Enter») сделает работу. Поскольку мы уже предоставили всю функциональность кнопке отправки, мы можем просто вызвать ее с помощью метода click().

Здесь вы проверяете репозиторий и получаете стили, разметку и значки. Обратите внимание, что вы также можете использовать значки по умолчанию, но те, которые я использовал, более стильные. Я на самом деле скачал их после поиска в Интернете. Вы также можете создавать свои значки самостоятельно.
Пожалуйста, свяжитесь со мной по любым вопросам, и я также открыт для запросов на вытягивание.