From d49b13ce0aa86e584ddcd67035ac43a9094d3ef0 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sat, 21 Sep 2019 18:43:45 +0300 Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D1=81?= =?UTF-8?q?=20Openweather=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 53 ++++++++++++++++++++++++ js/app.js | 62 ++++++++++++++++++++++++++++ 3 files changed, 224 insertions(+) create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/app.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..9d5eafe --- /dev/null +++ b/css/style.css @@ -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; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..cf08c9c --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + + + + Погода API + + + + + + +
+
+
+ +
+
+ +
+
+
+

Информация о погоде:

+
+
+
+
+

+
+
+
+

+
+
+

+
+
+
+
+

+
+
+

+
+
+
+
+ + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..0fea80e --- /dev/null +++ b/js/app.js @@ -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) + '° C'; + descData.textContent = data.weather[0].description; + dataImg.innerHTML = ``; + 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();