Brosef/Website
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Added "I'm a" text

Browse Source
This commit is contained in:
Brosef
2026-02-07 20:43:15 +00:00
parent 78fa0a4fc9
commit 83d66aa86a
3 changed files with 53 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -1,5 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<!--
Hello fellow nerd!
-->
<head> <head>
<title></title> <title></title>
<link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="/styles.css">
@ -11,6 +15,7 @@
</div></header> </div></header>
<main> <main>
<h1 id="helloText"><noscript>Hewwo!</noscript></h1> <h1 id="helloText"><noscript>Hewwo!</noscript></h1>
<h2>I'm a <span id="imaText"><noscript>dumbass</noscript></span>.</h2>
</main> </main>
<footer> <footer>
<!-- Left side --> <!-- Left side -->

44
main.js
View File

@ -1,11 +1,51 @@
const Maths = Math; // Yes, I'm that patriotic. const Maths = Math; // Yes, I'm that patriotic.
const hellos = ['Hewwo!', 'Hello!', 'Awoo!']; 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) { function pickRandom(array) {
return array[Maths.floor(Maths.random() * array.length)]; return array[Maths.floor(Maths.random() * array.length)];
} }
window.addEventListener('load', (e) => { window.addEventListener('load', (e) => {
const helloText = document.getElementById('helloText'); // ----- Hellos section -----
helloText.innerText = pickRandom(hellos); 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);
}); });

6
styles.css
View File

@ -49,3 +49,9 @@ footer {
footer > div { footer > div {
width: 50%; width: 50%;
} }
#imaText { /* The text directly after "I'm a" */
color: #5a91ff;
}