...

arafat709 · arafat709 · commit 56c92c23084f · 2025-01-28T13:30:18.000+06:00
diff --git a/index_counter.css b/index_counter.css
@@ -0,0 +1,61 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    margin: 10px;
+    /* padding: 10px; */
+    box-shadow: -30px 20px -1px black;
+}
+
+#parent_div {
+    height: 350px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: gray;
+    border-radius: 50%;
+}
+
+.child_div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 300px;
+    width: 300px;
+    border-radius: 50%;
+    box-shadow: 8px 8px 12px #112;
+    animation: animate linear infinite 8s;
+}
+
+.child_div p {
+    margin: 0;
+    font: 50px bold;
+}
+
+@keyframes animate {
+    0% {
+        background-color: red;
+    }
+
+    25% {
+        background-color: yellow;
+    }
+
+    50% {
+        background-color: blue;
+    }
+
+    50% {
+        background-color: orange;
+    }
+
+    75% {
+        background-color: yellowgreen;
+    }
+
+    100% {
+        background-color: red;
+    }
+};
diff --git a/index_counter.html b/index_counter.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Counter</title>
+    <link rel="stylesheet" href="index_counter.css">
+</head>
+
+<body>
+    <div id="parent_div">
+        <div class="child_div">
+            <p class="counterdata" data-counterdata="1000">0000</p>
+        </div>
+        <div class="child_div">
+            <p class="counterdata" data-counterdata="1200">0000</p>
+        </div>
+        <div class="child_div">
+            <p class="counterdata" data-counterdata="1400">0000</p>
+        </div>
+        <div class="child_div">
+            <p class="counterdata" data-counterdata="1600">0000</p>
+        </div>
+    </div>
+
+    <script src="index_counter.js"></script>
+</body>
+
+</html>
diff --git a/index_counter.js b/index_counter.js
@@ -0,0 +1,12 @@
+let counter = document.querySelectorAll('.counterdata');
+
+for (let single of counter) {
+    let count = 0;
+    let counterUp = () => {
+        count++;
+        if (count <= single.dataset.counterdata){
+            single.innerHTML = count;
+        }
+    }
+    setInterval(counterUp, 10);
+}
