Weather Underground API with Ajax
<p>I am supposed to create an app with the Weather Underground API using Ajax and JSON but there really wasn't much direction as to how to go about it. If I could see a completed version of the code so I have some idea of how I should even begin. That's how I learn. I know a little about JSON but I'm not sure what my next step is here.</p>

<p>This is my code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;!--Your Name
Date
Month
--&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Weather API App&lt;/title&gt;

    &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;div id="container"&gt;
        &lt;header&gt;
            &lt;img class="logo" src="http://icons.wxug.com/logos/PNG/wundergroundLogo_4c_horz.png" alt="logo"/&gt;
            &lt;h1&gt;Your Awesome Forecast Page&lt;/h1&gt;
            &lt;nav&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Weather&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Conditions&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Forecasts&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;
        &lt;/header&gt;
        &lt;div class="conditions"&gt;
            &lt;h2&gt;Current Conditions&lt;/h2&gt;
            &lt;div class="window1"&gt;

            &lt;/div&gt;
            &lt;div class="window1"&gt;

            &lt;/div&gt;
            &lt;div class="window1"&gt;

            &lt;/div&gt;
            &lt;div class="window1"&gt;

            &lt;/div&gt;
            &lt;div class="window1"&gt;

            &lt;/div&gt;
            &lt;div class="window1"&gt;

            &lt;/div&gt;
            &lt;p&gt;
                &lt;!--  1. Display the icon for the current conditions (observation)
                2. Display weather
                3. Display temperature in Ferinheiths
                4. Display feels like temperature
                5. Display relative humidity
                6. Display wind direction
                7. Display wind miles per hour
            --&gt;
            &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="hourly"&gt;
            &lt;h2&gt;Your Hourly 1-day forecast&lt;/h2&gt;
            &lt;p&gt;
            &lt;!--  1. Display the Hourly 1-day forecast
            2. Display the condition for each hour
            3. Display the temperature for each hour
            --&gt;
            &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="7_day"&gt;
            &lt;h2&gt;Your 7-day forecast&lt;/h2&gt;
            &lt;p&gt;
            &lt;!--    1. Display the 7-day forecast
            2. Display the icon
            3. Display weather
            4. Display highs
            5. Display lows
        --&gt;
            &lt;/p&gt;
        &lt;/div&gt;

    &lt;/div&gt;&lt;!--Closes Container--&gt;
    &lt;script src="js/main.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

@charset "UTF-8";
/* CSS Document */

body{
    font-family: Arial, Helvetica, sans-serif;
    background-color:darkblue;
}

#container{
    width: 90%;
    margin: 0 auto;
}

/*Header
------------------------------*/
header {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.75);
    margin-bottom: 30px;
}

nav {
    padding: 0;
    margin: 0;
}

nav ul {
    padding: 0;
    margin: 0;
    padding-left: 10px;
}
nav li {
    display: inline-block;
    padding-left: 10px;
}

li a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

li a:hover {
    color: white;
}

.logo {
    width: 300px;
    margin: 0;
    display: inline-block;
}

h1 {
    display: inline-block;
    margin: 0;
    padding: 2%;
}
</code></pre>

<p>main.js</p>

<pre><code>$.ajax({
    url : "http://api.wunderground.com/api/ef5a156e62f050d2/conditions/q/OH/Columbus.json",
    dataType : "json",
    success : function(url) {
        var location = url['location']['city'];
        var temp_f = url['current_observation']['temp_f'];
        $(".conditions").html("Current temperature in " + location + " is: " + temp_f+"ºF");
    }
});
</code></pre>