From 47ca54383600f9970f22a51426a139f3f231d961 Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Sat, 6 May 2023 18:52:10 +0300
Subject: [PATCH] Add files via upload
---
100_projects/74-visual-counter/inedx.html | 20 ++++++++++++++++++++
100_projects/74-visual-counter/main.js | 23 +++++++++++++++++++++++
100_projects/74-visual-counter/style.css | 20 ++++++++++++++++++++
3 files changed, 63 insertions(+)
create mode 100644 100_projects/74-visual-counter/inedx.html
create mode 100644 100_projects/74-visual-counter/main.js
create mode 100644 100_projects/74-visual-counter/style.css
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