CODEWITHSUNDEEP
javascripthtmlcssfrontendclock
jenayescript
jenayescript

Reputation: 29

Javascript clock not functioning

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

Upvotes: 0

Views: 88

Answers (2)

user13995420
user13995420

Reputation:

you should do

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

so first the function or whatever you call ${} can only be used within backticks `` not '' or "" third no need for the + between the value and the deg also i would use rotate not rotatez and even if you use rotateZ its Z not z but thats a good pratice issue and will not break you code

Upvotes: 0

Jahan
Jahan

Reputation: 131

The problem here is is that your using the ${} wrong as you have to place them and your string inside of `` instead of '' or "". All you should have to do is replace

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

with

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

Upvotes: 2

Related Questions