Day 10 – Color Clock

10% of the way to the 100 projects! Yay! Inspired by JD, I have made a Color Clock that changes color code for every second that passes.

Check out the clock here.

Things I have learned and how I made it and what I should/could have done:

  • The BF told me about the new Date() function that has all sorts of parameters (I don’t even know if that’s the right word for them haha) such as hours, minutes, seconds etc. It will take the users computer’s data so that it shows the correct time for each user.
  • I made sure that if the time was 1 minute past 3, that an if statement would add a 0 before the 1 so that there is always 6 digits in the time-count, because that is what generates the HEX code, also with 6 digits.
  • To make sure we don’t get all the dark colours, and only the brighter ones, I multiplied the hours, minutes and seconds with 10, 4 and 4 to that the number would change. But that also causes the colours to have a massive shift every time a 10 minute mark passes. Ie. the image above; it’s purple, and when it goes to 15.30 it becomes brown. Those colours are pretty far from each other, so I might have been able to do something smarter, but I didn’t have the time.
  • Finally a setInterval function made sure that it updates the updateTime function every 100 micro-seconds (is that even right?!) so that it will at least be updated every second.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s