JavaScript digital clock with neon glow
Introduction
This was an idea hatched whilst suffering a small dose of insomnia. I lay there staring at my alarm clock with its dimmed digital output displaying a sad 02:53 and wondered… “How difficult would it be to recreate a digital clock with a neon glow using a font that only had the numerals and colon glyphs?”
Displayed here with a dark background in case you're using the Light Mode. It's best viewed in Dark Mode, click the button in the top right corner and scroll back down to see the difference.
Slightly more preamble
It's a curse of the overly active WebDev brain, however, I wrote an article that covers how to create a custom font with only the glyphs you need. This page is just to show the results that I came up with in the end. OCD now satisfied. I also managed to get to sleep shortly afterwards… just in case you wondered.
The process
I chose Digital Dismay as it's chunky, non italic and for me the perfect LED display font to use. After working out how to create my custom font I then, in the spirit of “don't reinvent the wheel”, did a search for “CSS add text neon glow” and naturally found an article on CSS-Tricks. Written by Silvia O'Dwyer it covered far more than I needed and was a perfect fit.
Last thing to think about was what if the User has disabled JavaScript?
Checking for JavaScript disabled
We wrap the area that should display the effect with HTML comment tags (<!-- … -->), they are placed within <noscript> tags. Thus with JS disabled the area itself is 'invisible'.
<noscript>
<!--- Engage Cloaking
</noscript>
<section id="digital-clock">
<div class="inner">
<div class="container">
<div id="clock"></div>
</div>
</div>
</section>
<noscript>
Disengage Cloaking -->
</noscript>
<noscript>
<div class="text">
<h2>JavaScript Is Disabled</h2>
<p>Enable JS and reload this page.</p>
</div>
</noscript>We then display an error message informing the User that they need to enable JS in order to view the effect. “Simples.”
Download sample code
I’ve assembled all the parts so that you can play with them. The standard – software is provided “as is”, without warranty of any kind – applies here.
That’s all folks
A simple but fun project that I enjoyed creating and as always learnt new things in the process. Have a play and if you use it in any projects please get in touch and send me the URL so I can take a look.
// End of Project
More Information
Further Reading
- Digital Dismay (Example) Font (1001fonts.com)
- How to Create Neon Text With CSS (css-tricks.com)
- Silvia O'Dwyer's GitHub Account (github.com)
About Dave Barr
