Count Up / Count Down Animation With Javascript

How To !JavaScript
Hello Everyone, in this tutorial you'll learn how to create count animation with JavaScript. Where you can count from one number to another number. You can change start and end number along with the speed. In the previous tutorials we shared How to create Multi Tags Input Box in HTML CSS & JavaScript. Now its time to create count up and count down counter animation using javascript.
Access FREE : Compiler Design Free Tutorial

Create count animation with JavaScript with Source Code

To create count animation using javascript, you have to create three files. ie. HTML, CSS & JAVASCRIPT.

HTML

fistly, you ahve to create index.html file & copy paste below html code to your html file. Make sure you html file have .html extensions. 

<!DOCTYPE html>
 <html lang="en">
   <head>
        <title>Count Up/Down</title>
         <!--Google Font-->
         <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap" rel="stylesheet">
         <!--Stylesheet-->
         <link rel="stylesheet" href="style.css">
    </head>
<body>
   <div id="output">

   </div>
       <!--Script-->
       <script src="script.js"></script>
</body>
</html>

CSS

After that, You have to copy paste below css code to your style.css file. 

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: linear-gradient(
        135deg,
        #c165dd,
        #5d27fe
    );
}
#output{
    height: 250px;
    width: 250px;
    background-color: #ffffff;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
    box-shadow: 0 20px 25px rgba(0,0,0,0.25);
    display: grid;
    place-items: center;
    font-family: "Roboto Mono", monospace;
    font-size: 50px;
    color: #20202f;
}

Js

Finally, you have to create script.js file and copy paste below javascript code to your js file. 

function countTo(){
    let from = -50;
    let to = 20;
    let step = to > from ? 1 : -1;
    let interval = 100;

    if(from == to){
        document.querySelector("#output").textContent = from;
        return;
    }

    let counter = setInterval(function(){
        from += step;
        document.querySelector("#output").textContent = from;

        if(from == to){
            clearInterval(counter);
        }
    }, interval);
}
countTo();
}

input.addEventListener("keyup", addTag);

const removeBtn = document.querySelector(".details button");
removeBtn.addEventListener("click", () =>{
    tags.length = 0;
    ul.querySelectorAll("li").forEach(li => li.remove());
    countTags();
});
Also Read : What is Backlink? How to Get High Quality Backlinks in 2022
If you wann to check the demo of this code, then you can check using below demo button.
Click on the following download button to download all source code files of count animation directly  on your computer.

Final Word

In this way, we can create count up - down animation in HTML CSS & JavaScript.  I hope you all like this tutorial. Keep with us for next tutorial. if you wann the source code of this code you can get this on our github account. If you have any query please free to contact us Or comment below.
       
Updated on 18-Jan-2022 20:26:47

218 Views

Previous Page Next Page  
Advertisements

ads