JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

<input type="text" id="input" placeholder="">
<button>Узнать</button>
<h1>Результат</h1>

CSS

h1 {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}

JavaScript

// hexlet course  =>   Введение в программирование
// author         =>   Roman Zharikov (zharikov.site)

//document.addEventListener("DOMContentLoaded", function() {

// define function
const reverse = (str) => {
  let buf = [];
  if (str === '') {
    return '';
  } else {
    for (let i = str.length - 1; i !== 0; i--)
      buf.push(str[i]);
    return buf.join('') + str[0];
  }
}

var button = document.getElementsByTagName('button')[0],
  out = document.getElementsByTagName('h1')[0],
  input = document.getElementById('input');

button.addEventListener('click', function() {

  // call function and out result to DOM element
  out.innerHTML = reverse(input.value);

});

//});