<body>
<div id="weather">
<input type="text" placeholder="Search..." class="input-search" />
<div class="content">
<h1 class="name"><span class="ez-toc-section" id="i"></span>
<span class="city"></span>
<span>,</span>
<span class="country"></span>
<span class="ez-toc-section-end"></span></h1>
<p class="time"></p>
<div class="temperature">
<span class="value"></span>
<span><sup>o</sup>C</span>
</div>
<div class="short-desc"></div>
<div class="more-desc">
<div class="visibility">
<i class="far fa-eye"></i>
<span></span>
</div>
<div class="wind">
<i class="fas fa-wind"></i>
<span></span>
</div>
<div class="cloud">
<i class="fas fa-cloud-sun"></i>
<span></span>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
body.hot {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1)),
url(hot.png) no-repeat center/cover;
}
body.hot #weather {
background-image: url(hot.png);
}
body.cold {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1)),
url(cold.png) no-repeat center/cover;
}
body.cold #weather {
background-image: url(cold.png);
}
#weather {
min-width: 350px;
height: 600px;
background: no-repeat center/cover;
text-align: center;
padding: 30px 20px;
border-radius: 10px;
transition: 0.4s;
}
#weather input {
padding: 10px 20px;
background-color: rgba(255, 255, 255, 0.4);
font-size: 19px;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.2);
border: none;
outline: none;
border-radius: 0px 15px 0 15px;
margin-bottom: 40px;
width: 100%;
transition: 0.4s;
}
#weather input:focus {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px 0 15px 0;
}
#weather .content {
color: white;
}
#weather .content .name {
white-space: nowrap;
font-size: 35px;
text-shadow: 2px 2px rgba(0, 0, 0, 0.5);
}
#weather .content .time {
font-size: 15px;
margin: 6px 0;
}
#weather .content .temperature {
font-size: 65px;
text-shadow: 4px 4px rgba(0, 0, 0, 0.6);
display: inline-block;
padding: 20px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 15px;
box-shadow: 2px 2px 0 2px rgba(0, 0, 0, 0.5);
margin: 20px 0 30px;
font-weight: 800;
}
#weather .content .short-desc {
font-size: 40px;
font-weight: 600;
text-shadow: 3px 3px rgba(0, 0, 0, 0.4);
}
#weather .content .more-desc {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
}
#weather .content .more-desc > div {
font-size: 16px;
display: flex;
flex-direction: column;
}
#weather .content .more-desc > div span {
margin-top: 15px;
}
const input = document.querySelector('.input-search')
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> changeWeatherUI(weather) {
const city = document.querySelector('.name .city')
const country = document.querySelector('.name .country')
const time = document.querySelector('.time')
const temperature = document.querySelector('.temperature .value')
const shortDesc = document.querySelector('.short-desc')
const visibility = document.querySelector('.visibility span')
const wind = document.querySelector('.wind span')
const cloud = document.querySelector('.cloud span')
city.innerHTML = weather.name
country.innerHTML = weather.sys.country
time.innerHTML = new Date().toLocaleString()
shortDesc.innerHTML = weather.weather[0].main
const temp = <a href="https://nodemy.vn/cac-phuong-thuc-xu-ly-doi-tuong-math-trong-javascript-de-hieu-de-tiep-can-voi-nguoi-bat-dau-important/">Math</a>.round(weather.main.temp)
temperature.innerHTML = temp
temp >= 18
? (document.body.className = 'hot')
: (document.body.className = 'cold')
visibility.innerHTML = weather.visibility + ' (m)'
wind.innerHTML = weather.wind.speed + ' (m/s)'
cloud.innerHTML = weather.clouds.all + ' (%)'
}
input.addEventListener('keyup', (e) => {
if (e.keyCode === 13) {
getWeather(e.target.value)
}
})
<a href="https://nodemy.vn/di-sau-vao-async-await-trong-javascript-huong-dan-tu-co-ban-den-nang-cao-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">async</a> function getWeather(input) {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${input}&units=metric&appid=d78fd1588e1b7c0c2813576ba183a667`
const res = await fetch(url)
const weather = await res.json()
changeWeatherUI(weather)
}
getWeather('ha noi')
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
7 Responses