typing animation for index page

1 files changed, 45 insertions, 0 deletions

diff --git a/src/js/hacktype.js b/src/js/hacktype.js
new file mode 100644
index 00000000..932e4c78
--- /dev/null
+++ b/src/js/hacktype.js
@@ -0,0 +1,45 @@
+const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const numbers = "1234567890";
+const special = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";
+
+let interval = null;
+
+document.addEventListener("DOMContentLoaded", () => {
+  const elements = document.querySelectorAll(".hacktype");
+  let intervals = [];
+
+  function hackType() {
+    elements.forEach((element) => {
+      let iteration = 0;
+
+      intervals.push(
+        setInterval(() => {
+          element.innerText = element.innerText
+            .split("")
+            .map((letter, index) => {
+              if (index < iteration) {
+                return element.dataset.value[index];
+              }
+
+              return letters[Math.floor(Math.random() * 26)];
+            })
+            .join("");
+
+          if (iteration >= element.dataset.value.length) {
+            clearInterval(intervals.shift());
+          }
+
+          iteration += 1 / 3;
+        }, 30)
+      );
+    });
+  }
+
+  hackType(); // Call hackType initially
+
+  setInterval(() => {
+    intervals.forEach((interval) => clearInterval(interval)); // Clear existing intervals
+    intervals = []; // Reset intervals array
+    hackType(); // Call hackType again
+  }, 15000); // Repeat every 5 seconds
+});