Skip to content

Instantly share code, notes, and snippets.

@katherineb28

katherineb28/index.html

Created December 4, 2018 17:19
Show Gist options
  • Save katherineb28/9b8ad249e75ec53a61f42285a16a8079 to your computer and use it in GitHub Desktop.
Save katherineb28/9b8ad249e75ec53a61f42285a16a8079 to your computer and use it in GitHub Desktop.
Download ZIP
WEATHER APP
Raw
index.html
<body>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<h1>Your Weather App</h1>
<div class = "location" id = "location">
<p></p>
</div>
<div class = "temperature">
<p id = "temp"></p><span id = "unit"></span>
</div>
<div class = "btn">
<button id = #btn><span id = #btntext></span></button>
</div>
<div class = "icon">
<img src="" id="weather-icon"><br/>
</div>
<p id="demo"></p>
<script>
</script>
</body>
Raw
script.js
function weather(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
function showPosition(position) {
var api = "https://fcc-weather-api.glitch.me/api/current?lat="+position.coords.latitude+"&lon="+ position.coords.longitude;
$.getJSON(api, function(json){
$("#location").html(json.name + ", " + json.sys.country);
$('#weather-icon').attr('src', json.weather[0].icon);
let temp = Math.floor(json.main.temp) + '&deg;';
$('#temp').html(temp);
$('#unit').html('C');
$("button span").text("FAHRENHEIT");
});
}
document.getElementById("#btn").onclick = function () {
var currentUnit = $("#unit").text();
var temperature = $('#temp').text();
var newUnit;
if (currentUnit == 'C'){
var celcius = temperature;
newUnit = 'F';
var fahTemp = Math.round(parseInt(celcius) * 9 / 5 + 32);
$("#temp").text(fahTemp + " ");
$("#unit").text(newUnit);
$("button span").text('Celcius');
} else{
var celTemp = Math.round((parseInt(temperature)-32) *5/9);
newUnit = 'C'
$("#unit").text(newUnit);
$("#temp").text(celTemp);
$("button span").text('Fahrenheit');
}
}
}
$(document).ready(function(){
weather();
});
Raw
style.css
body {background-color:
#99cccc;
}
div, h1{
text-align:center;
color:#dfdfdf;
font-family: 'Noto Serif',serif
}
h1{
font-weight:bold;
font-size:40px;
}
p{
font-size:30px;
}
img {
text-align:center;
}
.location{
font-size:30px;
text-transform:uppercase;
}
.btn button {
border-radius:12px;
font-family: 'Noto Serif',serif;
background-color: #dfdfdf;
border: none;
color: #99cccc;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.btn:hover{
opacity:0.7;
}
#temp,#unit{
display:inline;
}
#btntext{
color:black;
}
button span {
text-transform:uppercase;
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment