// Select the h1 element inside the .words class
var wordElement = document.querySelector('.words h1');
var sentence = wordElement.textContent.split(' ');
// Split up words and letters
var newSentence = '';
for (var i = 0; i < sentence.length; ++i) {
var wordArray = sentence[i].split('');
var letters = '';
for (var x = 0; x < wordArray.length; ++x) {
letters += '' + wordArray[x] + '';
}
newSentence += '' + letters + ' ';
}
wordElement.innerHTML = newSentence;
// Trigger hover effects on each word
document.addEventListener('mouseenter', function(event) {
if (event.target.matches('.word')) {
animateWord(event.target);
}
}, true);
function animateWord(obj) {
var letters = obj.querySelectorAll('.letter');
letters.forEach(function(letter, i) {
setTimeout(function() {
animateLetter(letter);
}, 100 * i); // Small delay for each letter
});
}
function animateLetter(letter) {
var alpha = ['!', '#', '$', '0', '1', '2', '3', '4', '5', '6', 'A', 'G', 'T', 'H', 'Y', 'Z', 'X', 'W', 'O', 'K', 'Q', 'S'];
letter.classList.add('changing'); // Change color of letter
var original = letter.getAttribute('data-letter'); // Get original letter for use later
// Loop through random letters
var i = 0;
var letterInterval = setInterval(function() {
// Get random letter
var randomLetter = alpha[Math.floor(Math.random() * alpha.length)];
letter.textContent = randomLetter;
if (i === 5) { // If letter has changed 5 times then stop
clearInterval(letterInterval);
letter.textContent = original; // Set back to original letter
letter.classList.remove('changing'); // Reset color
}
++i;
}, 40);
}
