7-Segment LED Clock

Digital clocks include digits made up of seven separate segments that light up depending on the number that needs to be shown. Write a working, ticking digital clock made up of digit “components” that mimic the behavior of a 7-segment LED digit. The digit “component” should take a number 0-9 as input, and render 7-segment digit.

Provide the candidate with an image similar to this one (

https://i.imgur.com/ka33ZGg.png⁠

⁠

Screenshot 2024-01-24 at 12.43.03 PM.png

⁠

Requirements and things to look for

Specific libraries like React are not required

Styling/layout

We want this to look legible and reasonably good, but exact styling, including colors, spacing between segments, and the colon between hours/minutes/seconds is not required

Digits could be stacked vertically instead of lined up horizontally, for example. It’s more important to get basic layout, styling and functionality working first.

No CSS floats!

Correct use of relative and absolute positioning, if the candidate is using these for layout

Can the candidate work out how to map an integer to a list of segments that need to be “turned on” to form each number, 0-9? There are different ways to do this, but a map from numbers to segments is the most straightforward.

Correct use of setInterval() and Date() APIs. Using setTimeout() would work too, but is not ideal.

If the candidate defaults to setTimeout() instead of setInterval() do they know the difference and can they figure out why it’s not the best choice in this case?

Converting or “parsing” a one or two digit number into two digits so they can be independently rendered by the digit component

5 → 05… 12 → 12

Reusability

Use of class instead of id attributes. If candidates don’t get this right away and use ids everywhere, probe and ask about pros and cons of each to see if they can figure out the issue.

Structuring the digit as a kind of component that can easily be replicated, and can function independently.

A framework like React is very useful for this, but is definitely not the only way to do it.

Bonus points

Polished look & feel

Familiarity with CSS flexbox

Familiarity with Javascript Set data structure for the map from numbers to segments

Guidance

If the candidate doesn’t know where to start, suggest starting with a digit function/component that can accept a number from 0-9 as input, and render the single 7-segment digit by itself

Styling/layout

There are many ways to setup and layout a single digit. Candidates often approach this with two <div> elements with borders turned on and off using CSS. This can work, but is trickier and requires more code

They will have to map not only numbers to 7-segments, but also to specific CSS class combinations in order to get the correct borders showing.

If they’re spending more than 10 minutes on CSS/layout alone, provide them with this code. They can modify it as needed.

Note: we should not expect candidates to be able to write SVG on the fly

If they get the single digit down and don’t know how to proceed, suggest moving on to rendering multiple, independent digits, and then how to show the actual time

Since this should be a ticking clock and we want to easily see that the clock is updating, suggest starting with just seconds, then add on minutes and hours.

Did they clean up the timer created by setInterval()? If not, ask about this.

If they’re using React and the useEffect hook to start the interval, there’s a specific way to clear it out:

The useEffect function has to return another function which is called automatically on cleanup. clearInterval will need to be called from here.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.