Добро пожаловать в захватывающее приключение по созданию погодного приложения, которое не только будет держать вас в курсе событий, но и пленит ваше сердце своей простотой и красотой. Мы все полагаемся на погодные приложения для планирования дня, так зачем же довольствоваться скучным и скучным дизайном? Давайте вместе отправимся в путешествие, в котором мы объединим возможности HTML, CSS и JavaScript для создания погодного приложения, которое не только предоставляет точные прогнозы, но и радует ваши глаза.
Не волнуйтесь, если вы новичок в программировании или опытный разработчик — эта запись в блоге для всех. Мы проведем вас через каждый шаг, гарантируя, что вы усвоите основы HTML для структурирования нашего приложения. Затем мы погрузимся в область CSS, где вдохнем жизнь в наш дизайн, превратив его в визуальный шедевр. И, наконец, мы воспользуемся магией JavaScript для получения данных о погоде в реальном времени и добавим интерактивности в наше приложение.
В этом руководстве мы будем делиться передовыми практиками и советами, которые не только помогут вам создать замечательное приложение погоды, но и углубят ваше понимание интерфейсной веб-разработки. К концу этого блога у вас будет погодное приложение, которое не только предоставляет точные прогнозы, но и демонстрирует ваши дизайнерские навыки.
Итак, давайте вместе отправимся в это путешествие, в котором мы объединим красоту и практичность, создав погодное приложение, которое оставит неизгладимое впечатление. Приготовьтесь создать что-то необычное — давайте погрузимся!
OpenWeatherMap
Прежде чем мы погрузимся в захватывающий процесс создания нашего погодного приложения, давайте уделим немного времени тому, чтобы понять, что он влечет за собой и почему ключ API имеет решающее значение для его функциональности.
Погодное приложение — это цифровое приложение, которое предоставляет пользователям актуальную информацию о погоде, включая температуру, влажность, скорость ветра и прогнозы. Используя возможности API (интерфейсов прикладного программирования), мы можем получать данные о погоде из надежных источников и беспрепятственно интегрировать их в наше приложение.
Для получения данных о погоде мы будем использовать API погоды. Ключ API действует как уникальный идентификатор, который позволяет нам подключаться к API погоды и получать нужную информацию. Думайте об этом как о цифровом паспорте, который предоставляет доступ к огромному хранилищу данных о погоде.
Помните, что ключ API является жизненно важным компонентом, обеспечивающим правильную работу вашего погодного приложения и получение точных данных.
Создайте ключ API:
- Посетите веб-сайт OpenWeatherMap (https://openweathermap.org/) и создайте бесплатную учетную запись, если у вас ее еще нет.
- После входа в систему перейдите в раздел «Ключи API». Вы можете получить к нему доступ, щелкнув свое имя пользователя в правом верхнем углу и выбрав «Ключи API» в раскрывающемся меню.
- На странице ключей API вы увидите форму, в которой вы можете создать новый ключ API. Введите имя для вашего ключа API в поле «Имя». Это может быть любое имя, которое поможет вам определить назначение ключа.
- Выберите нужные права доступа для вашего ключа API. OpenWeatherMap предлагает различные уровни доступа, включая Free, Startup, Professional и Enterprise. Выберите соответствующий уровень в зависимости от ваших требований.Для целей этого руководства вы можете начать с бесплатного уровня.
- После выбора прав доступа нажмите кнопку «Создать» или «Создать», чтобы сгенерировать ключ API.
- Как только ваш ключ API будет сгенерирован, он будет отображаться на странице Ключи API. Ключ обычно представляет собой длинную строку буквенно-цифровых символов. Скопируйте ключ API и сохраните его в безопасном месте.
- Поздравляем! Вы успешно создали ключ API в OpenWeatherMap. Теперь вы можете использовать этот ключ для доступа к API OpenWeatherMap и получения данных о погоде для вашего приложения погоды.
HTML-код
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <title>Weather App</title> </head> <body class="image"> <div class="container"> <div class="search-box"> <i class="fa-solid fa-location-dot"></i> <input type="text" placeholder="Enter your location"> <button class="fa-solid fa-magnifying-glass"></button> </div> <div class="not-found"> <img src="images/404.png"> <p>Oops! Invalid location :/</p> </div> <div class="weather-box"> <img src=""> <p class="temperature"></p> <p class="description"></p> </div> <div class="weather-details"> <div class="humidity"> <i class="fa-solid fa-water"></i> <div class="text"> <span></span> <p>Humidity</p> </div> </div> <div class="wind"> <i class="fa-solid fa-wind"></i> <div class="text"> <span></span> <p>Wind Speed</p> </div> </div> </div> </div> <script src="https://kit.fontawesome.com/7c8801c017.js" crossorigin="anonymous"></script> <script src="index.js"></script> </body> </html>
CSS-код
*{ margin: 0; padding: 0; border: 0; outline: none; box-sizing: border-box; } body{ height: 100vh; display: flex; align-items: center; justify-content: center; background-image: url('images/dron.jpg'); background-size: cover; } .container{ position: relative; width: 400px; height: 105px; background: #00000058; padding: 28px 32px; overflow: hidden; border-radius: 18px; font-family: 'Poppins', sans-serif; transition: 0.6s ease-out; } .search-box{ width: 100%; height: min-content; display: flex; align-items: center; justify-content: space-between; } .search-box input{ color: #fff; background-color: transparent; width: 80%; font-size: 24px; font-weight: 500; text-transform: uppercase; padding-left: 32px; font-family: 'Poppins',sans-serif; } .search-box input::placeholder{ font-size: 20px; font-weight: 500; color: #fff; text-transform: capitalize; } .search-box button{ cursor: pointer; width: 50px; height: 50px; color: #06283D; border-radius: 50%; font-size: 22px; transition: 0.4s ease; } .search-box button:hover{ color: #fff; background: #06283D; } .search-box i{ position: absolute; color: #fff; font-size: 28px; } .weather-box{ text-align: center; } .weather-box img{ width: 60%; margin-top: 10px; } .weather-box .temperature{ position: relative; color: #fff; font-size: 4rem; font-weight: 700; } .weather-box .temperature span{ position: absolute; margin-left: 4px; font-size: 1.5rem; } .weather-box .description{ color: #fff; font-size: 22px; font-weight: 500; text-transform: capitalize; } .weather-details{ width: 100%; display: flex; justify-content: space-between; margin-top: 30px; } .weather-details .humidity, .weather-details .wind{ display: flex; align-items: center; width: 50%; height: 100px; } .weather-details .humidity{ padding-left: 20px; justify-content: flex-start; } .weather-details .wind{ padding-right: 20px; justify-content: flex-end; } .weather-details i{ color: #fff; font-size: 26px; margin-right: 10px; margin-top: 6px; } .weather-details span{ color: #fff; font-size: 22px; font-weight: 500; } .weather-details p{ color: #fff; font-size: 14px; font-weight: 500; } .not-found{ width: 100%; text-align: center; margin-top: 50px; scale: 0; opacity: 0; display: none; } .not-found img{ width: 70%; } .not-found p{ color: #fff; font-size: 22px; font-weight: 500; margin-top: 12px; } .weather-box, .weather-details{ scale: 0; opacity: 0; } .fadeIn{ animation: 0.5s fadeIn forwards; animation-delay: 0.5s; } @keyframes fadeIn{ to { scale: 1; opacity: 1; } }
Код JavaScript (объясняется построчно)
const container = document.querySelector('.container'); const search = document.querySelector('.search-box button'); const weatherBox = document.querySelector('.weather-box'); const weatherDetails = document.querySelector('.weather-details'); const error404 = document.querySelector('.not-found');
Эти строки используют метод document.querySelector()
для выбора определенных элементов из HTML-документа. Мы назначаем эти выбранные элементы переменным для последующего использования. Например, container
представляет элемент с классом «контейнер», search
представляет элемент кнопки внутри элемента с классом «поле поиска» и так далее.
search.addEventListener('click', () => {
Эта строка добавляет прослушиватель событий к кнопке search
, специально для события «щелчок».
const APIKey = 'write your API Key'; const city = document.querySelector('.search-box input').value; if (city === '') return;
Здесь мы объявляем переменную APIKey
и присваиваем ей значение, которое должно быть вашим собственным ключом API. Обязательно замените 'write your API Key'
вашим действительным ключом API. Мы также извлекаем значение, введенное в поле ввода поиска, и присваиваем его переменной city
. Если значение города пусто, мы выходим из функции, используя return
.
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIKey}`) .then(response => response.json()) .then(json => {
Этот код инициирует запрос на выборку к OpenWeatherMap API. Он динамически генерирует URL-адрес на основе выбранного города и ключа API. Ответ от API извлекается и преобразуется в формат JSON с помощью метода .json()
. Полученные данные JSON затем передаются следующему .then()
.
if (json.cod === '404') { container.style.height = '400px'; weatherBox.style.display = 'none'; weatherDetails.style.display = 'none'; error404.style.display = 'block'; error404.classList.add('fadeIn'); return; }
Если ответ API указывает на ошибку «404» (город не найден), этот блок кода обрабатывает состояние ошибки. Он регулирует высоту контейнера, скрывает поле погоды и сведения о погоде, отображает сообщение об ошибке (.not-found
) и применяет класс CSS для эффекта плавного появления.
error404.style.display = 'none'; error404.classList.remove('fadeIn'); const image = document.querySelector('.weather-box img'); const temperature = document.querySelector('.weather-box .temperature'); const description = document.querySelector('.weather-box .description'); const humidity = document.querySelector('.weather-details .humidity span'); const wind = document.querySelector('.weather-details .wind span');
Эти строки скрывают сообщение об ошибке (если оно отображалось ранее) и удаляют класс эффекта плавного появления. Затем мы выбираем различные элементы из документа HTML, такие как изображение погоды, температура, описание, влажность и ветер, используя document.querySelector()
.
switch (json.weather[0].main) { case 'Clear': image.src = 'images/clear.png'; break; case 'Rain': image.src = 'images/rain.png'; break; case 'Snow': image.src = 'images/snow.png'; break; case 'Clouds': image.src = 'images/cloud.png'; break; case 'Haze': image.src = 'images/mist.png'; break; case 'Mist': image.src = 'images/mist.png'; break; default: image.src = ''; }
Этот оператор switch проверяет основные погодные условия, полученные из ответа API. В зависимости от условия он обновляет атрибут src
элемента изображения погоды, указав соответствующий путь к файлу изображения. Например, если погода «Ясная», в качестве источника изображения устанавливается «images/sun.png».
temperature.innerHTML = `${parseInt(json.main.temp)}<span>°C</span>`; description.innerHTML = `${json.weather[0].description}`; humidity.innerHTML = `${json.main.humidity}%`; wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`;
Эти строки обновляют содержимое различных элементов данными, полученными из ответа API. Элементы температуры, описания, влажности и ветра обновляются соответствующими данными о погоде.
weatherBox.style.display = ''; weatherDetails.style.display = ''; weatherBox.classList.add('fadeIn'); weatherDetails.classList.add('fadeIn'); container.style.height = '590px';
Наконец, мы делаем поле погоды и сведения о погоде видимыми, установив для их свойств отображения пустую строку. Мы также добавляем классы CSS, чтобы применить к этим элементам эффект плавного появления. Кроме того, мы регулируем высоту контейнера, чтобы информация о погоде отображалась правильно.
Заключительные мысли
Создание минимального приложения погоды с использованием HTML, CSS и JavaScript может стать увлекательным путешествием для начинающих. В этом блоге мы шаг за шагом изучали, как создать простое, но красивое погодное приложение, уделяя особое внимание коду JavaScript, который извлекает данные из API OpenWeatherMap. Поняв и внедрив этот код, вы получили ценную информацию о работе с API и управлении DOM для создания динамичных и привлекательных веб-приложений.
Мы надеемся, что это руководство дало вам необходимые знания и вдохновение для дальнейшего изучения мира веб-разработки. Помните, что лучший способ укрепить свое понимание — это попрактиковаться и поэкспериментировать с кодом самостоятельно. Не стесняйтесь проверить мой репозиторий GitHub, где вы можете найти полный код и сопровождающие изображения для этого приложения погоды.
Отправляясь в путешествие по программированию, не забывайте получать удовольствие от процесса и получать опыт обучения на этом пути. Создание проектов, подобных этому погодному приложению, — отличный способ улучшить свои навыки и продемонстрировать свое творчество. Мы надеемся, что вы нашли этот блог полезным и проницательным.
Мы также хотели бы отметить и выразить нашу благодарность AsmrProg, каналу YouTube, который вдохновил нас и дал рекомендации для этого проекта. Их обучающие видеоролики сыграли важную роль в понимании концепций и методов, используемых при создании приложения погоды с помощью JavaScript.
Спасибо за прочтение и удачного кодирования! 🚀 ✨