Погода является неотъемлемой частью нашей жизни, влияя на нашу повседневную деятельность, планы путешествий и даже на наше настроение. Разве не было бы здорово иметь визуально привлекательную и информативную панель мониторинга погоды, которая предоставляет данные о погоде в реальном времени вместе с информативными диаграммами и картами? В этой статье мы познакомим вас с процессом создания интерактивной панели мониторинга погоды под названием Earth Flow с использованием HTML, CSS и JavaScript.
Настройка среды
Прежде чем углубляться в код, давайте удостоверимся, что у нас есть необходимые зависимости и библиотеки. Earth Flow использует платформу Bootstrap, карты Leaflet, Highcharts для визуализации данных и Font Awesome для значков. Убедитесь, что в разделе <head> вашего HTML-файла есть следующие ссылки:
<!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS v5.2.1 --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <!-- Leaflet map --> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> <!-- Google Font - Space Grotesk --> <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=Space+Grotesk&display=swap" rel="stylesheet" /> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/ada9dfd0e0.js" crossorigin="anonymous"></script> <!-- Custom CSS --> <link rel="stylesheet" href="./style.css" />
В дополнение к ссылкам на CSS и шрифты нам нужно включить необходимые библиотеки JavaScript в конце тега <body>:
<!-- Highcharts --> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <!-- Bootstrap JavaScript Libraries --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script> <!-- Leaflet map --> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <!-- Custom JavaScript --> <script src="./index.js"></script>
Теперь, когда наша среда настроена, давайте приступим к реализации кода.
Построение HTML-структуры
Первый шаг — определить HTML-структуру нашей панели прогноза погоды. У нас будет заголовок, основной раздел и нижний колонтитул. Вот фрагмент структуры HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Earth Flow</title>
<!-- Required meta tags, CSS links, and libraries -->
</head>
<body>
<header>
<!-- Navbar -->
</header>
<main>
<!-- Location and weather overview section -->
<!-- Weekly charts section -->
</main>
<footer>
<!-- Footer content -->
</footer>
</body>
</html>
Эта панель навигации включает логотип Earth Flow, название бренда и поле ввода для поиска, позволяющее пользователям искать определенное место. Мы использовали значки Font Awesome, чтобы улучшить визуальную привлекательность кнопки поиска.
Разработка раздела «Обзор погоды»
В разделе обзора погоды отображаются текущие погодные условия, включая температуру, влажность и скорость ветра. Он также предоставляет карту для визуализации местоположения. Вот HTML-код этого раздела:
<section class="topSection">
<div class="container-fluid">
<div class="row">
<h2>Today OverViews</h2>
<div class="col col-lg-6 col-12 DailyWeather">
<div class="countryDiv d-flex">
<!-- Country icon and name -->
<!-- Temperature, humidity, and wind speed -->
</div>
<div class="WeatherDailyList"></div>
</div>
<div class="col col-lg-6 col-12 weatherMapContainer">
<div class="weatherMap"></div>
</div>
</div>
</div>
<img src="" alt="" />
</section>
Внутри контейнера .DailyWeather мы отобразим значок и название страны, температуру, влажность и скорость ветра. Контейнер .WeatherDailyList будет динамически заполнять данные о погоде за разные промежутки времени. .weatherMapContainer будет держать карту листовки, чтобы визуализировать местоположение. Не забудьте включить необходимые классы CSS для правильного стиля.
Включая недельные графики
Чтобы предоставить пользователям информацию о еженедельных тенденциях погоды, мы добавим информативные графики. Вот код HTML для раздела недельных графиков:
<section class="weeklyCharts">
<div class="container-fluid">
<div class="row">
<div class="d-flex">
<h3>Weekly OverViews</h3>
<a href="#temprature" class="text-secondary"> More</a>
</div>
<div class="col col-lg-6 col-12">
<figure class="highcharts-figure humidityChart">
<div id="humidity"></div>
</figure>
</div>
<div class="col col-lg-6 col-12">
<figure class="highcharts-figure">
<div id="temprature"></div>
</figure>
</div>
<div class="col col-lg-6 col-12">
<figure class="highcharts-figure">
<div id="pressure"></div>
</figure>
</div>
<div class="col col-lg-6 col-12">
<figure class="highcharts-figure">
<div id="overViewAll"></div>
</figure>
</div>
</div>
</div>
</section>
Этот раздел включает четыре цифры Highcharts, представляющие влажность, температуру, давление и общие погодные тенденции. Вы можете настроить заголовки диаграмм, подзаголовки и количество диаграмм в соответствии со своими предпочтениями.
Стилизация с помощью CSS
Чтобы наша панель мониторинга погоды выглядела привлекательно, мы добавим пользовательский CSS. Вы можете определить свои стили в теге <style> в файле HTML или связать внешний файл CSS. Вот обзор основных используемых классов CSS:
.navbar: стили общего вида панели навигации..brandName: управляет расположением и выравниванием названия бренда и логотипа..search-input-Div: стили для поля ввода поиска и значка поиска..topSection: определяет макет раздела обзора погоды..DailyWeather: стили макета ежедневной информации о погоде..weatherMapContainer: настраивает внешний вид контейнера карты погоды..weeklyCharts: определяет расположение и интервалы раздела недельных графиков..humidityChart,.highcharts-figure: стили отдельных фигур диаграммы.
Не стесняйтесь настраивать эти стили в соответствии с желаемой эстетикой дизайна.
Получение данных о погоде
Теперь самое интересное — получение данных о погоде в реальном времени с помощью OpenWeatherMap API. Мы будем использовать JavaScript для получения данных о погоде и динамического обновления приборной панели. Вот код, отвечающий за получение данных о погоде:
const endpoints = {
weather: {
baseUrl: 'https://api.openweathermap.org/data/2.5/forecast',
apiKey: '4f944c0231428c0ac6ebf79e36eba04d'
},
};
let countryChoice = 'Addis Ababa';
fetchWeatherData(countryChoice);
$('.searchIcon').click(function() {
const userChoice = $('.search-input').val();
if (userChoice !== '') {
countryChoice = userChoice;
fetchWeatherData(countryChoice);
}
});
function fetchWeatherData(city) {
const weatherURL = `${endpoints.weather.baseUrl}?q=${city}&appid=${endpoints.weather.apiKey}&units=metric`;
fetch(weatherURL)
.then((response) => response.json())
.then((data) => {
weatherData(data);
})
.catch((error) => {
console.log("Error:", error);
});
}
const weatherData = (data) => {
// Process and display weather data
};
В объекте endpoints мы храним базовый URL-адрес API OpenWeatherMap и предоставленный ключ API. Функция fetchWeatherData отправляет запрос в API, используя указанное название города. После получения данных вызывается функция weatherData для обработки и отображения информации о погоде.
Отображение данных о погоде и карт
Функция weatherData отвечает за извлечение необходимых данных о погоде и обновление приборной панели. Вот фрагмент кода, который заполняет раздел обзора погоды:
const weatherData = (data) => {
const listOfWeatherData = data.list;
const startDate = fixDateInterval(data.list[0].dt_txt);
const humidityArray = [];
const tempArray = [];
const windArray = [];
// Extract relevant data and populate arrays
// Display country icon, name, temperature, humidity, wind speed, and map
createWeatherList(iconArray, tempArray, humidityArray, windArray, startDate, data);
createMap(xAxis, yAxis);
};
Мы извлекаем необходимые данные о погоде из ответа API и сохраняем их в массивах (humidityArray, tempArray, windArray и т. д.). Эти массивы будут использоваться для заполнения списка погоды и диаграмм. Функция createWeatherList динамически генерирует список погоды на основе временных интервалов, а функция createMap создает карту Leaflet с предоставленными широтой (xAxis) и долготой (yAxis).
Наконец, мы создаем диаграммы с помощью библиотеки Highcharts. Функции createHumidityChart, createPressureChart, createTempChart и createOverAllChart создают соответствующие диаграммы, передавая необходимые данные и конфигурации.
