JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

<input name="appName"/>

CSS

input {
  line-height: 32px;
  box-shadow: 5px 5px 15px #555;
}

JavaScript

const colors = ['#A66CFF', '#9C9EFE', '#AFB4FF', '#B1E1FF', '#002B5B', '#D1512D', '#D1512D', '#F65A83', '#FF1E00']
const input = document.querySelector('[name=appName]')

function getColor(name) {
  const value = name.codePointAt(0)
  if (isNaN(value)) {
    return ''
  }
  return colors[value % colors.length]
}

input.addEventListener('keyup', () => {
  document.body.style.backgroundColor = getColor(input.value)
}, false)