HTML, CSS and JavaScript playground

<html>

<head>

</head>

<body>
    <div>
        <ul id="menu" style="width:20%;float:left">
            <li class="ui-state-enabled">
                <div>Toys (n/a)</div>
            </li>
            <li>
                <div>Books</div>
            </li>
            <li>
                <div>Clothing</div>
            </li>
            <li>
                <div>Electronics</div>
                <ul>
                    <li class="ui-state-enabled">
                        <div>Home Entertainment</div>
                    </li>
                    <li>
                        <div>Car Hifi</div>
                    </li>
                    <li>
                        <div>Utilities</div>
                    </li>
                </ul>
            </li>
            <li>
                <div>Movies</div>
            </li>
            <li>
                <div>Music</div>
                <ul>
                    <li>
                        <div>Rock</div>
                        <ul>
                            <li>
                                <div>Alternative</div>
                            </li>
                            <li>
                                <div>Classic</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>Jazz</div>
                        <ul>
                            <li>
                                <div>Freejazz</div>
                            </li>
                            <li>
                                <div>Big Band</div>
                            </li>
                            <li>
                                <div>Modern</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>Pop</div>
                    </li>
                </ul>
            </li>
            <li class="ui-state-enabled">
                <div>Specials (n/a)</div>
            </li>
        </ul>

</html>
<script id="weatherTemplate" type="text/template">
  <div style="display:block;"> Humidity : <%= humidity %>  </div></br>
</script>

// Write JavaScript here
//$("#header").hide();
//$("#header").html("This is incorrect");
$(document).ready(function () {

var Main = Backbone.Model.extend({
			schema: {
				temp: 'Text',
				temp_min: 'Text',
				temp_max: 'Text',
				pressure: 'Text',
				sea_level: 'Text',
				grnd_level: 'Text',
				humidity: 'Text',
				temp_kf: 'Text'
			},
			defaults: {

temp: '0',
				temp_min: '0',
				temp_max: '35',
				pressure: '2',
				sea_level: '4',
				grnd_level: '8',
				humidity: '92',
				temp_kf: '298'
			}
		});
	var Weather = Backbone.Model.extend({
			schema: {
				id: 'Text',
				main: 'Text',
				description: 'Text'
			},
			defaults: {
				id: '1',
				main: 'Warm',
				description: 'Normal-Cold'
			}
		});
	var Clouds = Backbone.Model.extend({
			schema: {
				all: 'Text'
			},
			defaults: {
				all: 'cloudy'
			}
		});
	var Wind = Backbone.Model.extend({
			schema: {
				speed: 'Text',
				dig: 'Text'
			},
			defaults: {
				speed: '1',
				dig: '0'
			}
		});
	var Sys = Backbone.Model.extend({
			schema: {
				pod: 'Text'
			},
			defaults: {
				pod: '1'
			}
		});
	var Entry = Backbone.Model.extend({

initialize: function () { console.log(this);},
			schema: {
				dt: 'Text',
				main: {
					type: 'NestedModel',
					model: Main
				},
				weather: {
					type: 'NestedModel',
					model: Weather
				},
				clouds: {
					type: 'NestedModel',
					model: Clouds
				},
				wind: {
					type: 'NestedModel',
					model: Wind
				},
				sys: {
					type: 'NestedModel',
					model: Sys
				},
				dt_txt: 'Text'
			},
			parse: function (data) {
				this.Main = new Main({
						temp: data.main.temp,
						temp_min: data.main.temp_min,
						temp_max: data.main.temp_max,
						pressure: data.main.pressure,
						sea_level: data.main.sea_level,
						grnd_level: data.main.grnd_level,
						humidity: data.main.humidity,
						temp_kf: data.main.temp_kft
					});
				this.Weather = new Weather({
						id: data.weather.id,
						main: data.weather.main,
						description: data.weather.description
					});
				this.Clouds = new Clouds({
						all: data.clouds.all
					});
				this.Wind = new Wind({
						speed: data.wind.speed,
						dig: data.wind.dig
					});
				this.Sys = new Sys({
						pod: data.sys.pod
					});
			}
		});
	var weatherCollection = Backbone.Collection.extend({
			url: 'https://api.openweathermap.org/data/2.5/forecast?id=1259229&appid=68ae1ee47962d497d49807764938114d',
			parse: function (response) {
				if (_.isObject(response.list)) {
					return response.list;
				} else {
					return response;
				}
			},
			initialize: function () {
				this.fetch();
			},
			model: Entry
		});
	var Starter = Backbone.View.extend({
			initialize: function () {
				this.collection = new weatherCollection();
				/*this.collection.fetch();*/
				console.log("Inside View Initialization");
				console.log(this.collection.models);
				//alert(JSON.stringify(this.collection));
				$('#content').html(this.collection.length);
				setInterval(function () {

$('#header').html('This is Orange');
					$('#content').html('This is Sky Blue');
					$('#footer').html('This is Green');
					$('#header').toggle();
					$('#content').toggle();
					$('#footer').toggle();
				}, 10000);
				this.render();
			},
			render: function () {
				//$('#header').toggle();
				//$('#content').toggle();
				//$('#footer').toggle();
              console.log(this.collection.models);
			}
		});
	var starterView = new Starter();
	var menu = function () {
		$("#menu").menu();
	};
    menu();
    var handler = function(){
       if($(this).find('div').text() == 'Books')      {
         //$("#content").html('Books Clicked');
         /*
         var data = starterView.collection.models[0].Main.toJSON();
         var html = $("#weatherDiv").html();
         */
         $("#content").html((_.template($("#weatherTemplate").html()))(starterView.collection.models[0].Main.toJSON()));//
         _.each(starterView.collection.models, function(data){
           $("#content").append((_.template($("#weatherTemplate").html()))(data.Main.toJSON()));
         });
       }
    };
    $("ul li").click(handler);

});

Check out our Python playground!