JSFiddle - React, Tailwind, and code Playground

by Svetlana

HTML

<input type='text' id="input"/> =>
<input type='text' id="output" disabled />

CSS

* {
  box-sizing: border-box;
  font-size: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.5em;
  color: #e3256b;
}
input {
  margin-top: 50px;
  padding: 5px 10px;
  width: 300px;
  border: 2px solid #e3256b;
  font-size: 16px;
  border-radius: 5px;
  color: #e3256b;
}
input:focus {
  outline: none;
  box-shadow: 0 0 10px 0 #e3256b;
}

JavaScript

const input = document.querySelector("#input");
const output = document.querySelector("#output");
input.addEventListener("keydown", reverse);

let scheduled = false;
function reverse() {
	if (!scheduled) {
  scheduled = true;
  setTimeout(function() {
  	scheduled = false;
  	let myString = input.value;
    myString = myString.trim().split("");
    const lastIdx = myString.length - 1;
    const halfArr = Math.floor(lastIdx / 2);
    for (let i = 0; i <= halfArr; i++) {
    	const tempOppositeChar = myString[lastIdx-i];
      myString[lastIdx-i] = myString[i];
      myString[i] = tempOppositeChar;
    }
    output.value = myString.join('');
  }, 800);
  }
}