Why I am not run my clock? from Wes bos javaScript30

<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>Class 2</title>

<!-- <link rel="stylesheet" href="css/index1.css"> -->
<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>

<style>

    

    html {

        background: #018DED;

        background-size: cover;

        text-align: center;

        font-size: 10px;

    }

    body {

        font-size: 2rem;

        display: flex;

        flex: 1;

        min-height: 100vh;

        align-items: center;

    }

    .clock {

        width: 30rem;

        height: 30rem;

        border: 20px solid white;

        border-radius: 50%;

        margin: 50px auto;

        position: relative;

        padding: 2rem;

        box-shadow: 

            0 0 0px 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: translateX(-3px);

    }

    .hand {

        width: 50%;

        height: 6px;

        background: #000;

        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);

    }

</style>

<script>

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

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

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

    function setDate() {

        const date = new Date();

        const seconds = date.getSeconds();

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

        secondHand.style.transtorm = `rotate(${secondDegrees}deg)`;

        const mins = date.getMinutes();

        const minutsDegrees = ((mins / 60) * 360) + 90;

        minutsHand.style.transtorm = `rotate(${minutsDegrees}deg)`;

        const hours = date.getHours();

        const hoursDegrees = ((hours / 12) * 360) + 90;

        hoursHand.style.transtorm = `rotate(${hoursDegrees}deg)`;

    }

    setInterval(setDate, 1000);

</script>

You have a typo transtorm, which should be transform.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.