Akagami no shanks
80+ Bronze
- Katılım
- 15 Mart 2021
- Mesajlar
- 914
HTML:
<!DOCTYPE html>
<html lang="en">
<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>Hava Durumu</title>
<link rel="stylesheet" href="style.css">"
</head>
<body>
<div class="app">
<div class="header">
<h1>Hava durumu</h1>
<input type="text" id="searchBar" placeholder="Şehir giriniz">
</div>
<div class="container">
<div class="city">İstanbul, TR</div>
<div class="temp">15°C</div>
<div class="desc">Güneşli</div>
<div class="minmax">14°C / 19°c</div>
<div class="footer">
</div>
</div>
</body>
CSS:
*{
margin : 0;
padding : 0;
box-sizing : border-box;
}
body{
font-family: 'montserrat', sans-serif;
color: #fff;
height: 100vh;
}
.app{
display: flex;
flex-direction: column;
align-items:center;
text-align: center;
background: rgba(0,0,0,.7);
height: 100vh;
}
.header{
padding: 50px 20px 30px 20px;
}
.header h1{
font-size:50px;
color: #fbb034;
text-shadow: 1px 3px rgba(0,0,0,.9);
}
.header input{
width: 100%;
padding: 10px;
background: transparent;
border: 0;
outline: 0;
border-bottom: 2px solid #fbb034;
text-align: center;
font-size:20px;
color:#f2f2f2;
}
.city{
font-size:35px;
font-weight: 500;
margin-bottom: 10px;
text-shadow: 1px 3px rgba(0,0,0,.8)
}
.temp{
font-size:100px;
font-weight: 700;
margin-bottom:15px;
text-shadow: 1px 5px rgba(0,0,0,1);
}
.desc{
font-size: 25px;
font-style: italic;
text-shadow: 1px 3px rgba(0,0,0,.8);
margin-bottom:10px;
}
.minmax{
font-sizs:24px;
text-shodw: 1px 3px rgba(0,0,0,.8);
}
JavaScript:
const url = "https://api.openweathermap.org/data/2.5/"
const key = "5c9de763fb62812ac2636067dc0ea6cb";
const setQuery = () => {
if(e.keyCode ==13)
getResult(searchBar.value)
}
const getResult = (cityName) =>{
let query = `${url}weather?q=${cityName}&appid=${key}&units=metric$lang=tr`
fetch(query)
.then(weather => {
return weather.json()
})
.then(displayResult)
}
const displayResult = (result) =>{
let city = document.querySelector(".city")
city.innerText = `${result.name}, ${result.sys.country}`
let temp = document.querySelector(".temp")
temp.innerText = `${Math.round(result.main.temp)}°C`
let desc = document.querySelector(".desc")
desc.innerText = result.weather[0].description
let minmax = document.querySelector(".minmax")
minmax.innerText = `${Math.round(result.main.temp_min)}°C / ${Math.round(result.main.temp_max)}°C`
}
const searchBar = document.getElementById('searchBar')
searchBar.addEventListener("keypress", setQuery)
.
sağlık olsun ayni seyi 40 yaptim haha
