Skip to content

Instantly share code, notes, and snippets.

@matgargano

matgargano/index.html

Created December 10, 2018 15:42
Show Gist options
  • Save matgargano/b3c119ce32a45495d4c4984c5d31d9d1 to your computer and use it in GitHub Desktop.
Save matgargano/b3c119ce32a45495d4c4984c5d31d9d1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="/css/styl.css" />
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Raw
script.js
var url =
'http://api.openweathermap.org/data/2.5/weather?zip=10306,us&APPID=6de3e05b57e632f5d2cdfc607dbb1f96&units=imperial';
axios.get(url).then(function(response) {
var temperature = response.data.main.temp;
var backgroundImage =
'url(https://travel.home.sndimg.com/content/dam/images/travel/fullset/2014/11/17/50/warm-weather-vacations-atlantis-paradise-resort.rend.hgtvcom.616.347.suffix/1491584890201.jpeg)';
if (temperature < 40) {
backgroundImage = 'url(http://images.brandpointcontent.s3.amazonaws.com/32123582_wide.jpg)';
}
$('body').css('background-image', backgroundImage);
});
Raw
style.css
body {
background-image: url(http://images.brandpointcontent.s3.amazonaws.com/32123582_wide.jpg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment