Hello I'm trying to make a website with similar layout to this http://ift.tt/1urySG2 The main purpose is to get weather information from this site onto my page by selecting different cities from w1.weather.gov and turning that page info into an XML document to parse information from it to be added to my web page, I want the cities to show up in a drop down list ex.phoenix and when selected to put what kind of weather conditions are happening at that time by showing up on my page with this info: location, temperature, wind mph, wind direction, source it comes from and whats the condition like rain from the XML document as seen in my link above. Also when I select the city I want the picture to change to the city and the condition of the weather at that time with a picture showing it an example would be raining with a umbrella and rain coming down on it. These are the different cities I want in my drop down list: 1.Aurora 2.Anchorage 3.O'hare 4.Orlando 5. Phoenix 6. Seattle. I'm also wanting this website to remember me when I visited it with cookies by popping up with an alert box to tell me when I last visited with what city I choose before and if its my first visit to tell the user with an alert box "this is your first time your default choice is Orlando." I have been struggling with how to get started, if there is any tips or help that would be great. My code of what I have so far: http://ift.tt/1wFf2yn HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://ift.tt/1uryQOr /css/bootstrap.min.css">
<link rel="stylesheet" href="http://ift.tt/1uryQOr /css/bootstraptheme.min.css">
<script src="http://ift.tt/1mWWrGH"></script>
<script src="http://ift.tt/1mcJXw6"></script>
</head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://ift.tt/1yGHa1D'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
var data = {
"KORD" : { img: "http://ift.tt/1uryR4J", label: "jQuery" },
"2" : { img: "http://ift.tt/1wFf09x", label: "Xml" },
"3" : { img: "http://ift.tt/1ftdcIx", label: "Javascript" },
};
$('#city').change(function() {
var value = $(this).val();
if (data[value] != undefined)
{
$('#prod-image').attr('src', data[value].img);
$('#prod-title').text(data[value].label);
}
});
));
</script>
<script type='text/javascript'>
$(document.ready({
var URL = "';
alert (loading url = " + URL);
$.get(url function(data,status){
alert ("data= " + data);
$("#temparea").html("<b> the temp is ".temp);
});
});
</script>
<body>
<span id='temparea'>
</span>
$(document.ready()({
if ($.cookie("what")){
alert("welcome back"));
}
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Webpage</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li><a href="hw.html" target="_blank">Home</a></li>
<li class="active"><a href="hw.html" target="_blank">Weather</a></li>
<li><a href="http://ift.tt/1wFf2OH" target="_blank">About</a> </li>
<li><a href="gpa.html" target="_blank">GPA Calculator</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-2">
<img src="auroralogo.jpg" width=100%>
</div>
<div class="col-sm-6 col-md-4 col-lg-10">
<h1>Weather Center</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-6">
<form class="form-horizontal">
<label for="Select City">Select </br>City</label>
<select id="city">
<option vlaue="KORD"> O'Hare </option>
<option vlaue='PANC'>Anchorage </option>
<option vlaue='KARR'>Aurora </option>
<option vlaue='KORL'>Orlando </option>
<option vlaue='KPHX'>Phoenix </option>
<option vlaue='KSEA'>Seattle </option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment