Build your own digital clock using JavaScript
Tags: javascript, html, css, tutorial
Published: 2021-04-27 22:59:50


Source code : <a href="https://github.com/abdurrehmaan/DigitalClock" > Github </a> 
<div class="figure">
<img src="https://user-images.githubusercontent.com/29798155/115163471-c12d4080-a0c2-11eb-87cb-915e6fd4d581.gif" alt="1212" />
</div>
<p>In this article, I am going to show you how to design a simple animated Digital Clock in JavaScript. Since, a browser executes a JavaScript program at the client side, the script will pick up time from the client's computer and display it.
</p>
<h3 id="what-we-want-to-have">What we want to have</h3>
<ul>
<li>Display current date</li>
<li>Display current time</li>
<li>Increment the time on it's own</li>
</ul>
<h3 id="technology-we-use">Technology we use</h3>
<ul>
<li>Vanilla javascript</li>
</ul>
<h3 id="the-javascript">The Javascript</h3>
<p>The entire code for the working of the clock is written within the <code>tick()</code> function. Inside this function, an object of the <code>Date()</code> is created which allows you to call year, date, hour, minute, second.</p>
<pre><code>const now = new Date();</code></pre>
<p>In our code, this object is used for getting the current hours, minutes and seconds which are stored in different variables.</p>
<pre><code>const h = now.getHours();
const m = now.getMinutes();
const s = now.getSeconds();</code></pre>
<p>The obtained hours, minutes and seconds will be displayed in single digit if less than 10. For example, the current hour will be displayed as 7 instead of 07. To always display the elements of time in two-digit format, a 0 is appended before them whenever they are less than 10</p>
<pre><code>&lt;span&gt;${h &lt; 10 ? &quot;0&quot;+h:h}&lt;/span&gt;:
&lt;span&gt;${m &lt; 10 ? &quot;0&quot;+m:m}&lt;/span&gt;:
&lt;span&gt;${s &lt; 10 ? &quot;0&quot;+s:s}&lt;/span&gt;`;</code></pre>
<p>Now once our time is ready, let's display it in the div which we made before. This is done by obtaining the div using the document.getElementById method and give our time as the content of the div using the innerHTML property.</p>
<pre><code>const clock = document.querySelector(&#39;.clock&#39;);
const html = `
&lt;span&gt;${h &lt; 10 ? &quot;0&quot;+h:h}&lt;/span&gt;:
&lt;span&gt;${m &lt; 10 ? &quot;0&quot;+m:m}&lt;/span&gt;:
&lt;span&gt;${s &lt; 10 ? &quot;0&quot;+s:s}&lt;/span&gt;`;
clock.innerHTML = html;</code></pre>
<h2 id="base-design">Base design</h2>
<p>Make the basic html structure</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Digital Clock&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;clock-body&quot;&gt;
        &lt;div class=&quot;inner-body&quot;&gt;
            &lt;div class=&quot;clock&quot;&gt;
            
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>Attach CSS</p>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/digitalclock.css&quot;&gt;</code></pre>
<p>Attach Javascript file</p>
<pre><code>&lt;script src=&quot;js/digitalclock.js&quot;&gt;&lt;/script&gt;</code></pre>
<h2 id="the-styling">The Styling</h2>
<p>Will add a nice font it will center the hero div and make the background fit nicely</p>
<pre><code>@import url(&#39;https://fonts.googleapis.com/css?family=Orbitron&#39;);
.clock-body {
    margin: 200px auto;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner-body{
    width: 30%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid #2BC511;
    background-color: black;
    border-radius:12px;
}
.clock{
    font-size: 4em;
    font-weight: 700;
    text-align: center;
    color:#2BC511;
    font-family: &#39;Orbitron&#39;, sans-serif;
}
.clock span {
    padding: 20px;
}</code></pre>