diff --git a/100_projects/74-visual-counter/inedx.html b/100_projects/74-visual-counter/inedx.html new file mode 100644 index 0000000..d45b45f --- /dev/null +++ b/100_projects/74-visual-counter/inedx.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + + +
+ Followers Counter +
+ Subscribers Counter + + + + + \ No newline at end of file diff --git a/100_projects/74-visual-counter/main.js b/100_projects/74-visual-counter/main.js new file mode 100644 index 0000000..5abec71 --- /dev/null +++ b/100_projects/74-visual-counter/main.js @@ -0,0 +1,23 @@ +const counters = document.querySelectorAll('.counter'); + +// this could work for multiple counters +counters.forEach(counter => { + // start with 0 by default + counter.innerText = '0'; + + const updateCounter = () => { + const target = +counter.getAttribute('data-target'); + const c = +counter.innerText; + + // get the 0.1% to speed up things + const increment = target / 2000; + + if(c < target) { + counter.innerText = `${Math.ceil(c + increment)}`; + setTimeout(updateCounter, 1) + } else { + counter.innerText = target; + } + }; + updateCounter(); +}); \ No newline at end of file diff --git a/100_projects/74-visual-counter/style.css b/100_projects/74-visual-counter/style.css new file mode 100644 index 0000000..f7e3c87 --- /dev/null +++ b/100_projects/74-visual-counter/style.css @@ -0,0 +1,20 @@ +* { + box-sizing: border-box; +} +body { + background-color: #8FBC8F; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100vh; + margin: 0; +} +.counter { + font-size: 60px; + margin-top: 30px; +} +span{ + font-size: 24px; +} \ No newline at end of file