CODEWITHSUNDEEP
javascripthtmlcsssetintervalevent-listener
J Akhtar
J Akhtar

Reputation: 667

Increase and decreasing width and height of a div with set interval

I am doing this project for practice and I am achieving half the results but can't figure out how to the other half. Basically I have div1 with 0 width and 0 height inside a parent div2 with 280px width and height each with border radius of 50%. There is a sibling div3 of div1 with value inside. On clicking the div2 the div3 text converted into seconds and then set interval will run a function that increases the width and height proportionate to the seconds such that when seconds reach 0 height and width of div1 should be equal to parent div2. I am achieving this far and now I want to reassign seconds = 70 and decrease the width and height of div1 proportionally. My explanation might not be enough so please refer to the code snippet attached. Thanks for your help in advance.

var display, time, loader, width, height, reverse, seconds, running, interval;

display = document.getElementById("display");
time = document.getElementById("time");
loader = document.getElementById("loader");
width = 0;
height = 0;
reverse = false;
running = false;
seconds = parseInt(time.textContent)*60;


if ( width === 280 && height === 280 ) {
   reverse = true;
   time.textContent = 70;
}

display.addEventListener("click" , function(){
  
  if ( running === false ) {
    running = true;
    interval = setInterval(function(){
     
      if ( reverse === false ) {
        width  += (280-width)/seconds;
        height += (280-height)/seconds;
      }
      else {
        width  -= (width/seconds);
        height -= (height/seconds);
      }
      
      loader.style.width = Math.round(width) + "px";
      loader.style.height = Math.round(height) + "px";
      console.log(width + " " + height);
      time.textContent = seconds;
      

      
      if ( seconds > 0 ) {
        seconds--;
      }
    },1000);
  }
  
  else {
    running = false;
    clearInterval(interval);
    console.log("Inteval cleared");
  }
  
});
#display {
  width : 280px;
  height: 280px;
  border: 1px solid #5fcf80;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  font-family: sans-serif;
  cursor: pointer;
}

#time {
  font-size: 120px;
  text-align: center;
  line-height: 280px;
  position: relative;
  z-index: 9;
}

#loader {
  z-index: 1;
  width: 40px;
  height: 40px;
  background: #5fcf80;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="display">
    
    <div id="time">1</div>
    <div id="loader"></div>
    
  </div>

</body>
</html>

Upvotes: 2

Views: 2270

Answers (1)

Sami Almalki
Sami Almalki

Reputation: 628

There are some mistakes in your code:

1- The following if clause is useless because its contents never executes:

if ( width >= 280 && height >= 280 ) {
   reverse = true;
   time.textContent = 70;
}

It never executes because this if is outside addEventListener and setInterval. It will run one time at the beginning, when width and height are still 0.

2- The following code should be at the beginning of setInterval:

  if ( seconds > 0 ) {
    seconds--;

The reason is, imagine what happens when seconds reaches 0:

  • These lines will be executed: width += (280-width)/seconds and height += (280-height)/seconds.
  • seconds is 0, so a division by zero will happen!
  • width and height will be NaN (Not a Number).

3- The code in (2) should be:

if ( seconds > 1 ) {
  seconds--;
} else if ( seconds == 1 ){
  reverse = reverse ? false : true;
  seconds = 70;
}
  • first, we check if seconds is above 1 not 0, to stop seconds from being 0, and in that case, we decrease by 1.
  • If seconds is 1, then we've reached the max (or min) width and height.
    • In this case, if we are increasing, we will reverse, and vice versa.
    • In addition, we will reset seconds to 70 based on your specification.

4- Based on the above changes, the initial value of seconds should be 61, not 60:

seconds = parseInt(time.textContent)*61;

That's because we will decrease seconds right away in the beginning of addEventListener.

Here is a working modified version on JSFiddle

Upvotes: 2

Related Questions