JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<div id="container">
  <div id="blank">
    <span class="word"></span>
    <span class="word"></span>
    <span class="word"></span>
  </div>
  <div id="tiles">
    <div class="tile">foo oweithiw</div>
    <div class="tile">bar</div>
    <div class="tile">baz</div>
  </div>
</div>

CSS

#blank {
  border-bottom: 2px solid black;
  display: inline-block;
  min-width: 3em;
  position: relative;
}
#blank::after {
  bottom: 0;
  content: '.';
  display: inline-block;
  position: absolute;
  right: -0.2em;
}

.word {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.word.filled {
  opacity: 1;
}

#tiles {
  margin: 1em -1em 0;
}

.tile {
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  height: 5em;
  margin: 0 1em;
  overflow: hidden;
  text-indent: -1000em;
  width: 5em;
}

JavaScript

var blank$ = document.getElementById('blank');
var wordsArr = Array.prototype.slice.call(blank$.getElementsByClassName('word'));
var tiles$ = document.getElementById('tiles');
var tilesArr = Array.prototype.slice.call(tiles$.getElementsByClassName('tile'));

function mouseIn(event) {
	var index = Array.prototype.slice.call(this.parentElement.children).indexOf(this);
  
  for (var i = wordsArr.length-1; i > -1; i--) {
  	var word$ = wordsArr[i];
    
  	if (i === index) {
    	word$.classList.add('filled');
      word$.innerText = this.innerText;
    } else {
    	word$.classList.remove('filled');
      word$.innerText = '';
    }
  }
  
}

for (var i = tilesArr.length-1; i > -1; i--) {
	tilesArr[i].addEventListener('mouseenter', mouseIn);
}