Followers List Using HTML, CSS and JAVASCRIPT

HuXn-WebDev · HuXn-WebDev · commit dc1938da4629 · 2022-08-10T05:48:12.000-07:00
diff --git a/56. Followers/app.js b/56. Followers/app.js
@@ -0,0 +1,21 @@
+const followers = document.querySelectorAll(".followers");
+
+followers.forEach((followersCounter) => {
+  followersCounter.innerHTML = "0";
+
+  const updateFollowersCounter = () => {
+    const target = +followersCounter.getAttribute("data-target");
+    const c = +followersCounter.innerText;
+
+    const increment = target / 500;
+
+    if (c < target) {
+      followersCounter.innerHTML = `${Math.ceil(c + increment)}`;
+      setTimeout(updateFollowersCounter, 1);
+    } else {
+      followersCounter.innerText = target;
+    }
+  };
+
+  updateFollowersCounter();
+});
diff --git a/56. Followers/index.html b/56. Followers/index.html
@@ -0,0 +1,35 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Followers</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container card">
+      <div class="icon">
+        <i class="fa-brands fa-facebook"></i>
+      </div>
+      <div class="followers" data-target="24000"></div>
+      <span>Facebook Followers</span>
+    </div>
+
+    <div class="container card">
+      <div class="icon">
+        <i class="fa-brands fa-youtube"></i>
+      </div>
+      <div class="followers" data-target="35000"></div>
+      <span>YouTube Followers</span>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/56. Followers/style.css b/56. Followers/style.css
@@ -0,0 +1,50 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  /* color: #fff; */
+  font-family: sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.card {
+  border: 2px solid black;
+  padding: 20px;
+  width: 30%;
+  height: 50%;
+  cursor: pointer;
+  transition: all 0.5s;
+}
+
+.card:hover {
+  box-shadow: 1px 1px 5px 0px;
+  transform: scale(1.2);
+}
+
+.container {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.fa-brands {
+  font-size: 2rem;
+}
+
+.followers {
+  font-size: 5rem;
+  margin-top: 2.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.fa-facebook {
+  color: rgb(66, 103, 178);
+}
+
+.fa-youtube {
+  color: rgb(255, 0, 0);
+}
