JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
<div id="loading"></div>
<div id="sidebarwrap">
<div id="sidebar"></div>
    </div>

CSS

#sidebarwrap{width:300px;margin:20px}
.hotel-info img {margin-right:9px}
.hotel-info i {margin-right:4px}
.hotel-info span{color:darkgreen}
.hotel-info h5 {
    color: #013268;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 0px;
    margin: 0px 0px 0px 85px;
    padding: 0px;
    position:absolute;
  width:14em; 
   word-wrap:break-word;
}
.hotelinformation{   margin: 43px 0px -40px 0px;}
.hotel-info .price {
    color: #3952b5;
    font-weight: bold;
    	text-shadow: 1px 1px 0px #e4e4e4;
    	letter-spacing: -1px;
	filter: dropshadow(color=#e4e4e4, offx=1, offy=1);	
    font-size: 1.4em;

    }
.hotel-info {
    width:98%;
    min-height:50px;
    margin:0px 5px 2px 0px;
    display:block;
    -moz-opacity: 0;
    opacity: 0;
    background:#f7f7f7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter:alpha(opacity=0);
    float:left;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #fff;
    padding:6px;
    line-height: 18px;
    font-size: 12px;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.9);
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.9);
}
.hotel-info .selected {
  -webkit-box-shadow: inset 0 8px 6px -6px black;
    -moz-box-shadow:inset 0 8px 6px -6px black;
    box-shadow:inset 0 8px 6px -6px black;
    border:1px solid #3975ff;
}

JavaScript

//LIST based on # people, Dates and location - hotels are returned based on hotels that match requirements in chosen area.
// DO NOT USE THIS URL IN YOUR CODE - contact Andrew Pougher if you need tutorial for EAN
// can use &latitude=40.4167754&longitude=-3.7037901999999576 or &city=Chamonix&stateProvinceCode=&countryCode=FR

var url = "http://api.ean.com/ean-services/rs/hotel/v3/list?minorRev=20&apiKey=p9ycn9cxb2zp3k3gfvbf5aym&sig=5fca2cc7ad34205fca91e92f72390561&cid=55505&locale=en_GB&city=Chamonix&stateProvinceCode=&countryCode=FR&room1=4&room2=2&room3=3&numberOfResults=5&arrivalDate=4/20/2013&departureDate=4/22/2013&currencyCode=GBP&sort=PRICE"

$.ajax({
                    url: url,
                    dataType: 'jsonp',
                    beforeSend: function () {
                        $("#loading").html('loading...');
                    },
                    success: function (data) {

var base = (data.HotelListResponse.HotelList.HotelSummary)
 var customerSessID = (data.HotelListResponse.customerSessionId);
     $("body").prepend(customerSessID + "<br>")
               
     
     // START MAIN LOOP
        var clusterMarkers = [];
     $(base).each(function (eventID,eventData){           
//$.each(base.HotelList, function(eventID,eventData) {  

    // IMS
    var singlePic = [];
    $(this).each(function(index,val) {
    singlePic.push(val.thumbNailUrl);
    });  
         //Loaction Info 
    var locInfo = [];
    $(this).each(function(index,val) {
    locInfo.push(val.locationDescription);
    }); 
         
    //COST Info 
    var rtotal = [];
    var cur = [];
    var roomGroupPpl = [];
    $(this.RoomRateDetailsList).each(function(index) {
    rtotal.push( this.RoomRateDetails.RateInfos.RateInfo.ChargeableRateInfo['@total'] );
          cur.push( this.RoomRateDetails.RateInfos.RateInfo.ChargeableRateInfo['@currencyCode'] );
         $(this.RoomRateDetails.RateInfos.RateInfo.RoomGroup.Room).each(function(index) {
       ...