JSFiddle - React, Tailwind, and code Playground

by pseudosavant

HTML

<div id="nextRace"></div>

JavaScript

var races =  [
    {
        "title": "Boston race",
        "location": "Boston MA",
        "dates": "12-14 Jan",
        "publishDate": "2012-01-12T21:00:00.000Z" // 1/12 9pm UTC, 4pm in Boston (-5 from UTC)
    },
    {
        "title": "New York race",
        "location": "New York NY",
        "dates": "1-2 Feb",
        "publishDate": "2012-02-01T21:00:00.000Z" // 2/1 9pm UTC, 4pm in NYC (-5 from UTC)
    },
    {
        "title": "Austin race",
        "location": "Austin TX",
        "dates": "29-30 Mar",
        "publishDate": "2012-03-29T22:00:00.000Z" // 3/29 10pm UTC, 4pm in Austin (-6 from UTC)
    }
];

// A publish date can be created this way (e.g. Austin race):
// var d = new Date(2012,02,29);
// d.setUTCHours(22);
// JSON.stringify(d);
//
// or you can just see how it is structured and write it the way you want it manually

var showNextRace = function() {
    var today = new Date();

    for (var i=0; i<races.length; i++) {
        var race = races[i];
        var publishDate = new Date(race.publishDate);
        
        if (publishDate > today) {
            $("#nextRace").html("The next race is "+ race.title+" in "+ race.location +" on "+race.dates);        
            return;
        }
    }
};

$(document).ready(function(){
    showNextRace();
});