Skip to content

Instantly share code, notes, and snippets.

@mohamma548

mohamma548/Local Weather.markdown

Last active June 2, 2016 14:00
Show Gist options
  • Save mohamma548/6aafdf00fd07020073c6f86bdd32151d to your computer and use it in GitHub Desktop.
Save mohamma548/6aafdf00fd07020073c6f86bdd32151d to your computer and use it in GitHub Desktop.
Download ZIP
Local Weather
Raw
index.html
<html>
<body>
<p class="fontHeader">Weather App</p>
<div class="appBlock">
<div class="right"><span class="tempDispaly">0</span>&deg;
<p><span class="name">city</span></p>
</div>
<div class="left-top"><img id="icon" src="http://openweathermap.org/img/w/01d.png" width=75px></div>
<div class="left-bottom"></div>
</div>
<div class="button"><span class="btn btn-primary">temperature(&deg;C)</span>
<span class= "btn btn-success">Temperature(&deg;F)</span>
</div>
<div class="footer text-center">Copyright &copy; 2016 mohammedadem</div>
</body>
</html>
Raw
script.js
$("document").ready(function(){
weatherData();
});
function weatherData(){
$.ajax({
url:'http://api.openweathermap.org/data/2.5/weather?q=helsinki&appid=f8c53107ef5f900975bf56fb72850d56&units=metric',
dataType:'jsonp',
success: function(data){
$(".tempDispaly").html(data.main.temp);
$(".left-bottom").html('<h4>Humidity: '+data.main.humidity+'%</h4>');
$(".left-top").html('<h2> '+data.weather[0].description+'</h2>');
if($(".btn-primary").on('click',function(){
$(".tempDispaly").html(data.main.temp);
}))
if($(".btn-success").on('click',function(){
$(".tempDispaly").html(celToFar(data.main.temp));
}))
//$(".tempDispaly").html(data.main.temp);
$(".name").html(data.name);
$("icon").html('<img src=' + data.weather.icon +'<.png"/>');
}
});
}
function celToFar(cel){
return Math.round(cel*9/5+32).toFixed(2);
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.css
.fontHeader{
font-family: Lobster;
font-size: 70px;
text-shadow: 2px 2px 8px #000000;
text-align: center;
}
.appBlock{
margin: auto;
width:400px;
height: 200px;
border-radius:10px;
}
.right{
float: left;
background-color: black;
color:white;
padding:15px;
width:150px;
height:200px;
font-size:20px
}
.tempDispaly{
font-size:50px;
}
.left-top{
float: right;
background-color: #F6F7EB;
color:black;
text-align:center;
font-family: lobster;
text-shadow: 2px 2px 8px #000000;
padding:15px;
width:250px;
height:150px;
}
.left-bottom{
float: right;
background-color: #60BAF6;
color:black;
padding:10px;
width:250px;
height:50px;
text-align:center;
}
.button{
margin: 2% 38%;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment