Digital Alarm Clock
Let's see how we can display numbers like a digital alarm clock does. If we imagine each number as a grid of LEDs or pixels, we just need to create a mapping that knows which LEDs are lit for which number. Once we achieved this, we can use JavaScript's Date object to use the actual current time to display on our alarm clock!
Demo
Code
To see the aforementioned mapping, have a look at DigitalNumber.vue. The arrays contain all the LED pixels that should be lit in order to display the actual number.
We also have an LedPixel component that is used by the DigitalNumber component. It expects a value for the
isLit prop in order to be lit or not. To determine that, we need to check if the current pixel is inlcluded in the
representative array of the number.
Now, to display a number, we just use the DigitalNumber component and pass the number as a prop value like so:
<DigitalNumber :number="3" />.
To make it an actual alarm clock, we use JavaScript's Date object and process the hours, minutes and seconds and
compose it together to display two numbers for the hours, two for the minutes and two for the seconds if you want to
comment in the commented out code pieces. Check out AlarmClock.vue for more explanation.
Conclusion
Again one of the examples where I thought it would be much harder to achieve this functionality and I'm sure that there's still some space for simplification or improvement here.
Do you have any ideas on how to improve this? - Let me know about it on Twitter!