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>
<header><div>
</div></header>
<main>
<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>
<footer>
<!-- Left side -->
<div>

61
main.js
View File

@ -1,10 +1,28 @@
const Maths = Math; // Yes, I'm that patriotic.
const hellos = ['Hewwo!', 'Hello!', 'Awoo!'];
const imaTypingSpeed = 100;
const imaTypingSpeed = 75;
const imaDeletingSpeed = 50;
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) {
return array[Maths.floor(Maths.random() * array.length)];
@ -17,35 +35,54 @@ window.addEventListener('load', (e) => {
// ----- I'm a text section -----
const imaEl = document.getElementById('imaText');
let currentEl = document.createElement('span');
imaEl.appendChild(currentEl);
let imaSelection = 0;
let imaCharIdx = 0;
let currentIntervalID = -1;
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++;
if (imaCharIdx >= imaTexts[imaSelection].length) {
clearInterval(currentIntervalID);
setTimeout(() => {
currentIntervalID = setInterval(deleteFunc, imaDeletingSpeed)
}, imaGapTime);
setTimeout(deleteFunc, imaGapTime);
} else {
setTimeout(typeFunc, imaTypingSpeed*!controlChar);
}
};
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 == '') {
currentEl = imaEl;
imaCharIdx = 0;
imaSelection += 1;
if (imaSelection >= imaTexts.length) {
imaSelection = 0;
}
clearInterval(currentIntervalID);
currentIntervalID = setInterval(typeFunc, imaTypingSpeed);
currentEl = document.createElement('span');
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 */
.imgRightText {
display: flex;