lab6.1
Version:
learn node
79 lines (63 loc) • 2.6 kB
HTML
<html>
<head>
<title>Utah City Finder</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<form>
Enter a city in Utah: <input type="text" id="cityfield" value=""><br>
Suggestion: <span id="txtHint">Empty</span>
<input id="button" type="submit" value="Submit">
<script>
$("#button").click(function(e){
var value = $("#cityfield").val();
e.preventDefault();
$("#dispcity").text(value);
var myurl = "https://api.wunderground.com/api/6dc926a15a77304e/geolookup/conditions/q/UT/"+$("#cityfield").val()+".json";
console.log("\"" + myurl + "\"");
$.ajax({
url : myurl,
dataType : "jsonp",
success : function(parsed_json) {
console.log(parsed_json);
var location = parsed_json['location']['city'];
var state = parsed_json['location']['state'];
var temp_string = parsed_json['current_observation']['temp_f'];
var current_weather = parsed_json['current_observation']['weather'];
everything = "<ul>";
everything += "<li>Location: "+location;
everything += "<li>State: "+state;
everything += "<li>Temperature: "+temp_string;
everything += "<li>Weather: "+current_weather;
everything += "</ul>";
$("#weather").html(everything); }
})
});
$("#cityfield").keyup(function() {
$.getJSON("getcity/cities.dat.txt?q="+$("#cityfield").val(),function(data) {
var everything;
everything = "<ul>";
$.each(data, function(i,item) {
everything += "<li> " +data[i].city;
});
everything+= "</ul>";
$("#txtHint").html(everything);
})
/*.done(function() {console.log('getJSON request succeeded!'); })
.fail(function(jqXHR, textStatus, errorThrown){
console.log('getJSON request failed! ' + textStatus);
console.log("incoming "+jqXHR.responseText);
})
.always(function(){ console.log('getJSON request ended!'); })
.complete(function(){ console.log("complete"); });*/
});
</script>
</form>
<p>City</p>
<textarea id="dispcity">No City</textarea>
<p>Current Weather</p>
<div id="weather">No weather</div>
</form>
</body>
</html>