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>
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>
<p>My custom date color</p>
</li>
</ul>

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

<script>
new DateColors({
selector: '.my-date-container li',