Building DateColors: A Date-to-Hex JavaScript Plugin
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!