Added "I'm a" text

2026-02-07 20:43:15 +00:00
parent 78fa0a4fc9
commit 83d66aa86a
3 changed files with 53 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -1,5 +1,9 @@
 <!DOCTYPE html>
 <html>
+    <!--
+    Hello fellow nerd!
+    -->
+
    <head>
        <title></title>
        <link rel="stylesheet" href="/styles.css">
@ -11,6 +15,7 @@
        </div></header>
        <main>
            <h1 id="helloText"><noscript>Hewwo!</noscript></h1>
+            <h2>I'm a <span id="imaText"><noscript>dumbass</noscript></span>.</h2>
        </main>
        <footer>
            <!-- Left side -->
--- a/main.js
+++ b/main.js
@ -1,11 +1,51 @@
 const Maths = Math; // Yes, I'm that patriotic.
 const hellos = ['Hewwo!', 'Hello!', 'Awoo!'];

+const imaTypingSpeed = 100;
+const imaDeletingSpeed = 50;
+const imaGapTime = 1500;
+const imaTexts = ['dumbass', 'network engineer', 'Arch Linux user', 'programmer', 'furry', 'massive nerd'];
+
 function pickRandom(array) {
    return array[Maths.floor(Maths.random() * array.length)];
 }

 window.addEventListener('load', (e) => {
-    const helloText = document.getElementById('helloText');
-    helloText.innerText = pickRandom(hellos);
+    // ----- Hellos section -----
+    const helloEl = document.getElementById('helloText');
+    helloEl.innerText = pickRandom(hellos);
+
+    // ----- I'm a text section -----
+    const imaEl = document.getElementById('imaText');
+    let imaSelection = 0;
+    let imaCharIdx = 0;
+    let currentIntervalID = -1;
+
+    const typeFunc = () => {
+        imaEl.innerText += imaTexts[imaSelection][imaCharIdx];
+        imaCharIdx++;
+
+        if (imaCharIdx >= imaTexts[imaSelection].length) {
+            clearInterval(currentIntervalID);
+            setTimeout(() => {
+                currentIntervalID = setInterval(deleteFunc, imaDeletingSpeed)
+            }, imaGapTime);
+        }
+    };
+
+    const deleteFunc = () => {
+        imaEl.innerText = imaEl.innerText.slice(0, -1);
+
+        if (imaEl.innerText == '') {
+            imaCharIdx = 0;
+            imaSelection += 1;
+            if (imaSelection >= imaTexts.length) {
+                imaSelection = 0;
+            }
+            clearInterval(currentIntervalID);
+            currentIntervalID = setInterval(typeFunc, imaTypingSpeed);
+        }
+    };
+
+    currentIntervalID = setInterval(typeFunc, imaTypingSpeed);
 });
--- a/styles.css
+++ b/styles.css
@ -49,3 +49,9 @@ footer {
 footer > div {
    width: 50%;
 }
+
+
+
+#imaText { /* The text directly after "I'm a" */
+    color: #5a91ff;
+}