Btukfyl

var outputbinary = document.querySelector(".output");



var optionsarray = [0, 1];

var binaryarray = ;





setInterval(function() {



  if (binaryarray.length <= 2000) {

    var binarynumber = optionsarray[Math.floor(Math.random() * optionsarray.length)];

    binaryarray.push(binarynumber);

    var str = binaryarray.join(" ");

    outputbinary.innerText = str;

  }



}, 10);

<div class="output"></div>

<div class="loading">Developer</div>

<div>

const mapping = {

  D: '1111010001100011000111110',

  E: '1111110000111101000011111',

  V: '1000110001100010101000100',

  O: '0111010001100011000101110',

  L: '1000010000100001000011111',

  P: '1111010001111101000010000',

  R: '1111010001111101000110001'

};



// Grab the binary mapping of the letter and

// return some HTML

function binaryise(letter) {

  const arr = mapping[letter].split('');

  return arr.map(char => `<div class="${char === '0' ? 'zero' : 'one'}">${char}</div>`).join('');

}

  

// For each letter in the word create a 

// binary version and return it in a list-item container

function processWord(arr) {

  const items = arr.map((letter, i) => {

    const binaryised = binaryise(letter);

    return `

      <li data-id=${i}>

        <div class="container">${binaryised}</div>

      </li>

    `;

  }).join('');

  return `<url>${items}</ul>`;

}



// Get a random number that hasn't previously appeared

function getRandom(arr, memo) {

  const index = Math.floor(Math.random() * arr.length);

  return memo.includes(index) ? getRandom(arr, memo) : index;  

}



// Once the html has been added to the page

// (all set with opacity to 0)

// iterate over the letters turning the

// opacity of each to 1

function showLetters(arr, memo) {

  memo = memo || ;

  if (memo.length !== arr.length) {

    const index = getRandom(arr, memo);

    const letter = arr[index];

    const el = document.querySelector(`[data-id="${index}"]`);

    setTimeout(() => {

      el.classList.add('show');

      memo.push(index);

      showLetters(arr, memo);

    }, 1000);

  }

}



var wordArr = 'Developer'.toUpperCase().split('');



// Process all the letters of the word and add them

// to the page...

const html = processWord(wordArr);

output.insertAdjacentHTML('beforeend', html);



// ...then fade them in

showLetters(wordArr);

ul {

  width: 100%;

  display: flex;

  flex-direction: row;

  list-style-type: none;

}



li {

  display: inline-block;

  margin-right: 1em;

  opacity: 0;

}



.container {

  width: 30px;

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

}



.show {

  opacity: 1;

  transition: opacity 4s linear;

}



.zero {

  opacity: 0.2;

}

<div id="output"></div>