JSFiddle - React, Tailwind, and code Playground
HTML
<div id='word-shower'></div>
<div id='letter-container'></div>
CSS
.letter {
border: 1px solid black;
padding: 5px;
}
#word-shower {
border-bottom: 3px solid blue;
padding-bottom: 5px;
}
JavaScript
var acronym = 'dftba', $letters = $('#letter-container')
for (var i = 0; i < acronym.length; i++) {
$letters.append($('<div>').text(acronym[i]).attr('class', 'letter'))
}
var $word = $('#word-shower')
setInterval(function() {
$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent('http://randomword.setgetgo.com/get.php') + '&callback=?', function(word) {
word = word.contents.toLowerCase()
$word.text(word)
$letters.children().each(function() {
if (word[0] == this.innerText) {
this.innerText = word
return
}
})
})
}, 1000)