StevenMLocke/Local Weather.markdown

## index.html
<head>
  <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>

<body>
  <div id="test" class="container-fluid">
    <div class="row" id="stuffRow">
      <div class="col-xs-4"></div>
      <div class="col-xs-4" id="stuff">
        <span>Weather</span>
        <input type="text" name='tb' id='tb' placeholder="location" class="form-control">
        <div>
          <button id="butt" class="btn btn-primary">Get It</button>
          <button id="metImpSwitch" class="btn btn-primary hidden"></button>
        </div>
        <br />
        <div id="num">
          <div id="iconTemp"></div>
          <span id="temp"></span>
          <div id="iconMetImp"></div>
        </div>
      </div>
      <div class="col-xs-4"></div>
    </div>
  </div>
</body>

## Local Weather.markdown

      
    Raw
  

              Local Weather.markdown
            
          
    Local Weather

Simple app that checks the temperature for a location that you input.  Accesses the openweather.org API and the Flickr.com API.
Makes use of klunky javascript and jquery and css and html and bootstrap
A Pen by QdB on CodePen.
License.

  
## script.js
$(document).ready(function() {
  var temp = 0;
  var celciusTemp = 0;
  $('#test').on('click', '#butt', function() {
    //----------------------------------------------------
    var xhr = new XMLHttpRequest();
    var url = "http://api.openweathermap.org/data/2.5/weather?q=" + $('#tb').val() + "&units=imperial";
    xhr.open('GET', url, false);
    xhr.send();
    var jsonObj = JSON.parse(xhr.response);
    temp = Math.floor(jsonObj.main.temp);
    celciusTemp = Math.floor((temp - 32) / 1.8);

    $("#temp").text(" " + temp);
    //------------------------------------------------
    var payload = {
      method: "flickr.photos.search",
      api_key: "c04dab776a41eaa38c02dd938c43d070",
      text: "",
      license: "4",
      privacy_filter: "1",
      safe_search: "1",
      media: "photos",
      per_page: "500",
      sort: "relevance",
      format: "json",
      nojsoncallback: "1"
    };

    $("#iconTemp").removeClass();

    if (temp < 32) {
      //cold
      $("#iconTemp").addClass("icon cold");
      payload.text = "snow";
    } else if (temp < 50) {
      //cool
      $("#iconTemp").addClass("icon cool");
      payload.text = "spring flowers";
    } else if (temp < 72) {
      //warm
      $("#iconTemp").addClass("icon warm");
      payload.text = "sunshine";
    } else {
      //hot
      $("#iconTemp").addClass("icon hot");
      payload.text = "desert";
    }

    $("#iconMetImp").addClass("icon metImp imp");
    $("#metImpSwitch").removeClass("hidden");
    $("#metImpSwitch").html("Celcius");

    $.get("https://api.flickr.com/services/rest/", payload, function(rsp) {
      if (rsp.stat != "ok") {
        return;
      }

      var divider = 0;
      if (rsp.photos.pages > 1) {
        divider = 499;
      } else {
        divider = rsp.photos.total - 1;
      }

      var rand = Math.floor(Math.random() * divider);
      var photo = rsp.photos.photo[rand];

      var photoUrl = "https://farm" + photo.farm + ".staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_c.jpg";

      $("#test").css({
        'background-image': 'url(' + photoUrl + ')'
      });
    });
  });
  $("#test").on('click', '#metImpSwitch', function() {
    $("#metImpSwitch").html() == "Celcius" ? (
      $("#metImpSwitch").html("Fahrenheit"),
      $("#temp").text(" " + celciusTemp),
      $('#iconMetImp').animate({
        'background-position-x': '38%',
        'background-position-y': '79%'
      })
    ) : (
      $("#metImpSwitch").html("Celcius"),
      $("#temp").text(" " + temp),
      $('#iconMetImp').animate({
        'background-position-x': '46%',
        'background-position-y': '79%'
      })
    );
  });
});

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

## style.css
html,
body {
  height: 100%;
  width: 100%;
}

#test {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

#testP {
  text-align: center;
  width: 200px;
  color: white;
}

#stuff {
  color: white;
  background-color: rgba(20, 20, 20, 0.5);
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  -webkit-box-shadow: 10px 10px 5px rgba(10, 10, 10, 0.5);
  -moz-box-shadow: 10px 10px 5px #888888;
}

#stuff > * {
  margin: 5px;
}

#stuff > span {
  font-size: 1.75em;
  font-family: 'Oswald', sans-serif;
}

#stuffRow {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#num {
  border-radius: 15px;
  background-color: white;
}

#temp {
  color: black;
  font-size: 3.5em;
}

.icon {
  overflow: hidden;
  display: inline-block;
  height: 2.5em;
  width: 25px;
}

.cold,
.cool,
.warm,
.hot,
.metImp {
  background-size: 1000px 600px;
  background-image: url(http://i.imgur.com/SRAsF4p.png);
}

.cold {
  background-position: 77.225% 67.5%;
}

.cool {
  background-position: 15% 79%;
}

.warm {
  background-position: 22.725% 79%;
}

.hot {
  background-position: 30.6% 79%;
}

.imp {
  width: 44px;
  background-position: 46% 79%;
}

.met {
  width: 44px;
  background-position: 38% 79%;
}

.hidden {
  display: none;
}

## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<head>
	<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
	</head>

	<body>
	<div id="test" class="container-fluid">
	<div class="row" id="stuffRow">
	<div class="col-xs-4"></div>
	<div class="col-xs-4" id="stuff">
	<span>Weather</span>
	<input type="text" name='tb' id='tb' placeholder="location" class="form-control">
	<div>
	<button id="butt" class="btn btn-primary">Get It</button>
	<button id="metImpSwitch" class="btn btn-primary hidden"></button>
	</div>
	<br />
	<div id="num">
	<div id="iconTemp"></div>
	<span id="temp"></span>
	<div id="iconMetImp"></div>
	</div>
	</div>
	<div class="col-xs-4"></div>
	</div>
	</div>
	</body>
	$(document).ready(function() {
	var temp = 0;
	var celciusTemp = 0;
	$('#test').on('click', '#butt', function() {
	//----------------------------------------------------
	var xhr = new XMLHttpRequest();
	var url = "http://api.openweathermap.org/data/2.5/weather?q=" + $('#tb').val() + "&units=imperial";
	xhr.open('GET', url, false);
	xhr.send();
	var jsonObj = JSON.parse(xhr.response);
	temp = Math.floor(jsonObj.main.temp);
	celciusTemp = Math.floor((temp - 32) / 1.8);

	$("#temp").text(" " + temp);
	//------------------------------------------------
	var payload = {
	method: "flickr.photos.search",
	api_key: "c04dab776a41eaa38c02dd938c43d070",
	text: "",
	license: "4",
	privacy_filter: "1",
	safe_search: "1",
	media: "photos",
	per_page: "500",
	sort: "relevance",
	format: "json",
	nojsoncallback: "1"
	};

	$("#iconTemp").removeClass();

	if (temp < 32) {
	//cold
	$("#iconTemp").addClass("icon cold");
	payload.text = "snow";
	} else if (temp < 50) {
	//cool
	$("#iconTemp").addClass("icon cool");
	payload.text = "spring flowers";
	} else if (temp < 72) {
	//warm
	$("#iconTemp").addClass("icon warm");
	payload.text = "sunshine";
	} else {
	//hot
	$("#iconTemp").addClass("icon hot");
	payload.text = "desert";
	}

	$("#iconMetImp").addClass("icon metImp imp");
	$("#metImpSwitch").removeClass("hidden");
	$("#metImpSwitch").html("Celcius");

	$.get("https://api.flickr.com/services/rest/", payload, function(rsp) {
	if (rsp.stat != "ok") {
	return;
	}

	var divider = 0;
	if (rsp.photos.pages > 1) {
	divider = 499;
	} else {
	divider = rsp.photos.total - 1;
	}

	var rand = Math.floor(Math.random() * divider);
	var photo = rsp.photos.photo[rand];

	var photoUrl = "https://farm" + photo.farm + ".staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_c.jpg";

	$("#test").css({
	'background-image': 'url(' + photoUrl + ')'
	});
	});
	});
	$("#test").on('click', '#metImpSwitch', function() {
	$("#metImpSwitch").html() == "Celcius" ? (
	$("#metImpSwitch").html("Fahrenheit"),
	$("#temp").text(" " + celciusTemp),
	$('#iconMetImp').animate({
	'background-position-x': '38%',
	'background-position-y': '79%'
	})
	) : (
	$("#metImpSwitch").html("Celcius"),
	$("#temp").text(" " + temp),
	$('#iconMetImp').animate({
	'background-position-x': '46%',
	'background-position-y': '79%'
	})
	);
	});
	});
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	html,
	body {
	height: 100%;
	width: 100%;
	}

	#test {
	height: 100%;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	}

	#testP {
	text-align: center;
	width: 200px;
	color: white;
	}

	#stuff {
	color: white;
	background-color: rgba(20, 20, 20, 0.5);
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	-webkit-box-shadow: 10px 10px 5px rgba(10, 10, 10, 0.5);
	-moz-box-shadow: 10px 10px 5px #888888;
	}

	#stuff > * {
	margin: 5px;
	}

	#stuff > span {
	font-size: 1.75em;
	font-family: 'Oswald', sans-serif;
	}

	#stuffRow {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	}

	#num {
	border-radius: 15px;
	background-color: white;
	}

	#temp {
	color: black;
	font-size: 3.5em;
	}

	.icon {
	overflow: hidden;
	display: inline-block;
	height: 2.5em;
	width: 25px;
	}

	.cold,
	.cool,
	.warm,
	.hot,
	.metImp {
	background-size: 1000px 600px;
	background-image: url(http://i.imgur.com/SRAsF4p.png);
	}

	.cold {
	background-position: 77.225% 67.5%;
	}

	.cool {
	background-position: 15% 79%;
	}

	.warm {
	background-position: 22.725% 79%;
	}

	.hot {
	background-position: 30.6% 79%;
	}

	.imp {
	width: 44px;
	background-position: 46% 79%;
	}

	.met {
	width: 44px;
	background-position: 38% 79%;
	}

	.hidden {
	display: none;
	}