Create a CSS-only Word Clock
6 min readDec 15, 2021
--
That’s right! We are going to build a real-time, animated Word Clock that keeps the time. All with just HTML and CSS and no JavaScript at all.
Adding the Words
First, we need to add all the words including the fillers to make the rectangle. I organised everything into rows, and used a mono-space font to make sure with the same number of characters in each row, the rows will end up being the same width.
<div class="clock">
<div class="row">
<span class="filler">ac</span><span id="quarter">quarter</span
><span class="filler">dco</span>
</div>
<div class="row">
<span id="twentym">twenty</span><span id="fivem">five</span
><span class="filler">xw</span>
</div>
<div class="row">
<span id="half">half</span><span class="filler">tyf</span
><span id="tenm">ten</span><span class="filler">os</span>
</div>
<div class="row">
<span id="minutes">minutes</span><span class="filler">e</span
><span id="to">to</span><span class="filler">ur</span>
</div>
<div class="row">
<span id="past">past</span><span class="filler">oru</span
><span id="four">four</span><span class="filler">t</span>
</div>
<div class="row">
<span id="seven">seven</span><span class="filler">x</span
><span id="twelve">twelve</span>
</div>
<div class="row">
<span id="nine">nine</span><span id="five">five</span
><span class="filler">t</span><span id="two">two</span>
</div>
<div class="row">
<span id="eight">eight</span><span class="filler">f</span
><span id="eleven">eleven</span>
</div>
<div class="row">
<span id="six">six</span><span id="three">three</span
><span id="one">one</span><span class="filler">g</span>
</div>
<div class="row">
<span id="ten">ten</span><span class="filler">sez</span
><span id="oclock">oclock</span>
</div>
</div>Notice how every filler element has the .filler class and the actual words we need have a unique ID. We will use these to control and animate them.
Btw, heres’ the finished clock on Codepen:
