Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
000
Different Locations
000
Awards Won
000
Projects Done
000
Happy Clients
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background: #2e363e; } .counter { padding: 1rem 0; } .single-number { padding: 15px; transition: all 0.6s; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .digit-box { display: block; font-size: 80px; font-weight: 700; color: #2fdb50; } .text-box { color: #fff; } .text-center { text-align: center; } .single-number:hover { background: #2fdb50; color: #fff; } .single-number:hover .digit-box { color: #fff; } @media (max-width: 1000px) { .single-number { margin-bottom: 30px; } .digit-box { font-size: 50px; } }
console.log("Event Fired") let targetElements = document.querySelectorAll(".digit-box"); let animationtiming = 3000; targetElements.forEach((targetElement) => { let currentValue = 0; let finalValue = parseInt(targetElement.getAttribute("data-val")); let timing = Math.floor(animationtiming / finalValue); let counter = setInterval(function () { currentValue += 1; targetElement.textContent = currentValue; if (currentValue == finalValue) { clearInterval(counter); } }, timing); });