efiL nikcuF eciN

Reverse a typed string in real time

by trentHarlem

HTML

<div id="container">
      <h1>Reverse it!</h1>
      <form action="" method="post">
        <input type="text" name="word" placeholder="Type Here" required>
    <!--  <button alt="click or Press ENTER" type="submit" name="submit">Reverse</button> -->

      </form>
      <!-- display the reversed word -->
      <div id="result">
      </div>

CSS

/* center everything with flex */
body {
  background-color: #131313;
  color: blanchedalmond;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

#container {
  padding: 20px;
  background-color: brown;
  border-radius: 10px;
  font: 1.2em system-ui;
}

h1 {
  color: blanchedalmond;
  width: 100%;
  text-align: center;
}

/* style the input */
input {
  display: block;
  height: 30px;
  width: 300px;
  padding: 5px;
  margin: auto;
  border-radius: 5px;
  border: 1px solid blanchedalmond;
}

/* style the button */
/* button {
  height: 30px;
  width: 100px;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  border: 1px solid blanchedalmond;
} */

/* style the result div */
#result {
  height: 100px;
  width: 300px;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  border: 1px solid blanchedalmond;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

JavaScript

//get the word
  const word = document.querySelector('input[name=word]');
  //get the button
  const button = document.querySelector('button[name=submit]');
  //get the result div
  const result = document.querySelector('#result');
  //  helper function
   const reversed = s => s.split('').reverse().join('')

  word.addEventListener('input', function(e) {
    e.preventDefault()
     result.innerHTML = reversed(word.value)
   // result.innerHTML = word.value.split('').reverse().join('')
  })