Chronoshift - (Rebuilt) Binary Clock

Moz 🛸 — Sun, 26 Dec 2021 18:38:48 +0000

Preface

After a few months away from coding I have finally recovered the energy and motivation to code after what seemed like the roughest months of my life 💀. This past year has been a mix of really unlucky events for me and I just had to take some time for myself. As of now I can say I'm feeling pretty good and ready to get back to work 🔥.

Unfortunately, the lack of practice made me forget quite a lot. Looking through my repos I wondered how I could get to remember the basics and go back to the pace I was on when I stopped. Concluded I should rebuild an old app since I'm already familiar with it and would also get to improve some things I think could've been done differently 👌.

That being said, I chose to rebuild a binary clock I made following this tutorial back in the day. After completing the tutorial I took my time designing my own version of the clock and building it on my own so I could put the knowledge in practice 🛠️.

Bitclock - Old project

This was the old version and although I was happy with the overall
design I still had the feeling it could be better 🤔.

For a basic clock that converts each number of the time into a four-digit binary sequence I assumed there were not many features I could implement other than a dark-theme and some links to Twitter and GitHub. This app was just a small project I did to get my hands around CSS grid and responsive design.

Design

If I was going to rebuild this app I would like to make a design that was not only clean but also visually appealing ✨.

As a developer, designing was never my strongest skill so I had to do some decent amount of research and gather some concepts that could hopefully point me in the right direction 🥲.

After many shots saved on Dribble I hopped on Figma and put everything together.

HTML

Used semantic HTML elements whenever possible as opposed to make everything out of divs as I had previously done. Still have to dive deeper in this area but this was quite easy to accomplish as the given layout was quite simple ✏️.

CSS

Declared all the colors in the :root pseudo class as variables so I could define light and dark themes with them.

Went with the CSS BEM (Block, Element, Modifier) architecture when applying classes in the HTML as this is a best practice I want to implement in my future projects. It's similar to object-oriented programming but directed to CSS.

The harder part was making the clock component responsive between different window-sizes but managed to get it done with the use of media-queries.

JavaScript

Almost the same as the old version but with a few tweaks here and there. The core idea was:

Get the current time (17:20:32).
Split each section into an array ([1,7], [2,0], [3,2]).
Iterate through each item of each array and get the corresponding four-digit binary sequence returned as an array (1 = [0, 0, 0, 1]).
Iterate through each binary sequence and whenever a "1" is found, add the class ".on" to the corresponding bit in the clock HTML markup turning it on. If it is a "0", remove the class turning the bit off.
Repeat the process every 200ms.

Reborn as Chronoshift

Kept the same features as before but arranged them differently this time with all the navigation placed down at the footer. Again, I still think a designer would do a better job with the UI but this time I was extremely satisfied with the result 😊.

You can check the live version here: Chronoshift

Conclusion

There's still a lot to cover but I think I will progress much faster now. Have lots of new ideas in the design phase and cannot wait to bring them to life. Hope you enjoyed the redesign, until next time 👋.

DEV Community: Moz 🛸