Uncaught typeerror cannot read property 'style' of null in javascript ?what is wrong with "style.transform"here?

const secondHand = document.querySelector('.second-hand');

const minsHand = document.querySelector('.min-hand');

const hourHand = document.querySelector('.hour-hand');

function setDate() {

    const now = new Date();

    const seconds = now.getSeconds();

    const secondsDegrees = ((seconds / 60) * 360) + 90;

    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

    const mins = now.getMinutes();

    const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;

    minsHand.style.transform = `rotate(${minsDegrees}deg)`;

    const hour = now.getHours();

    const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;

    hourHand.style.transform = `rotate(${hourDegrees}deg)`;

}

setInterval(setDate, 1000);

setDate();
<div class="clock">

      <div class="clock-face">

        <div class="hand hour-hand"></div>

        <div class="hand min-hand"></div>

        <div class="hand second-hand"></div>

      </div>

    </div>>

   
    .clock {
      width: 30rem;
      height: 30rem;
      border: 20px solid white;
      border-radius: 50%;
      margin: 50px auto;
      position: relative;
      padding: 2rem;
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 3px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0,0,0,0.2);
    }

    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateY(-3px); /* account for the height of the clock hands */
    }

    .hand {
      width: 50%;
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
      transform-origin: 100%;
      transform: rotate(90deg);
      transition: all 0.05s;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }

You’re applying it to something that doesn’t exist, one or all of those querySelector calls are returning null.

The code you’ve posted is a mixture of JS and HTML, can’t see what you’ve actually done here. Most likely is that you’ve put the script in the head of the document, that runs first before the document renders, and so there are no HTML tags extant at that point in time. Move the script to just before the closing body tag if that is the case