Created a javascript clock but it's not functioning The css styled it correctly, but it's not actually telling the time. Tips and suggestions would be very much appreciated, thanks! If you can, please explain what I did wrong when you answer.. ^-^
All the code is on codepen, linked below

```
https://codepen.io/codinchopin2117/pen/vYKRNBp

```

Here's the code

/

```
!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8">
    <title>Javascript Clock</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="clock">
        <div class="hour">
            <div class="hr" id="hr"></div>
        </div>
        <div class="min">
            <div class="mn" id="mn"></div>
        </div>
        <div class="sec">
            <div class="sc" id="sc"></div>
        </div>
    </div>
    <script type="text/javascript">

    const deg = 6;
    const hr = document.querySelector('#hr');
    const mn = document.querySelector('#mn');
    const sc = document.querySelector('#sc');

    setInterval(() => {
        let day = new Date();
    let hh = day.getHours() * 30;
    let mm = day.getMinutes() * deg;
    let ss = day.getSeconds() * deg;

    hr.style.transform = 'rotatez(${(hh)+(mm/12)}deg)';
    mn.style.transform = 'rotatez(${mm}+deg)';
    sc.style.transform = 'rotatez(${ss}+deg)';
    })

    </script>
</body>

```

```
       * {
margin: 0;
padding: 0;
box-sizing: border-box;
     }

  body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #9B0C43;
   }

   .clock {
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(clock.png);
background-size: cover;
border: 4px solid #000;
border-radius: 50%;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
            inset 0 -15px 15px rgba(255, 255, 255, 0.05),
            0 15px 15px rgba(0, 0, 0, 0.3),
            inset 0 15px 15px rgba(0, 0, 0, 0.3);

          }

              .clock::before 
         {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #FFF;
border-radius: 50%;
z-index: 10000;
      }

        .clock .hour,
  .clock .min,
  .clock .sec 
           {
       position: absolute;
        }

           .clock .hour, .hr 
           {
      width: 160px;
     height: 160px;
         }

         .clock .min, .mn{
     width: 190px;
   height: 190px;
     }

     .clock .sec, .sc{
width: 230px;
height: 230px;
   }

     .hr, .mn, .sc 
     {
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
        }

       .hr:before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #FFF;
z-index: 10;
border-radius: 6px 6px 0 0;
         }

      .mn:before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #F7F0D6;
z-index: 11;
border-radius: 6px 6px 0 0;
        }

        .sc:before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #F7F0D6;
z-index: 12;
border-radius: 6px 6px 0 0;
           }

```