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>clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>digital clock</h1>
        <div class="clock">12:50:10 AM</div>
    </div>
    <script >
    const clock = document.querySelector('.clock')
function runclock(){
var time=new Date();
var hrs =time.getHours();
var min=time.getMinutes();
var sec=time.getSeconds();
var txt="AM";
if(hrs>12){
    hrs=hrs-12;
    text="PM";
}
else if(hrs==0){
    hrs=12;
    txt="AM";
// }



}
hrs=hrs<10?'0'+hrs:hrs;
min=min<10?'0'+min:min;
sec=sec<10?'0'+sec:sec;
clock.innerHTML = `${hrs}  : ${min} : ${sec} ${txt}`;
// console.log(`${hrs} :  ${min} : ${sec}`);
}
runclock();
setInterval(runclock,1000);
</script>
    
</body>
</html>