King of JavaScript Online HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Analog Clock</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    
}
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@100;400;700&family=Rubik+Bubbles&display=swap');
 *{
     box-sizing: border-box;
}
 body{
     font-family: 'Anton', sans-serif;
     font-weight: 500;
}
 .container{
     background: #4f8dff;
     height: 100vh;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .clock{
     height: 70vmin;
     width: 70vmin;
     background: #001926;
     border-radius: 50%;
     position: relative;
     border: 30px solid #0c2633;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .numbers{
     position: absolute;
     top: 20px;
     bottom: 20px;
     right: 20px;
     left: 20px;
     display: flex;
     justify-content: center;
}
 .number span{
    position: absolute;
}
 .number{
     position: absolute;
     font-size: 2.5rem;
     color: #fff;
     height: 100%;
     width: 100%;
     display: flex;
     justify-content: center;
}
 .number1{
     transform: rotate(30deg);
}
 .number2{
     transform: rotate(60deg);
}
 .number3{
     transform: rotate(90deg);
}
 .number4{
     transform: rotate(120deg);
}
 .number5{
     transform: rotate(150deg);
}
 .number6{
     transform: rotate(180deg);
}
 .number7{
     transform: rotate(210deg);
}
 .number8{
     transform: rotate(240deg);
}
 .number9{
     transform: rotate(270deg);
}
 .number10{
     transform: rotate(300deg);
}
 .number11{
     transform: rotate(330deg);
}
 .number1 span{
     transform: rotate(-30deg);
}
 .number2 span{
     transform: rotate(-60deg);
}
 .number3 span{
     transform: rotate(-90deg);
}
 .number4 span{
     transform: rotate(-120deg);
}
 .number5 span{
     transform: rotate(-150deg);
}
 .number6 span{
     transform: rotate(-180deg);
}
 .number7 span{
     transform: rotate(-210deg);
}
 .number8 span{
     transform: rotate(-240deg);
}
 .number9 span{
     transform: rotate(-270deg);
}
 .number10 span{
     transform: rotate(-300deg);
}
 .number11 span{
     transform: rotate(-330deg);
}
 .clock::before{
     content: '';
     position: absolute;
     height: 10px;
     width: 10px;
     border: 7px solid #fff;
     border-radius: 50%;
     z-index: 50;
     background: #001926;
}
 .hour,.minute,.second{
     position: absolute;
     display: flex;
     justify-content: center;
     transform-origin: bottom;
}
 .hour{
     top: 24%;
     height: 26%;
     width: 10px;
     background: #ff105e;
     border-radius: 5px 5px 0 0;
     transform: rotate(60deg);
}
 .minute{
     top: 20%;
     height: 30%;
     width: 6px;
     background: #fff;
     border-radius: 5px 5px 0 0;
     transform: rotate(180deg);
}
 .second{
     top: 16%;
     height: 34%;
     width: 2px;
     background: #236aee;
     border-radius: 5px 5px 0 0;
     transform: rotate(270deg);
     z-index: 51;
}
 .second::before{
     content: '';
     position: absolute;
     width: 4px;
     height: 25px;
     background: #236aee;
     display: flex;
     justify-content: center;
     align-items: center;
     bottom: -25px;
}
 @media (max-width:600px) {
     .number{
         font-size: 1.5rem;
    }
     .clock{
         border: 20px solid #0c2633;
    }
}
</style>
</head>
<body>
<div class="container">
   <div class="clock">
      <div class="hour" id="hour"></div>
      <div class="minute" id="minute"></div>
      <div class="second" id="second"></div>
      <div class="numbers">
         <div class="number number1"><span>1</span></div>
         <div class="number number2"><span>2</span></div>
         <div class="number number3"><span>3</span></div>
         <div class="number number4"><span>4</span></div>
         <div class="number number5"><span>5</span></div>
         <div class="number number6"><span>6</span></div>
         <div class="number number7"><span>7</span></div>
         <div class="number number8"><span>8</span></div>
         <div class="number number9"><span>9</span></div>
         <div class="number number10"><span>10</span></div>
         <div class="number number11"><span>11</span></div>
         <div class="number number12"><span>12</span></div>
      </div>
   </div>
</div>
<script>
const hourHand = document.querySelector("#hour");
const minuteHand = document.querySelector("#minute");
const secondHand = document.querySelector("#second");

setInterval(setClock, 1000);

function setClock() {
   //getting time
   const currentDate = new Date();
   const hours = currentDate.getHours();
   const minutes = currentDate.getMinutes();
   const seconds = currentDate.getSeconds();

   //convert time into degree
   const h_rotation = 30 * hours + minutes / 2;
   const m_rotation = 6 * minutes;
   const s_rotation = 6 * seconds;

   //apply degree on clock hands
   secondHand.style.transform = `rotate(${s_rotation}deg)`;
   hourHand.style.transform = `rotate(${h_rotation}deg)`;
   minuteHand.style.transform = `rotate(${m_rotation}deg)`;
}

setClock()
</script>
</body>
</html>