I'm working on a project which contains a collection of 40 to 50 items. None of the items have photos or other distinguishing visual indicator, so I wondered...

Could I add a difference in color based on the date of each item in the collection?

In short, the answer is: yes. Below is an example of the finished product, and afterwards is an explanation of how it's built.

Building DateColors

First, I wanted to explore how easy it was to convert a JavaScript date to a hex value which usable by CSS for a background color.

I started by assuming we'd want a timestamp in the following format:

YYYYMMDD

Which we could achieve using a nice function in JavaScript:

  var convertDateToTimestamp = function( date ) {
    var timestamp = date.getFullYear() + '' + date.getMonth() + 1 + '' + date.getDate();

    return timestamp;
};

Notice that we had to add little strings in between each date part so it didn't try to add them using math. Maybe there's better way to do that; I don't know how.

Next, we need to convert that timestamp integer into a valid hex value:

  var convertIntToValidHex = function( int ) {      
    // Parse string as Base16 (hex)
    var hex = parseInt(int, 10).toString(16);

    return hex;
};

There's a pretty neat way to do this in JavaScript: using the toString() utility function and passing in 16 (so it parses it in base 16/hexadecimal).

However, this is where we run into our first problem. In order to get a valid hex value to use in CSS, it needs to be either 6 or 3 characters in length. To fix this, we can add a couple checks:

  var convertIntToValidHex = function( int ) {      
    // Parse string as Base16 (hex)
    var hex = parseInt(int, 10).toString(16);

    // If it's less than six, trim it to three
    if ( hex.length < 6 ) {
        hex = hex.substring( 0, 3 );
    }

    // Limit it to six chars for CSS styles
    return hex.substring( 0, 6 );
};

Usage

You can try this out on your own site!

  <ul class="dates">
    <li>
        <span data-date>July 31, 2001</span>
        <p>My custom date color</p>
    </li>
</ul>

<script src="http://codepen.io/jplhomer/pen/BjRGwx.js"></script>

<script>
window.addEventListener('load', function() {
    new DateColors();
});
</script>

Note that the script expects there to be a valid, parsable date string in the innerText of an element with the [data-date] attribute added. Alternatively, you can pass in your own element and date selectors:

  <ul class="my-date-container">
    <li>
        <a href="#" class="fun-link">July 31, 2001</a>
        <p>My custom date color</p>
    </li>
</ul>

<script src="http://codepen.io/jplhomer/pen/BjRGwx.js"></script>

<script>
window.addEventListener('load', function() {
    new DateColors({
        selector: '.my-date-container li',
        dateSelector: '.fun-link'
   });
});
</script>

Shortcomings

It turns out that having to trim the hexadecimal value to six or three valid CSS characters is a bummer.

It makes colors for way different dates appear similar, like January and May in the example above. I experimented with reducing the original integer by a certain factor and rounding up the hexadecimal values to try to differentiate similar "chopped" colors, but I didn't figure it out.

Other than that, it was a fun exercise!

1,212 0 1