From 1f91d2827c1d4812b49305b1fd42354b20f504f4 Mon Sep 17 00:00:00 2001
From: Will Clarke <clarke19w@gmail.com>
Date: Sat, 6 Aug 2022 11:57:06 +0100
Subject: [PATCH] typing animation???

---
 index.html | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/index.html b/index.html
index d31d60e..5c660a4 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,69 @@
         <meta name="description" content="Free subdomains for developers around the globe.">
     </head>
     <body class="bg-bg">
+        <div class="flex flex-col w-7/12 mx-auto bg-bg-accent rounded mt-12 text-center text-text p-12">
+            <!-- Typing effect -->
+            <span class="text-4xl typing-container">
+                <span class="input-cursor"></span>
+                <span id="feature-text"></span>
+                <span id="sentence">.is-a-good.dev</span>
+            </span>
+        </div>
+        <script>
+            const carouselText = [
+                {text:"johndoe",color:"white"},
+                {text:"your_name",color:"white"},
+                {text:"danny",color:"white"},
+                {text:"foo",color:"white"},
+                {text:"bar",color:"white"}
+            ]
+            $( document ).ready(async function() {
+            carousel(carouselText, "#feature-text")
+            });
 
+            async function typeSentence(sentence, eleRef, delay = 100) {
+            const letters = sentence.split("");
+            let i = 0;
+            while(i < letters.length) {
+                await waitForMs(delay);
+                $(eleRef).append(letters[i]);
+                i++
+            }
+            return;
+            }
+
+            async function deleteSentence(eleRef) {
+            const sentence = $(eleRef).html();
+            const letters = sentence.split("");
+            let i = 0;
+            while(letters.length > 0) {
+                await waitForMs(100);
+                letters.pop();
+                $(eleRef).html(letters.join(""));
+            }
+            }
+
+            async function carousel(carouselList, eleRef) {
+                var i = 0;
+                while(true) {
+                updateFontColor(eleRef, carouselList[i].color)
+                await typeSentence(carouselList[i].text, eleRef);
+                await waitForMs(1500);
+                await deleteSentence(eleRef);
+                await waitForMs(500);
+                i++
+                if(i >= carouselList.length) {i = 0;}
+                }
+            }
+
+            function updateFontColor(eleRef, color) {
+            $(eleRef).css('color', color);
+            }
+
+            function waitForMs(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms))
+            }
+        </script>
         <!-- Kofi widget -->
         <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
         <script defer>