input.value styling

by 3rror404

HTML

<button onclick="myFunction()"> Run </button>

 <div id="output" class="fake-input" contenteditable="true">

CSS

.fake-input {
  display: inline-block;
  padding: 5px;
  border: 1px solid black;
  border-radius: 4px;
}

JavaScript

let output = document.querySelector("#output");

function myFunction() {
  output.innerHTML = "<span style='color:black;'>Black</span> <span style='color:yellow;'>Yellow</span>";
  
}

output.addEventListener('blur', function(e) {

	var colours = this.innerText.split(' ');
  var outputHTML = [];
  
  colours.forEach(function (item, index) {
    outputHTML.push(`<span style="color: ${item.toLowerCase()}">${item}</span>`);
  });
  
  output.innerHTML = outputHTML.join(' ');
});