Digital Clock Project with Html, Css and Javascript (Part 1)

on

Hello Friends, We are going to built Client site real time Digital clock with the help of Html, CSS and Javascript.

So, Let's get started.

 Digital Clock

Real Time Digital Clock


Html Section;

In this section we are adding Html elements of our poject in Html file

Title:

Adding Title (Digital Clock) with Html.

<h1>DIGITAl Clock</h1>

Adding Time Counters:

Incloude class clock and text and id hours, minutes and seconds.

<section class="clock">
<div>
<span id="hours">00</span>
<span class="text">Hours</span>
</div>
<div>
<span id="minutes">00</span>
<span class="text">Minutes</span>
</div>
<div>
<span id="seconds">00</span>
<span class="text">Seconds</span>
</div>
<div>
<span id="ampm">AM</span>
</div>
</section>
<section class="dmy">

Adding Date section:

Incloude class dmy and id dates.

<section class="dmy">
<div>
<b>
<span id="dates">000000</span>

</b>
</div>
</section>

Digital clock CSS section

Comments

Post a Comment