weather-jami
Version:
weather-jami contains a simple utah weather oriented web server
165 lines (136 loc) • 4.53 kB
HTML
<html>
<head>
<title> City Weather</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
Enter a Utah City: <input type="text" id="cityfield" value=""><br>
Suggestions: <span id="txtHint"> Empty</span>
<br>
<input id="button" type="submit" value="Submit">
</form>
<br>
City
<br>
<textarea id="dispcity"> No City</textarea>
<div id="weather"> No Weather </div>
<hr>
<!-- COMMENTS -->
<form id="commentForm" action="">
Name: <input type="text" id="Name" value="jami"><br>
Comment: <input type="text" id="Comment" value="awesome"><br>
</form>
<button id="submitComment" type="button">Submit Comment</button>
<button id="showComments" type="button">Show Comments</button>
<button id="clearComments" type="button">Clear Comments</button>
<div id="json">json</div>
<div id="done">return</div><br>
<p>Current Comments</p>
<div id="currentComments"><div>
<script>
$("#clearComments").click(function(f)
{
console.log("clearing comments");
var url = location.protocol+"//jami.space/comment/clear";
$.getJSON(url, function(data)
{
var everything;
everything = "<ul>";
$.each(data, function(i, item)
{
everything += "<li> Name: "+data[i].Name+" Comment: "+data[i].Comment;
});
everything += "</ul>";
$("#currentComments").html(everything);
});
});
$("#submitComment").click(function(f)
{
console.log("submitting comment");
var name = $("#Name").val();
var comment = $("#Comment").val();
var json = {"Name":name, "Comment":comment};
var jsonString = JSON.stringify(json);
$("#json").html(jsonString);
var url = location.protocol+"//jami.space/comment";
jQuery.ajax
({
url: url,
type: "POST",
data: jsonString,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function()
{
$("#done").append("Success");
}
});
});
$("#showComments").click(function(f)
{
console.log("showing comments");
var url = location.protocol+"//jami.space/comment";
$.getJSON(url, function(data)
{
var everything;
everything = "<ul>";
$.each(data, function(i, item)
{
everything += "<li> Name: "+data[i].Name+" Comment: "+data[i].Comment;
});
everything += "</ul>";
$("#currentComments").html(everything);
})
});
$("#button").click(function(e) {
var value = $("#cityfield").val();
$("#dispcity").text(value);
e.preventDefault();
var myurl = "https://api.wunderground.com/api/800bea779d1a3fac/geolookup/conditions/q/UT/";
myurl += value;
myurl += ".json";
console.log(myurl);
var weatherInfo = "";
$.ajax({
url: myurl,
dataType: "jsonp",
success: function(success) {
console.log(success);
var loc = success['location']['city'];
var temp = success['current_observation']['temperature_string'];
var stat = success['current_observation']['weather'];
weatherInfo += "<ul>";
weatherInfo += "<li>Location: "+loc;
weatherInfo += "<li>Temperature:"+temp;
weatherInfo += "<li>Weather: "+stat;
weatherInfo += "</ul>";
$("#weather").html(weatherInfo);
}
});
});
$("#cityfield").keyup(function ()
{
//var url = "https://students.cs.byu.edu/~clement/CS360/ajax/getcity.cgi?q=";
var url = location.protocol+"//jami.space/getcity?q=";
url += $("#cityfield").val();
console.log('sending request: ' + url);
$.getJSON(url,function(success) {
var everything = "<ul>";
$.each(success, function(i,item) {
everything += "<li> "+success[i].city+"</li>";
});
everything += "</ul>";
$("#txtHint").html(everything);
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log("Status"+textStatus);
console.log("content: "+jqXHR.responseText);
})
.done(function() {
console.log("Done");
});
});
</script>
</body>
</html>