JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="centered">
    <div class="siteTitle">
        <h2 class="subTitle"><a href="http://joshuapullen.com">Josh Pullen</a>'s 2015</h2>
        <h1 class="mainTitle">Summer Running Challenge</h1>
    </div>
    <div class="content">
        <div class="timeline">
            <!-- <div class="day">
                <div class="date" id="5-18-15">5/18/15</div>
                <div class="text">I ran 3.1 miles in 26 minutes.</div>
            </div>
            <div class="day">
                <div class="date" id="5-17-15">5/17/15</div>
                <div class="text">I ran 2 miles in 19 minutes.</div>
            </div> -->
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
    font-family:'Open Sans', sans-serif;
    margin:0px;
    padding:40px;
}

.centered {
    width:100%;
    max-width:600px;
    margin:0 auto;
}

.mainTitle, .subTitle {
    font-weight:bold;
    line-height:1;
    -webkit-margin-before:0;
    -webkit7argin-after:0;
    margin: 0px 0px;
}

.subTitle {
    position:relative;
    left:4px;
}

.siteTitle a {
    color:inherit;
    text-decoration:none;
    transition:color 0.1s ease-out;
}
.siteTitle a:hover {
    color: black;
}
.subTitle {
    color:#555;
}

.siteTitle {
    margin-bottom:30px;
}


.day {
    background:#38e;
    padding:30px;
    margin-bottom:30px;
    border-radius:2px;
}

.date {
    font-weight:bold;
    font-size:20px;
}

JavaScript

var data = {
    1: {
        date: "5/17/15",
        weekday: "Sunday",
        miles: 2,
        time: "19 minutes",
        difficulty: 1 // Scale from 0 to 3
    },
    2: {
        date: "5/18/15",
        weekday: "Saturday",
        miles: 3.1,
        time: "26 minutes",
        difficulty: 1,
        notes: "Today was a local 5K race. It was really fun!"
    },
    3: {
        date: "5/19/15",
        weekday: "Sunday",
        miles: 0,
        time: "0 minutes",
        difficulty: 0,
        notes: 'I was busy eating cake.'
    }
};

$.each(data, function(index, value) {
    var id = value.date.replace(/\//g, '-');
    if (value.miles == 0) {
        $(".timeline").prepend("<div class='day' id='" + id + "'><div class='date'>" + value.date + "</div><div class='text'>I didn't run today. </div></div>");        
    } else {
        $(".timeline").prepend("<div class='day' id='" + id + "'><div class='date'>" + value.date + "</div><div class='text'>I ran " + value.miles + " miles in " + value.time + ". </div>");
    }
    if (value.notes) {
        $(".day:nth-of-type(1) .text").append(value.notes);
    }
    var darkness = Math.round((3 - value.difficulty) / 3 * 215 + 40);
    $("#" + id).css("background", "rgb(" + darkness + ", " + darkness + ", " + darkness + ")");
    if (value.difficulty >= 2) {
        $("#" + id).css({
            "color": "white",
            "text-shadow": "1px 1px 2px black"
        });
    }
});