index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="clock.css">
    <title>Document</title>
   
</head>
<body>
    <div id="title">
        <h1 id="title1">Time</h1>
    <h1><span id="hours">00</span>
    <span>:</span>
    <span id="minutes">00</span>
    <span>:</span>
    <span id="seconds">00</span>
    <span id="day">AM</span></h1>
</div>
    <script>
        function time()
        {
        let clock=new Date()
        let hr=clock.getHours()
        let min=clock.getMinutes()
        let sec=clock.getSeconds()
        let hours=document.querySelector("#hours")
        if(hr>12)
        day.innerHTML="PM"
        if(hr>12)
        hr=hr-12
        if(hr<10)
        hr="0"+hr
        hours.innerHTML=hr
        let minutes=document.querySelector("#minutes")
        if(min<10)
        min="0"+min
        minutes.innerHTML=min
        let seconds=document.querySelector("#seconds")
        if(sec<10)
        sec="0"+sec
        seconds.innerHTML=sec
        
        }
        setInterval(time,1000)

    </script>
</body>
</html>