Animated Counter With JavaScript (HTML, CSS)

[@animationbysophia2820]

I love the way you teach sir. Just wanna say THANK YOU. All you efforts means a lot. THANK YOU SO MUCH. Love and respect from Pakistan.

[@ebentee]

Whoever read this you'll be successful one day, let's do this together for the future

[@techlead...]

*" 1.01M Subscribers "* looks so good on your channel.

[@martinpiko8085]

He really deserves it!

[@TraversyMedia]

Thanks man 😊

[@accimeesterlin]

Keep it up man! You’re contributing a hell lot in the tech community

[@mohamaddaylami174]

Everytime I look for something after searching YT I come back to your channel. Sir you are amazing... God bless you🙏💐

[@TheNerdyDev]

Awesome content as always. I recommend your tutorials always to my juniors.

[@TraversyMedia]

Thanks :)

[@ob5804]

@@TraversyMedia And I cannot explain to myself what an increment is(((???

[@victorschweitz3506]

I was about to follow a tutorial on how to create a website with some different stats, and I thought it would look cool to have a counting animation. And guess what popped up in my feed of recommendations, and by whom it was done. Yes, you've probably already guessed it. Brad Traversy is the man!

[@vikasni95]

Brad ur just god gifted teacher for the students on earth... Lots of love and support from india 🇮🇳...

[@yendrembamrabinchandra476]

Not only programming, I also learn English from Brad and that's why I never fail to watch every single he uploaded😁

[@gguddum]

I've googled for 2days, but couldn't find any codes that not used the library. but your codes solved my problem, thank you!! 👍👍👍

[@muhammadshakir3688]

You are my idol as a web developer. You have helped me to get my first job and maybe second one soon!!!! Thank you

[@devabdultech]

I can't just stop watching your videos. Thank for your time and making sure we learn from your tutorials. I wish to meet you one day. From Nigeria I'm 15. And Iearn pretty good from you

[@accimeesterlin]

That 1.01M is so legit on this channel. You really deserve it man!!

[@abdullahalsiam105]

i love you brad. you are awesome. you teach me HTML CSS. now i am learning javascript. the way you explain things are really easy but helpful. god bless you Brad.

[@Fer0710]

Thanks so much brad, this is great! These type of tutorials are the actual foundation. Everything is so saturated with frameworks libraries that some JR devs forget that this is the bread and butter here.... Thank you for all your tutorials and for everything you teach man!

[@hasimabck6694]

You know what, it makes me smile when to see a new video alert from Traversy Media. And especially if the content is something that I was looking for a long time. Thank you man. Best lucks in your life.

[@mazdaknazemi8207]

need more of these works brad , there are many of these works , but with low clarity , thank you.

[@Racindify]

For anyone wanting to make this as an onscroll event here is a version I made. (I also added in comma's in the final display): window.onscroll = function() { let windowPos = window.scrollY; let counterPos = document.querySelector('.counter').offsetTop; let scrollTrigger = counterPos - window.innerHeight + 200; if (windowPos >= scrollTrigger) { const counters = document.querySelectorAll('.counter__number'); const speed = 551; // The lower the slower ​ counters.forEach(counter => { const updateCount = () => { const target = +counter.getAttribute('data-target'); const count = +counter.innerText; const inc = target / speed; ​ // Check if target is reached if (count < target) { counter.innerText = Math.ceil(count + inc); setTimeout(updateCount, 100); } else { counter.innerText = target.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } }; ​ updateCount(); }); } }

[@sakchyamamatya7921]

not working for me

[@sakchyamamatya7921]

should we add counter__number to that counter div?

[@smsibasish]

Adding a fade in effect on scroll would have been the cherry on top 😜

[@claudiobras22]

Sir, allow me to say this. You are good and amazing at what you do. I admire your work. You inspire me a lot.

[@gbagba81]

thanks man, lot of heart and really usefull. people reading you may figure this easily, but if you are sleepy as I am right now you will want to put counter.innerText instead of coun.innerText. Other way it'll write mistaken decimals. Cheers!

[@mattbridges385]

Love these little shorter one-shot design element ideas to add to our toolbox! keep up the good work!

[@icytubegram8979]

YOU ARE THE BEST ALWAYS DOING WHAT'S ON MY MIND, JUST THE OTHER DAY I WAS LOOKING FOR THIS TUTORIAL AND I LOVE TO TRY TRAVERSY MEDIA FIRST ALTHOUGH I DID NOT SEE IT THEN I'M REALLY SURPRISED THAT FEW DAYS AFTER MY SEARCH , NOW BOOM!!!! "THE AWESOME BRAD TRAVERSY MADE IT A REALITY ". MAY GOD KEEP YOU ALIVE AND EVERY OTHER TECH TUTORS DOING IT YOUR WAY "YOU ARE A STAR IN THE TECH WORLD"

[@danilove9106]

We need thousands of project like this from you !

[@chrisdevcode]

This video came in handy Brad... You really helping me a lot over here... With love from Kenya

[@maskman4821]

thanks for this creative tutorial, actually we don't need to write media query to achieve two-column, with grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) the column container responds to different device width (including 700px) automatically, so we don't need media query anymore unless specific needs !!!

[@Omerko]

Small JS code for great feature. Thanks as always and Congratz on 1M subs! You deserved it!

[@lilJ5754]

That was super sick at 13:12

[@rangabharath4253]

Awesome as always. Congratulations on 1M Subscribers. More to come. All the best. Please make awesome tutorials as always.

[@gustavocarneirinho5581]

Wow, we always have something new to learn, I never saw this way of converting string to number using only +, I always use Number, parseInt or parseFloat, very good!

[@christopherc7069]

I thought this was cool too. I guess it works because the engine is coercing it to a number type since he's trying to perform addition on it?

[@h.kubilay6160]

@@christopherc7069 it is called unary plus.

[@mluevanos]

Love the counter script. Very elegant and easy to read.

[@gkossecurecommunitynetwork7112]

Brilliant video i will be changing a few bits in the code but this a huge time saver for a newbie to JS.

[@cameronthompson1275]

Once again, fantastic work! You are a web dev ninja!

[@parthkumarchaudhary]

Awesome. 1.01 million subs finally Awesome. Waiting for your giveaway 😋

[@sylwesterjot921]

This guy is my mentor.

[@WW-nk7wg]

I have a point to make and a question. Point to make: There is an issue of overflowing the target number when the data-target values are not divisible by the speed value. For example if the target-value is let's say 60010, and speed is 200 it would count up to 60200. So we would need to check if we are over the target value in the if statement or maybe apply additionally min function like: Math.min(Math.ceil(count+inc), target) Question: Let's say we have this counter div somewhere down below our webpage. We want to start the count when we scroll down to the div and it becomes visible, rather than when the page loads. What is your suggested way of doing this? Great job as always! Thanks for all this free info!

[@ashiinsane90]

To make it animate when it reaches the desired location u can use getBoundingClientRect().top look it up. u can use it like this if(desiredLocation.getBoundingClientRect().top < window.innerHeight{ then do this; }

[@astikdahal1363]

const counterSection = document.querySelector(".counters"); function incCounter(){ const counters = document.querySelectorAll('.counter'); const speed = 200; // The lower the slower counters.forEach(counter => { const updateCount = () => { const target = +counter.getAttribute('data-target'); const count = +counter.innerText; // Lower inc to slow and higher to slow const inc = target / speed; // Check if target is reached if (count < target) { // Add inc to count and output in counter counter.innerText = count + inc; // Call function every ms setTimeout(updateCount, 1); } else { counter.innerText = target; } }; updateCount(); }); } const counterSectionOptions = { rootMargin: "-200px 0px 0px 0px" }; const counterSectionObserver = new IntersectionObserver(function( entries, counterSectionObserver ) { entries.forEach(entry => { if (!entry.isIntersecting) { return; } else { incCounter(); } }); }, counterSectionOptions); counterSectionObserver.observe(counterSection); Done using Intersection Observer :)

[@accimeesterlin]

Good stuff. HTML, CSS, and JavaScript is always a good idea for beginners

[@phichau90]

Just started learning php becoz of u dude. Loving it so far . abit of a novice but at least an 1hr or 2 each day reding an practicing.

[@TraversyMedia]

Check my PHP Front To Back series. It is a few years old but it is all fundamentals so all still relevant.

[@philippmerk5980]

best js tutorials out there. THANKS!!!

[@TheSilmarallion]

Awesome was looking for something like this for a while. Great tut and great tutor...

[@ricardofynn]

> 1M congrats. Deserve, great channel 👊

[@matiasbacelar8662]

Great as always Brad , cheers from Argentina

[@your_helper001]

Whenever I want to find some material for learning , i always wanted to be your video. your way of telling things helps me a lot . and I am starting to be a .NET developer. firstly , front -end then move forward. can you atleast help me about which things and frameworks should i work on and learn and practice. if you have time please . THANKS FOR YOUR DEDICATION AND HARD WORK IN ALL THOSE YEARS.

[@venussmodzhd1886]

Great Video man. I learn much better with you man. your so easy to understand :)

[@ebrimao.touray8201]

Your tutorials are the best 😊

[@JamieMcGibbon]

Great video! Thanks for all of the effort you put into making this, and all other videos! It’s appreciated!

[@bank_coder]

Just what my client needed ... thanks

[@webbase8836]

Wow I was just thinking about how to do this. I've followed ur bootstrap course on udemy. Wow ur rili doing an excellent job and ur inspiring odas lyk me. Thank you

[@davearrebola]

You legend, thank you for everything you do.

[@boriskleshch8416]

Thanx Brad, very interesting and simple!

[@klugkluk]

You have a slight error in your Codepen version. The comment next to "speed" says "the lower the slower", but it's the other way around.

[@qureshihasnain]

Please make video on your tutorials behind the scenes please brad I'm your biggest fan in programming world please accept my request brad Love from Pakistan

[@khotambakhromov]

Why other counters are not waiting for the previous one to count until the target and then start counting? Why they are all counting at the same time?

[@unchart_d]

Wat can we do without brad?😂😂

[@ashiinsane90]

Great tutorial. Finally a tutorial with pure javascript. I have a question though, when the numbers are much smaller lets say 90. It tends to convert it into float number when its animating. I think its because the division. Any idea how to fix this?

[@cryptopinnacle7658]

Wow I learnt a lot. Thank you Brad

[@MrTHOMASisBack]

Why the 4 numbers grow in parallel ? In the loop it should the first number reach the target then the second etc... Does this have to do with the fact that with setInterval we made updateCount a recursive function ?

[@FurtherReading]

Veeery cool, Brad! Thank you, cheers from Thailand...going to the beach, now :) !

[@NikhilAdiga]

Thanks for the awesome content you put out Brad!

[@davidconnelly]

The way things are going, you'll need a considerably smaller font size for your webpage, Brad. Congrats on the mil, dude.

[@HeryYustana]

So excited to watch .. keep it up bruh...

[@ahmadgamal-eldin7732]

helpful as usual :) Many thnx, bro !

[@pierre8519]

Really clear, really good !

[@vicks711]

You are awesome. Thanks for sharing your knowledge.

[@RobizShow]

Nice Tutorials. Totally loved it!

[@unknownman1]

*hey Brad, what are your thoughts on Headless wordpress with React for freelancing??*

[@TraversyMedia]

I think it's a good idea. Wordpress is great for clients to be able to update their own content and using React allows you to have a fast and customized UI. Some other alternatives to WP are Contentful, Strapi, Prismic. I plan on making a video on at least one of them

[@ApurvKhare]

Strapi with React would be nice.

[@zenahrb8316]

@@TraversyMedia Strapi + VueJS would be lovely too.

[@universenerdd]

"1.07 million subs" looks so good on your channel

[@kushaldavda5892]

The numbers show up in fractions if the target is less than the speed. Also math.floor doesn't work on the same. Any solutions for that?

[@kushaldavda5892]

I found the solution just use counter.innerText = Math.ceil(count + inc);

[@tinkywinky9099]

OKAY , One bug in this program , The data-target are good numbers , but if the number is say something like 1234, then the increment would be different , now even if you use Math.round, Suppose there is a situation where your count is currently 1230 and your increment is 6, then 1230

[@stefanstroie1154]

Exactly what i need bro, thank u a lot

[@alikazemi2028]

i`m very grateful for this tutorial

[@AyushSethGuitarCovers]

How can you make the counting slow down as it reaches the final value?

[@buka.a]

Hey Brad, the time you added a "+" to a string character and it converted to numbers, does that happen in all cases or just specifically cause it was a data-target attribute?

[@Golodafunk]

That happens always, it is a unary operator equivalent to do Number(value)

[@nsquarens2s]

Awesome tutorial! Just checking if its possible to make the target value dynamic so it increment by 200 everyday? Thanks

[@drieq]

Has something changed in JS? This is not working for me. From the first console.log(target) it's not showing anything. I put a solo console.log("Hello world") in the file and that is showing up. Any help would be appreciated!

[@338-p5e]

Thank you very much. Very good tutorial.

[@MichaelElimu]

I am having a page that has fixed header and footer, but I want only the content in the main section to be scroll-able. How can I achieve this?

[@typicalyorkshirebloke]

Is it possible to have the numbers going up at different speeds inside of one set of code instead of repeating the exact same code over multiple times with different speeds?

[@m3awna]

thanks a lot from Algeria

[@GauravSingh-sv5cw]

Is there a way to delay the start of the counting? I've got a few other animations loading on page load and this sometimes causes a stutter with the animations. Giving it a delay so it starts say after 3 seconds from page load would be great! TIA!!!

[@marinbgd]

It would be better to use requestAnimationFrame() instead of setTimeout() because you are changing the DOM and it needs to render again. Its more optimal way.

[@cameronkirkpatrick3911]

@Traversy Media Hey Brad, I heard you say in one of your videos that you added an autocomplete for console.log(); something like cl then tab...any possibility you could share your trick, I have looked around but the closest thing I have found is a not so great extension.

[@videocasetteTV]

Awesome as always , I want to learn javascript from scratch, which playlist or course should i follow, thanks in advance

[@martinasandberg7057]

Great tutorial! Works great if you know the target number. I'm trying to use this for unknown target as the number is collected via API and changes. Any ideas how to achieve similar animation?

[@ittec6756]

Very good styling

[@mattgreenia4279]

Love the solution! I am experiencing an issue that I hope you can shed some light on... I deployed this solution in a script web part on a Modern style page in SharePoint. The script fires perfectly when you first go to the page. However, when you navigate internally on the site and go back to the page with the script it fails to fire. I've tried wrapping the code in a function and calling it on page load, to no avail. Thoughts?

[@diasdamen1346]

Thank you man. How to set a timer to each counting items for serial counting?

[@jeromesnail]

Great video. I would've used the dataset property to access the HTML5 data attribute. And maybe iteration over recursion in this case.

[@VinceM1000]

Awesome tutorial! I have already worked this into a site I am working on. I have modified to only have one counter. I was stuck on putting a dollar sign in front. I still can't figure out how to put an apostrophe after a hundred. Brad, I do have one question. How do I get the counter to load when I scroll down to about 900px?

[@852Dizel]

Recently I asked myself how to implement counter like this one) Brad, thanks for great lesson! But I’d like to extend it a little bit: here we have a linear animation, but I want to make slowly at the end, when we almost have desired counter. Like lifetime goes on hand in movie “In Time”. Any ideas how to implement it?

[@adeltahenti1330]

Great job, thank you brad

[@khancross]

Thanks for this nice tutorial. How is it possible to show a value in Hours:Minutes:Seconds likte total running time?

[@jaleotech5918]

why doesn't each one sequentially versus all at the same time? Or are they running so fast it is not discernible? I would have figured that each counter would get to the limit before moving on to the next value of counter in the nodelist

[@jaleotech5918]

I guess the other way to ask the question is how could you make them go one by one (not that that would be better but it would explain perhaps the why in my question)

[@mohammedimad1024]

Thanks bro for your helpful videos , I hope you answer my question cuz I'm struggling for past 3 days , What if I want the counter be unlimited and "don't effect with refresh button" I mean when somebody press refresh the counter continue .

[@MrKiemsi]

Do we need to use clearTimeOut for this?

[@fritzvincentcana7099]

How to put comma in thousand number?

[@evgeniy497]

Inspired your prev video about Microsoft clone, I've created Apple homepage clone. Thanks for useful and inspiration videos!

[@luisantoniorosalesochoa927]

and how do we add in scroill function to work... when reached the section?

[@codito7388]

Things that i cannot find in youtube easily is functional contact form with mern or node-react. Also lightbox gallery. We are looking forward to see tut like this and other that is not is to find.

[@ebentee]

Also thanks for sharing, I really like you for your good work, blessed you