Добро пожаловать в захватывающее приключение по созданию погодного приложения, которое не только будет держать вас в курсе событий, но и пленит ваше сердце своей простотой и красотой. Мы все полагаемся на погодные приложения для планирования дня, так зачем же довольствоваться скучным и скучным дизайном? Давайте вместе отправимся в путешествие, в котором мы объединим возможности HTML, CSS и JavaScript для создания погодного приложения, которое не только предоставляет точные прогнозы, но и радует ваши глаза.

Не волнуйтесь, если вы новичок в программировании или опытный разработчик — эта запись в блоге для всех. Мы проведем вас через каждый шаг, гарантируя, что вы усвоите основы HTML для структурирования нашего приложения. Затем мы погрузимся в область CSS, где вдохнем жизнь в наш дизайн, превратив его в визуальный шедевр. И, наконец, мы воспользуемся магией JavaScript для получения данных о погоде в реальном времени и добавим интерактивности в наше приложение.

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

Итак, давайте вместе отправимся в это путешествие, в котором мы объединим красоту и практичность, создав погодное приложение, которое оставит неизгладимое впечатление. Приготовьтесь создать что-то необычное — давайте погрузимся!

OpenWeatherMap

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

Погодное приложение — это цифровое приложение, которое предоставляет пользователям актуальную информацию о погоде, включая температуру, влажность, скорость ветра и прогнозы. Используя возможности API (интерфейсов прикладного программирования), мы можем получать данные о погоде из надежных источников и беспрепятственно интегрировать их в наше приложение.

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

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

Создайте ключ API:

  1. Посетите веб-сайт OpenWeatherMap (https://openweathermap.org/) и создайте бесплатную учетную запись, если у вас ее еще нет.
  2. После входа в систему перейдите в раздел «Ключи API». Вы можете получить к нему доступ, щелкнув свое имя пользователя в правом верхнем углу и выбрав «Ключи API» в раскрывающемся меню.
  3. На странице ключей API вы увидите форму, в которой вы можете создать новый ключ API. Введите имя для вашего ключа API в поле «Имя». Это может быть любое имя, которое поможет вам определить назначение ключа.
  4. Выберите нужные права доступа для вашего ключа API. OpenWeatherMap предлагает различные уровни доступа, включая Free, Startup, Professional и Enterprise. Выберите соответствующий уровень в зависимости от ваших требований.Для целей этого руководства вы можете начать с бесплатного уровня.
  5. После выбора прав доступа нажмите кнопку «Создать» или «Создать», чтобы сгенерировать ключ API.
  6. Как только ваш ключ API будет сгенерирован, он будет отображаться на странице Ключи API. Ключ обычно представляет собой длинную строку буквенно-цифровых символов. Скопируйте ключ API и сохраните его в безопасном месте.
  7. Поздравляем! Вы успешно создали ключ 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.

Спасибо за прочтение и удачного кодирования! 🚀 ✨