Skip to content

Instantly share code, notes, and snippets.

@elisabeth2015

elisabeth2015/index.html

Last active April 26, 2020 20:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elisabeth2015/37abdf5fa7d27b0458834b6cbc5e4c95 to your computer and use it in GitHub Desktop.
Save elisabeth2015/37abdf5fa7d27b0458834b6cbc5e4c95 to your computer and use it in GitHub Desktop.
Download ZIP
Weather Forecast
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="/src/style.css">
<title>Javascript Weather</title>
</head>
<body style="background-img:url('https://openweather.co.uk/storage/app/media/we-are-pleased-announce-our-new-statistical-weather-data-api-now-available.png');">
<div>
<div id="main">
<div class="row" style="padding:10px;">
<div class="img col-3">
<img src="" id="img"/ >
</div>
<div class="content col" >
<h3 id="temp"></h3>
</div>
<div class="content col" id="name" >
<h3 id="tem">12</h3>
</div>
</div>
<div class="container" style=" color:#7f8fa6;">
<div class="row" style="padding:10px;">
<div class="col" style="font-size:13px; font-weight:bold;" id="max">
max:12
</div>
<div class="col" style="font-size:13px; font-weight:bold;" id="min">
min:12
</div>
<div class="col-5" style="font-size:13px; font-weight:bold;" id="feel">
Hissedilen:12
</div>
</div>
<br>
<div class="col">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search Your City..." aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="src/main.js" charset="utf-8"></script>
</body>
</html>
Raw
script.js
link = "https://api.openweathermap.org/data/2.5/weather?q=geyve&units=metric&apikey=dc989810ec5879216998f7685d8d2057";
var request = new XMLHttpRequest();
request.open('GET',link,true);
request.onload = function(){
var obj = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400) {
var temp = obj.main.temp;
var temp2=Math.ceil(temp);
var feel=obj.main.feels_like;
document.querySelector("#feel").innerHTML="Feels Like:"+feel+"&#176;c";
document.querySelector("#max").innerHTML="Max:"+obj.main.temp_max+"&#176;c";
document.querySelector("#min").innerHTML="Min:"+obj.main.temp_min+"&#176;c";
console.log(temp+" derece");
console.log(feel);
console.log(obj)
var icon=obj.weather[0].icon;
console.log(obj.weather[0].icon);
console.log(obj.name);
var name= document.querySelector("#tem").innerHTML=obj.name;
var t=document.querySelector("#temp").innerHTML=temp2+"&#176;c";
var img=document.querySelector("#img");
img.setAttribute("src","http://openweathermap.org/img/wn/"+icon+"@2x.png")
}
else{
console.log("The city doesn't exist! Kindly check");
}
}
request.send();
document.querySelector(".btn").addEventListener("click",()=>{
var res=document.querySelector(".form-control").value;
link = "https://api.openweathermap.org/data/2.5/weather?q="+res+"&units=metric&apikey=dc989810ec5879216998f7685d8d2057";
var request = new XMLHttpRequest();
request.open('GET',link,true);
request.onload = function(){
var obj = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400) {
var temp = obj.main.temp;
var temp2=Math.ceil(temp);
var feel=obj.main.feels_like;
document.querySelector("#feel").innerHTML="Hissedilen:"+feel+"&#176;c";
document.querySelector("#max").innerHTML="Max:"+obj.main.temp_max+"&#176;c";
document.querySelector("#min").innerHTML="Min:"+obj.main.temp_min+"&#176;c";
console.log(temp+" derece");
console.log(feel);
console.log(obj)
var icon=obj.weather[0].icon;
console.log(obj.weather[0].icon);
console.log(obj.name);
var name= document.querySelector("#tem").innerHTML=obj.name;
var t=document.querySelector("#temp").innerHTML=temp2+"&#176;c";
var img=document.querySelector("#img");
img.setAttribute("src","http://openweathermap.org/img/wn/"+icon+"@2x.png")
}
else{
console.log("The city doesn't exist! Kindly check");
}
}
request.send();
})
Raw
style.css
*{
padding: 0;
margin: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
width:100vw;
height: 100vh;
background-image: url("https://www.wallpaperup.com/uploads/wallpapers/2015/09/10/801184/12341b63eeaaebb651488398158cf1bf.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main{
padding: 5px;
min-width: 400px;
min-height: 160px;
border:2px solid #ddd;
border-spacing: inherit;
border-width: medium;
border-radius: 10px;
border-style:double;
background: #FFFF;
box-shadow:0 0 7px #f0f0f0;
}
.img{
width: 60px;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
#tem{
color:#2e86de;
font-family: 'Nunito', sans-serif;
}
.content{
float: left;
display: flex;
justify-content: center;
align-items: center;
width: 100px;height: 100px;
font-weight: bold;
font-family: monospace;
font-size: 14px;
}
#temp{
color:#273c75;
font-family: 'Nunito', sans-serif;
margin: 0;
}
#tem{
background: -webkit-linear-gradient(dodgerblue, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment