Hello I'm trying to make a website with similar layout to this http://ift.tt/1urySG2 The main purpose is to get info from w1.weather.gov and turn it into an xml document and to get the information from a drop down list that has different cities like phoenix and put what kind of weather conditions are that will show up on my page with this info: location, tempature, wind mph, wind direction, source and whats the condition. When I select the city I want the picture to change to what the city looks like and the condition of the weather picture. I'm also wanting to support different cities such as: http://ift.tt/1wFf2yl Where ABBRV can be: 1. KORD -> O’hare 2. KARR -> Aurora 3. KPHX -> Phoenix 4. KORL -> Orlando 5. KSEA -> Seattle 6. PANC -> Anchorage also I'm wanting this website to remeber with cookies by poping up with an alert box to tell me what I last visited 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 to get this code to work I have started but get confused when it comes to getting the drop down list to cordinated with what the weather conditions are I do not know what to do next, if their 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