Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Senior Member
    Join Date
    Nov 2012
    Posts
    111
    Member #
    33949
    Liked
    2 times

    Why doesn't my javascript code not work, with this clock.

    Hi, I have a page in notepad++ with html, css and javascript on it for a clock, but the clock is not doing anything, so I know the javascript is not working,
    Can anybody tell me where I have gone wrong. Here is the page with all the code on.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="uif-8">
    <title>clock!</title>
    <style type="text/css">
    html {
    background: linear-gradient(to right, rgba(90, 93, 145, 1) 0%, rgba(173, 255, 99, 1) 100%);
    text-align: center;
    font-size: 10px;
    }


    body {
    margin: 0;
    font-size: 2rem;
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
    }




    .clock {
    width: 30rem;
    height: 30rem;
    border: 20px solid white;
    margin: 50px auto;
    border-radius: 100%;
    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);
    }


    .hand {
    width: 50%;
    height: 6px;
    background: black;
    position: absolute;
    top: 50%;
    transform-origin: 100%;
    transform: rotate(90deg);
    transition: 0.3s all;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    </style>
    }
    <script language="javascript">
    const hourHand = document.querySelector('.hand-hour');
    const minuteHand = document.querySelector('.hand-minute');
    const secondHand = document.querySelector('.hand-seconds');




    function getTime() {
    const now = new Date();


    const seconds = now.getSeconds();
    const secondsDegree = (((seconds / 60) * 360) + 90);
    secondHand.style.transform = `rotate(${secondsDegree}deg)`




    const minutes = now.getMinutes();
    const minutesDegree = (((minutes / 60) * 360) + 90);
    minuteHand.style.transform = `rotate(${minutesDegree}deg)`




    const hours = now.getHours();
    const hoursDegree = (((hours / 60) * 360) + 90);
    hourHand.style.transform = `rotate(${hoursDegree}deg)`






    }


    setInterval(getTime, 1000);
    </script>
    </head>
    <body>
    <div class="clock">
    <div class="clock-face">
    <div class="hand hand-hour"></div>
    <div class="hand hand-minute"></div>
    <div class="hand hand-seconds"></div>
    </div>
    </div>
    </body>
    </html>

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:42 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com