incrementing-counter

<!DOCTYPE html>

<head>

<style>

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: #8e44ad;

color: #fff;

font-family: 'Roboto Mono', sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

.counter-container {

display: flex;

flex-direction: column;

justify-content: center;

text-align: center;

margin: 30px 50px;

}

.counter {

font-size: 60px;

margin-top: 10px;

}

@media (max-width: 580px) {

body {

flex-direction: column;

}

</style>

<title>Increment Counter</title>

</head>

<body>

<span>Twitter Followers</span>

</div>

<span>YouTube Subscribers</span>

</div>

<span>Facebook Fans</span>

</div>

counters.forEach(counter => {

counter.innerText = '0'

const updateCounter = () => {

const target = +counter.getAttribute('data-target')

const c = +counter.innerText

const increment = target / 200

if(c < target) {

counter.innerText = `${Math.ceil(c + increment)}`

setTimeout(updateCounter, 1)

} else {

counter.innerText = target

}

updateCounter()

})</script>

</body>

</html>