JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<script src="http://codeorigin.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<article id="directions">test</article>

CSS

#directions { background-color: red; }

JavaScript

// CLoudmade directions distance finder by evn raskob
// http://pixelist.info
// twitter: @evanraskob
//
// API:
// http://cloudmade.com/documentation/routing
//
// http://routes.cloudmade.com/<APIKEY>/api/0.3/start_point,[transit_point1,...,transit_pointN],end_point/route_type[/route_type_modifier].output_format[?lang=(Two letter ISO 3166-1 code)][&units=(km|miles)]
// example: 
// http://routes.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/api/0.3/47.25976,9.58423,47.26117,9.59882/bicycle.js
//
// see this jsfiddle for repeating animations - http://jsfiddle.net/YD7Sb/5/


// start latitutde/longitude
var startPoint = {
    lat: 47.25976,
    lon: 9.58423
};

// end (or target) latitutde/longitude
var endPoint = {
    lat: 47.26117,
    lon: 9.58423
};

// max possible distance between them
var maxDistance = 1500;

function getDirections(start, end) {
    var mapUrl = "http://routes.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/api/0.3/" + startPoint.lat + "," + startPoint.lon + "," + endPoint.lat + "," + endPoint.lon +
        "/bicycle.js?callback=?";

    // debug
    //console.log(mapUrl);

    $.getJSON(mapUrl, function (data) {
        console.log(data);
        $('#directions').html("route:" + data.route_summary.total_distance);
        var scaledDistance = parseInt(data.route_summary.total_distance, 10)/maxDistance;
        
        scaledDistance = Math.min(scaledDistance, 1);
        
        console.log(scaledDistance);
        var bgColor = 'hsl(0,100%,' + Math.floor(scaledDistance*100) + '%)';
        console.log("bg: " + bgColor);

        $('#directions')        
        .animate({
            backgroundColor: bgColor
        }, 3000);

    });

}

$(document).ready(function (e) {
    $.ajaxSetup({
        crossDomain: true,
        cache: false,
        type: "GET",
        error: function (xhr, status, error) {
            alert("An AJAX error occured: " + status + "\nError: " + error + "\nError detail: " + xhr.responseText);
        }
   ...