index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock UI Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="clock">
        <h2>The time is now</h2>
        <div id="time">
            <div><span id="hours">00</span><span>Hours</span></div>
            <div><span id="minutes">00</span><span>Minutes</span></div>
            <div><span id="seconds">00</span><span>Seconds</span></div>
            <div><span id="ampm"></span></div>
        </div>
    </div>

    <script type="text/javascript">
        function clock(){

            var hours =document.getElementById('hours');
            var minutes =document.getElementById('minutes');
            var seconds =document.getElementById('seconds');
            var ampm =document.getElementById('ampm');

            var h =new Date().getHours();
            var m =new Date().getMinutes();
            var s =new Date().getSeconds();
            var am ="AM";

            if(h >12 ){
                h = h-12;
                var am = "PM";
            }
            h=(h<10) ? "0" + h :h
            m=(m<10) ? "0" + m :m
            s=(s<10) ? "0" + s :s

            hours.innerHTML =h;
            minutes.innerHTML =m;
            seconds.innerHTML =s;
            ampm.innerHTML =am;
        }
        var interval = setInterval(clock, 1000);

    </script>



</body>
</html>