bubble/openweather-api
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/openweather-api.git synced 2026-10-11 10:28:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

работа с Openweather API

Browse Source
This commit is contained in:
Sergey Yarkov 2019-09-21 18:43:45 +03:00
commit d49b13ce0a
3 changed files with 224 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
css/style.css Normal file
View File

@ -0,0 +1,109 @@
* {
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,p {
padding: 0;
margin: 0;
font-weight: 500;
}
body {
font-family: 'Montserrat', sans-serif;
}
hr {
background-color: #E1E1E1;
height: 1px;
border: none;
margin: 0;
}
.title-desctiption h1 {
text-align: center;
font-size: 26px;
margin-top: 2rem;
display: none;
}
.weather {
display: flex;
justify-content: center;
}
.weather-card {
border: 2px solid #E1E1E1;
min-width: 300px;
min-height: 390px;
text-align: center;
padding: 35px 50px 35px 50px;
margin-top: 3rem;
border-radius: 3px;
display: none;
}
.weather-card__title h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
}
.weather-card__temp p {
margin-top: 25px;
font-size: 36px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
}
.weather-card__description p {
color: #858585;
margin-top: 25px;
font-weight: 600;
font-size: 14px;
}
.weather-card__img {
margin-top: 10px;
}
.weather-card__wind {
margin-top: 5px;
font-size: 12px;
color: #858585;
font-weight: 600;
}
.weather-card__humidity {
font-size: 12px;
color: #858585;
font-weight: 600;
}
/* Поиск */
.search {
display: flex;
justify-content: center;
}
.search-area {
max-width: 500px;
width: 500px;
}
.search-area input {
width: 100%;
height: 35px;
border: 2px solid #E1E1E1;
border-radius: 3px;
padding: 5px;
padding-left: 10px;
outline: none;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 12px;
}
.search-btn {
margin-left: 5px;
width: 80px;
}
.search-btn button {
height: 35px;
width: 100%;
background-color: #3E48A4;
border-radius: 2px;
border: none;
color: #fff;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
transition: all .2s;
outline: none;
}
.search-btn button:hover {
background-color: #616BC5;
}

53
index.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Погода API</title>
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:600,700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Unit 14 -->
<div class="container">
<div class="search">
<div class="search-area">
<input id="search-area" placeholder="Введите свой город" type="text">
</div>
<div class="search-btn">
<button id="search-btn">Найти</button>
</div>
</div>
<div class="title-desctiption">
<h1>Информация о погоде:</h1>
</div>
<div class="weather">
<div class="weather-card">
<div class="weather-card__title">
<h2></h2>
</div>
<hr>
<div class="weather-card__temp">
<p></p>
</div>
<div class="weather-card__description">
<p></p>
</div>
<div class="weather-card__img">
</div>
<div class="weather-card__wind">
<p></p>
</div>
<div class="weather-card__humidity">
<p></p>
</div>
</div>
</div>
</div>
<script src="./js/app.js"></script>
</body>
</html>

62
js/app.js Normal file
View File

@ -0,0 +1,62 @@
function weatherInfo() {
document.querySelector('#search-btn').onclick = () => {
// запрос
const searchValue = document.querySelector('#search-area').value;
const request = `http://api.openweathermap.org/data/2.5/weather?q=${searchValue}&appid=32dda4a23cf5093afca2f2f086c16833`;
// обработчик
function showData(data) {
const weatherCard = document.querySelector('.weather-card'),
titleCard = document.querySelector('.title-desctiption'),
titleData = document.querySelector('.weather-card__title h2'),
tempData = document.querySelector('.weather-card__temp p'),
descData = document.querySelector('.weather-card__description p'),
dataImg = document.querySelector('.weather-card__img'),
dataWind = document.querySelector('.weather-card__wind p'),
dataHumidity = document.querySelector('.weather-card__humidity p');
// перевод слов на русский
switch (data.weather[0].description) {
case 'light rain':
data.weather[0].description = 'легкий дождь'
break;
case 'clear sky':
data.weather[0].description = 'чистое небо'
break;
case 'scattered clouds':
data.weather[0].description = 'рассеянные облака'
break;
case 'broken clouds':
data.weather[0].description = 'облачность'
break;
case 'haze':
data.weather[0].description = 'туман'
break;
default:
break;
}
weatherCard.style.display = 'block';
titleCard.style.display = 'block';
titleData.textContent = `${data.name}, ${data.sys.country}`;
tempData.innerHTML = Math.round(data.main.temp - 273) + '&deg C';
descData.textContent = data.weather[0].description;
dataImg.innerHTML = `<img src="http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="">`;
dataWind.textContent = `Скорость ветра: ${data.wind.speed}м/c`;
dataHumidity.textContent = `Влажность: ${data.main.humidity}%`;
}
// вывод
fetch(request)
.then(function (resp) {
return resp.json();
})
.then(function (data) {
showData(data);
})
.catch(function () {
alert('Город не найден!');
})
}
}
weatherInfo();