Skip to content

Instantly share code, notes, and snippets.

@pilgrim011

pilgrim011/index.html

Created November 11, 2016 00:15
Show Gist options
  • Save pilgrim011/90e648d517ae9f400192801eec6b69d0 to your computer and use it in GitHub Desktop.
Save pilgrim011/90e648d517ae9f400192801eec6b69d0 to your computer and use it in GitHub Desktop.
Download ZIP
localWeather4
Raw
index.html
<body>
<div>
<h1 class = "text-center" id ="text">Check Current Weather</h1>
<h2 class = "text-center" id="city"></h2>
<h3 class = "text-center" id = "info"></h3>
<button class = " btn btn-info btn-md "></button>
<h1 class = "text-center" id = "cond"></h1>
<img>
</div>
</body>
Raw
script.js
$(document).ready(function(){
var toggleC = true;
var tempC;
var tempF;
var locate = prompt("Your city?");
var dodaj = "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q=" + locate + "&units=metric&APPID=02a3afb571841bf9ae4d3f377e67082d&callback=?";
$.getJSON(dodaj,function(response) {
var temperature = response.main.temp;
tempC = Math.round(temperature);
tempF = Math.round(tempC*1.8+32);
$("#city").html(response.name + ", " + response.sys.country);
$("#info").html(response.main.temp);
$(".btn").html("°C"); $("#cond").html(response.weather[0].main);
var icon = $("img").html("<img src=http://openweathermap.org/img/w/" + response.weather[0].icon + ".png " + "class=img-fluid alt=Oops" + ">");
console.log(icon);
return icon;
});
$(".btn").click(function(){
if(toggleC == true){
toggleC = false;
$("#info").html(tempF);
$("button").html("°F");
}
else if(toggleC==false){
toggleC=true;
$("#info").html(tempC);
$("button").html("°C");
}
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
.btn {
background-color:red;
}
h3{
display:inline;
}
div{
text-align:center;
}
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