How to make numbers grow and decrease in a smarter way?

Question

I created a function with JavaScript, which is a countdown of the numbers on the screen that increases and decreases its size, however, the code is too large and I want to know how to do it in a more intelligent way without using many lines. Thank you

My code can be found here

var mudar5 = document.getElementById("cinco");
var mudar4 = document.getElementById("quatro");
var mudar3 = document.getElementById("tres");
var mudar2 = document.getElementById("dois");
var mudar1 = document.getElementById("um");
var mudarGo = document.getElementById("go");
mudar3.style.fontSize = "20px";

var fonteAtual = 1;
var minSize = 1;
var maxSize = 80;
var intervalTime = 10;
var intervalTimeDecrease = 2;

increaseSize();

//liga o cinco
function increaseSize() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudar3.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      decreaseSize();
    }

  }, intervalTime);

}

function decreaseSize() {

  var interval = setInterval(function() {
    fonteAtual--;
    mudar3.style.fontSize = fonteAtual + "px";

    if (fonteAtual === minSize) {
      clearInterval(interval);
      liga2();
    }

  }, intervalTimeDecrease);

}
//liga o quatro
function liga2() {
  document.querySelector("#tres").style.display = "none";
  document.querySelector("#dois").style.display = "block";
  increasetwo();
}

function increasetwo() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudar2.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      decreasetwo();
    }

  }, intervalTime);

}

function decreasetwo() {

  var interval = setInterval(function() {
    fonteAtual--;
    mudar2.style.fontSize = fonteAtual + "px";

    if (fonteAtual === minSize) {
      clearInterval(interval);
      liga1();
    }

  }, intervalTimeDecrease);

}


//liga o 3
function liga1() {
  document.querySelector("#dois").style.display = "none";
  document.querySelector("#um").style.display = "block";
  increaseone();
}

function increaseone() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudar1.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      decreaseone();
    }

  }, intervalTime);
}

function decreaseone() {
  var interval = setInterval(function() {
    fonteAtual--;
    mudar1.style.fontSize = fonteAtual + "px";

    if (fonteAtual === minSize) {
      clearInterval(interval);
      ligaGo();
    }

  }, intervalTimeDecrease);
}


//Liga o Go
function ligaGo() {
  document.querySelector("#um").style.display = "none";
  document.querySelector("#go").style.display = "block";
  increaseGo();
}

function increaseGo() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudarGo.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      mudarGo.style.fontSize = 80 + "px";
    }

  }, intervalTime);
}

//liga o Um
function liga1() {
  document.querySelector("#dois").style.display = "none";
  document.querySelector("#um").style.display = "block";
  increaseone();
}

function increaseone() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudar1.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      decreaseone();
    }

  }, intervalTime);
}

function decreaseone() {
  var interval = setInterval(function() {
    fonteAtual--;
    mudar1.style.fontSize = fonteAtual + "px";

    if (fonteAtual === minSize) {
      clearInterval(interval);
      ligaGo();
    }

  }, intervalTimeDecrease);
}


//Liga o Go
function ligaGo() {
  document.querySelector("#um").style.display = "none";
  document.querySelector("#go").style.display = "block";
  increaseGo();
}

function increaseGo() {

  var interval = setInterval(function() {
    fonteAtual++;

    mudarGo.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      mudarGo.style.fontSize = 80 + "px";
    }

  }, intervalTime);
}

#dois,
#um,
#go {
  display: none;
  font-size: 0px;
}

<body style="text-align: center; margin: 0 auto">
  <div id="tres">3</div>
  <div id="dois">2</div>
  <div id="um">1</div>
  <div id="go">GO!</div>
</body>

I think it's possible to make the animation using CSS 3 and without JavaScript. — Alexander, Jun 15 '19 at 02:15
[Everything you wanted to know about CSS animations but were too afraid to search for](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) — Jaromanda X, Jun 15 '19 at 02:23

Hammadi · Answer 1 · 2019-06-15T03:13:32.293

I think you can decrease the code by factoring your code because as far as i can see most of it does the same thing.

your code can be something like this which will more or less do the same things:

var counter = 3;
var fonteAtual = 1;
var minSize = 1;
var maxSize = 80;
var intervalTime = 10;
var intervalTimeDecrease = 2;


var mudar = document.getElementById("number");
mudar.innerHTML = counter;

increaseSize();

function increaseSize() {

  mudar.innerHTML = counter==0?'GO!':counter;
  
  var interval = setInterval(function() {
    fonteAtual++;

    mudar.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      if(counter === 0){
        return;
      }
      decreaseSize();
    }

  }, intervalTime);

}

function decreaseSize() {

  mudar.innerHTML = counter==0?'GO!':counter;

  var interval = setInterval(function() {
    fonteAtual--;
    mudar.style.fontSize = fonteAtual + "px";

    if (fonteAtual === minSize) {
      clearInterval(interval);
      counter--;
      increaseSize()
    }

  }, intervalTimeDecrease);

}

<body style="text-align: center; margin: 0 auto">
<div id="number"></div>

<script src="JS/temp.js"></script>
</body>

no need for any CSS to do the same thing

and if you want it to be only one function:

var counter = 3;
var fonteAtual = 1;
var minSize = 1;
var maxSize = 80;
var intervalTime = 10;
var intervalTimeDecrease = 2;

var mudar = document.getElementById("number");

ChangeSize(true);

//-----------------------------------

function ChangeSize(sign){

  mudar.innerHTML = counter==0?'GO!':counter;
  
  var interval = setInterval(function() {
    fonteAtual = sign ? (fonteAtual + 1) : (fonteAtual - 1)

    mudar.style.fontSize = fonteAtual + "px";

    if (fonteAtual === maxSize) {
      clearInterval(interval);
      if(counter === 0){
        return;
      }
      ChangeSize(false)
    }

    if (fonteAtual === minSize) {
      clearInterval(interval);
      counter--;
      ChangeSize(true)
    }

  }, sign ? intervalTime : intervalTimeDecrease);

}

<body style="text-align: center; margin: 0 auto">
    <div id="number"></div>

    <script src="JS/temp.js"></script>
</body>

Alexander · Accepted Answer · 2019-06-15T04:15:53.227

You could implement the animation using CSS Animations instead of JavaScript. I provde an example below to help you get started. Just change the animation properties to get expected effect.

.container {
  text-align: center;
  margin: 0 auto;
}

#tres, #dois, #um, #go {
  font-size: 0;
  animation: .5s ease-in-out 2 forwards alternate zoom;
}
#dois {
  animation-delay: 1s;
}
#um {
  animation-delay: 2s;
}
#go {
  animation-delay: 3s;
  animation-iteration-count: 1;
}

@keyframes zoom {
    0% { font-size: 0; }   
    100% { font-size: 80px; }
 }

<div class="container">
  <div id="tres">3</div>
  <div id="dois">2</div>
  <div id="um">1</div>
  <div id="go">GO!</div>
</div>

The ease-in-out is used for animation-timing-function property in the example. But if you need to speed function will be same as in your post, then use another predefined speed curve or define your own speed curve using cubic-bezier() function.

score 0 · Answer 3 · answered Jun 15 '19 at 04:26

mixing CSS with a bit of JS to give flexibility:

var states = [3, 2, 1, "GO!"];
var countdownElement = document.getElementById('countdown');

states.forEach(function(state, index){
  countdown.style.animationIterationCount = states.length * 2 - 1;

  setTimeout(function(){
    countdownElement.innerHTML = state;
  }, index * 1000);
});

.countdown-out, .countdown-in {
  animation: .5s linear forwards alternate zoom;
}

@keyframes zoom {
  0% { font-size: 0; }   
  100% { font-size: 64px; }
}

<div id="countdown">3</div>

How to make numbers grow and decrease in a smarter way?

3 Answers3