CODEWITHSUNDEEP
javascripthtmlcss
DCR
DCR

Reputation: 15665

unable to change length of clock hand

 var secondHand = document.querySelector('.second-hand');
     var minuteHand = document.querySelector('.min-hand');
     var hourHand = document.querySelector('.hour-hand');
    function setDate(){
      
      
      var now = new Date();
      var seconds = ((now.getSeconds() * 6  + 90) % 360);
      var minutes = ((now.getMinutes() * 6  + 90) % 360) ;
      var hour    = ((now.getHours()   * 30 + 90) % 360) ;
      
      
      
      secondHand.style.transform=`rotate(${seconds}deg)`;
      minuteHand.style.transform=`rotate(${minutes}deg)`;
      hourHand.style.transform=`rotate(${hour}deg)`;
    }
    
    setInterval(setDate,1000);
    
    setDate();
html {
      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
      background-size:cover;
      font-family:'helvetica neue';
      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;
      padding:2rem;
      border-radius:50%;
      margin:50px auto;
      position: relative;
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 10px #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 .05s;
      transition-timing-function:cubic-bezier(.1,2.7,.58,1);
    }  
      .second-hand{
        background-color:red;
      }
      
    .hour-hand{
      width:35%;
      left:15%;
      
    }
<body>


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




  
</body>

I'm doing the wesbox javascript 30 and was trying to change the length of the hour hand (to make it a little shorter) but still to have it rotate around the center of the clock. Tried a number of things with resetting width and top but nothing seems to work. here's a link to a fiddle: clock 

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

CSS

html {
  background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
  background-size:cover;
  font-family:'helvetica neue';
  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;
  padding:2rem;
  border-radius:50%;
  margin:50px auto;
  position: relative;
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.1),
    inset 0 0 0 10px #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(120deg);
  transition:all .05s;
  transition-timing-function:cubic-bezier(.1,2.7,.58,1);
}  
  .second-hand{
    background-color:red;
  }

.hour-hand{
  width:50%;
  transform-origin:100%;

}

Upvotes: 0

Views: 365

Answers (2)

scarsam
scarsam

Reputation: 346

Try adding this to the css for the class hand hour-and:

transform: rotate(120deg) scale(0.5, 1);

The first value inside the scale property controls the length, while the second one controls the width.

Or if you don't want to change your CSS you can change your JS from:

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

To this:

hourHand.style.transform=`rotate(${hour}deg) scale(0.5, 1)`;

Upvotes: 1

Kevin Jantzer
Kevin Jantzer

Reputation: 9451

You only need to adjust the position of the hour-hand using: 

.hour-hand{
    width: 30%;
    left: 20%;
}

See example below

var secondHand = document.querySelector('.second-hand');
     var minuteHand = document.querySelector('.min-hand');
     var hourHand = document.querySelector('.hour-hand');
    function setDate(){
      
      
      var now = new Date();
      var seconds = ((now.getSeconds() * 6  + 90) % 360);
      var minutes = ((now.getMinutes() * 6  + 90 +30) % 360) ;
      var hour    = ((now.getHours()   * 30 + 180) % 360) ;
      
      
      
      secondHand.style.transform=`rotate(${seconds}deg)`;
      minuteHand.style.transform=`rotate(${minutes}deg)`;
      hourHand.style.transform=`rotate(${hour}deg)`;
    }
    
    setInterval(setDate,1000);
    
    setDate();
html {
      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
      background-size:cover;
      font-family:'helvetica neue';
      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;
      padding:2rem;
      border-radius:50%;
      margin:50px auto;
      position: relative;
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 10px #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 .05s;
      transition-timing-function:cubic-bezier(.1,2.7,.58,1);
    }  
      .second-hand{
        background-color:red;
      }
      
    .hour-hand{
      width: 30%;
	  left: 20%;
    }
<body>


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




  
</body>

Upvotes: 3

Related Questions