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

Adjusted "I'm a" text functionality

Browse Source
This commit is contained in:
Brosef
2026-02-07 23:43:08 +00:00
parent b5e60dce27
commit b188e5143b
3 changed files with 57 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -13,10 +13,12 @@
<body> <body>
<header><div> <header><div>
</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> <h2><span id="imaText"><noscript>I'm a <span class="textHighlight">dumbass</span></noscript></span>.</h2>
</main> </main>
<footer> <footer>
<!-- Left side --> <!-- Left side -->
<div> <div>

61
main.js
View File

@ -1,10 +1,28 @@
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 imaTypingSpeed = 75;
const imaDeletingSpeed = 50; const imaDeletingSpeed = 50;
const imaGapTime = 1500; const imaGapTime = 1500;
const imaTexts = ['dumbass', 'network engineer', 'Arch Linux user', 'programmer', 'furry', 'massive nerd']; const imaTexts = shuffle([
'I\'m a $dumbass',
'I\'m a $network engineer',
'I\'m an $Arch Linux user',
'I\'m a $programmer',
'I\'m a $furry',
'I\'m a $massive nerd',
'I\'m a $Home Assistant addict',
'I\'m a $House M.D. enjoyer',
'I\'m a $DJ',
'I\'m an $ice skater'
]);
function shuffle(array) {
return array
.map(value => ({ value, sort: Maths.random() }))
.sort((a, b) => a.sort - b.sort)
.map(({ value }) => value);
}
function pickRandom(array) { function pickRandom(array) {
return array[Maths.floor(Maths.random() * array.length)]; return array[Maths.floor(Maths.random() * array.length)];
@ -17,35 +35,54 @@ window.addEventListener('load', (e) => {
// ----- I'm a text section ----- // ----- I'm a text section -----
const imaEl = document.getElementById('imaText'); const imaEl = document.getElementById('imaText');
let currentEl = document.createElement('span');
imaEl.appendChild(currentEl);
let imaSelection = 0; let imaSelection = 0;
let imaCharIdx = 0; let imaCharIdx = 0;
let currentIntervalID = -1;
const typeFunc = () => { const typeFunc = () => {
imaEl.innerText += imaTexts[imaSelection][imaCharIdx]; let controlChar = imaTexts[imaSelection][imaCharIdx] == '$';
if (controlChar) {
let highlight = !currentEl.classList.contains('textHighlight');
currentEl = document.createElement('span');
if (highlight) {
currentEl.classList.add('textHighlight');
}
imaEl.appendChild(currentEl);
} else {
currentEl.innerText += imaTexts[imaSelection][imaCharIdx];
}
imaCharIdx++; imaCharIdx++;
if (imaCharIdx >= imaTexts[imaSelection].length) { if (imaCharIdx >= imaTexts[imaSelection].length) {
clearInterval(currentIntervalID); setTimeout(deleteFunc, imaGapTime);
setTimeout(() => { } else {
currentIntervalID = setInterval(deleteFunc, imaDeletingSpeed) setTimeout(typeFunc, imaTypingSpeed*!controlChar);
}, imaGapTime);
} }
}; };
const deleteFunc = () => { const deleteFunc = () => {
imaEl.innerText = imaEl.innerText.slice(0, -1); // This is honestly quite disgusting, but it does work...
let textAttrib = imaEl.lastChild.nodeName == '#text' ? 'data' : 'innerText';
imaEl.lastChild.innerText = imaEl.lastChild.innerText.slice(0, -1);
if (imaEl.lastChild.innerText == '') {
imaEl.lastChild.remove();
}
if (imaEl.innerText == '') { if (imaEl.innerText == '') {
currentEl = imaEl;
imaCharIdx = 0; imaCharIdx = 0;
imaSelection += 1; imaSelection += 1;
if (imaSelection >= imaTexts.length) { if (imaSelection >= imaTexts.length) {
imaSelection = 0; imaSelection = 0;
} }
clearInterval(currentIntervalID); currentEl = document.createElement('span');
currentIntervalID = setInterval(typeFunc, imaTypingSpeed); imaEl.appendChild(currentEl);
setTimeout(typeFunc, imaTypingSpeed);
} else {
setTimeout(deleteFunc, imaDeletingSpeed);
} }
}; };
currentIntervalID = setInterval(typeFunc, imaTypingSpeed); typeFunc();
}); });

4
styles.css
View File

@ -69,6 +69,10 @@ footer > div > * {
.textHighlight {
color: var(--text-accent-colour);
}
/* Used to make text appear to the right of an image */ /* Used to make text appear to the right of an image */
.imgRightText { .imgRightText {
display: flex; display: flex;