Будування погодного додатку: Моя подорож з HTML, CSS та JavaScript - javascript.org.ua

[

Gnaneshwar Reddy Baitinti на LinkedIn: #weathertech #accuweatherapi #html #css #javascript

Я успішно розробив вебсайт про погоду за допомогою HTML, CSS та JavaScript, інтегруючи API AccuWeather для...

www.linkedin.com

](https://www.linkedin.com/posts/gnaneshwarbweathertech-accuweatherapi-html-activity-7224323076841160704-9swP?utmsource=share&utmmedium=memberdesktop&source=post_page-----aaf812e9845e--------------------------------)

Чому я створив додаток для погоди?

Все просто — додатки про погоду корисні, а створення одного з них здалося ідеальним проєктом для початківців. Крім того, це була чудова можливість попрактикуватися з JavaScript, працювати з API та створити чистий інтерфейс. Та й хто не любить можливість похвалитися функціональним додатком, який ти створив?

Як я це зробив

1.

The Plan

Перед початком я спланував базові функції:

Показати поточні погодні умови (наприклад, температуру та вологість).
Отримати актуальні дані про погоду за допомогою геолокації користувача.

Просто, але ефективно, чи не так?

Фото: Fahim Muntashir на Unsplash

2. HTML: Структура

Я почав з основного макету для відображення погодної інформації. Це нічого складного, але цього достатньо для виконання завдання.
Ось швидкий погляд:







Max: 
Min: 
 ```  ## 3.
CSS: Оформлення

Я хотів, щоб додаток виглядав чисто та просто, тому додав кілька базових стилів. Ось невеликий попередній перегляд:

body{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.card{
background: #edb4b4;
width: 800px;
display: flex;
align-items: center;
border-radius: 10px;
padding: 40px;
}

.card .card-info{
font-size: 15px;
font-weight: bold;
padding: 10px;
white-space: nowrap;
}

.card .card-info .card-content {
padding:10px;
border-bottom:1px solid #333333;
}

.card .card-weather {
margin-left: auto;
display: flex;
align-items: center;
gap:12px;
white-space: nowrap;
font-weight: bold;
}

.card .card-weather .card-weather-icon {
animation: move 1s infinite alternate ease-in-out;
}

.card .card-weather .card-weather-desc {
font-size: 13px;
}
```

Нічого надто складного, але це надало веб-сторінці приємний вигляд!

4.

JavaScript: Розумна частина

Ось де відбувається магія. Я використовував AccuWeather API для отримання живих даних і динамічного їх відображення.
Ось швидкий перегляд:

navigator.geolocation.getCurrentPosition((position) => {  

 lat = position['coords']['latitude'];  
 long = position['coords']['longitude'];  
 console.log(lat+" "+long)  
 let geopositionUrl = `https://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=${apiKey}&q=${lat},${long}`;  

 axios.get(geopositionUrl)  
 .then((response) => {  
 country = response.data.Country.EnglishName;  
 locationKey = response.data.Key;  
 timeZone = response.data.TimeZone;  
 locationName = response.data.LocalizedName;  

 weatherInfoObj['country'] = response.data.Country.EnglishName;  
 weatherInfoObj['locationKey'] = response.data.Key;  
 weatherInfoObj['timeZone'] = response.data.TimeZone;  
 weatherInfoObj['currentLocation'] = response.data.LocalizedName;  

 getWeatherData(apiKey,weatherInfoObj.locationKey);  
 })  
 })  
function getWeatherData(apiKey,locationKey){  
 let weatherUrl = `https://dataservice.accuweather.com/forecasts/v1/daily/1day/${locationKey}?apikey=${apiKey}`;  
 axios.get(weatherUrl).then((response) => {  
 console.log(response);  
 weatherInfoObj['today'] = response.data.DailyForecasts[0].Date;  
 weatherInfoObj['day'] = response.data.DailyForecasts[0].Day;  
 weatherInfoObj['night'] = response.data.DailyForecasts[0].Night;  
 weatherInfoObj['temperature'] = response.data.DailyForecasts[0].Temperature;  
 let today = new Date(weatherInfoObj['today']);  
 console.log('weatherInfoObj ' , weatherInfoObj)  

 returnId('country').textContent = weatherInfoObj['country'];  
 returnId('currentLocation').textContent = weatherInfoObj['currentLocation'];  
 returnId('date').textContent = today.getDate()+ '-' + (today.getMonth()+1) + '-' + (today.getFullYear() + " " + weatherInfoObj.timeZone.Code);  

 if(weatherInfoObj.day.Icon < 10 ){  
 returnId('morning').setAttribute('src',`https://developer.accuweather.com/sites/default/files/0${weatherInfoObj.day.Icon}-s.png`)  
 }else{  
 returnId('morning').setAttribute('src',`https://developer.accuweather.com/sites/default/files/${weatherInfoObj.day.Icon}-s.png`)  
 }  

 if(weatherInfoObj.night.Icon < 10 ){  
 returnId('night').setAttribute('src',`https://developer.accuweather.com/sites/default/files/0${weatherInfoObj.night.Icon}-s.png`)  
 }else{  
 returnId('night').setAttribute('src',`https://developer.accuweather.com/sites/default/files/${weatherInfoObj.night.Icon}-s.png`)  
 }  

 returnId('morning-desc').textContent = weatherInfoObj.day.IconPhrase;  
 returnId('night-desc').textContent = weatherInfoObj.night.IconPhrase;

Цей код отримує місцезнаходження користувача, отримує погодні дані і відображає їх на екрані.

[

GitHub - GnaneshwarReddyBaitinti/WeatherAPP

Долучіться до розробки WeatherAPP від GnaneshwarReddyBaitinti, створивши акаунт на GitHub.

github.com

](https://github.com/GnaneshwarReddyBaitinti/WeatherAPP?source=post_page-----aaf812e9845e--------------------------------)

Чому я це зробив

Цей проєкт навчив мене багато чого!

Як використовувати сторонні API.
Як розробити чистий і зручний інтерфейс.

Останні думки

Створення цього погодного додатку стало надзвичайно корисним досвідом.
Це не тільки про код — це радість створення чогось функціонального і можливість поділитися цим з іншими. Якщо ви початківець, як я, спробуйте створити погодний додаток. Повірте, ви багато чого навчитесь і ще й отримуєте задоволення!

Тож, що ви думаєте? Дайте знати, якщо ви пробували створити щось подібне, або якщо у вас є круті ідеї для мого наступного проєкту. Залишайте свої думки в коментарях нижче!

Перекладено з: Building a Weather App: My Journey with HTML, CSS, and JavaScript