<div class='box'>
<div class='container'>
<div class='point'></div>
<div class='value'>125 000</div>
</div>
</div>
.box {
padding: 20px 0px;
width: 300px;
display:flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}
.container {
display:grid;
grid-template-columns: 1fr 1fr;
align-items:center;
gap:10px;
}
.point {
width:30px;
height: 30px;
background: red;
justify-self: end;
}
.value {
font-family: fantasy;
font-size: 20px;
}
window.onload = function() {
const valueElement = document.querySelector('.value');
let count = 1000;
const timer = setInterval(() => {
if (count < 99999999) {
count++;
valueElement.textContent = count.toLocaleString();
} else {
clearInterval(timer);
}
}, 50);
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.