JSFiddle - React, Tailwind, and code Playground

by namanyayg

HTML

<html>
<body>
    <textarea type="text" id="toRev" placeholder="I reverse stuff. Enter what you want, and see it reversed!"></textarea>
    <p id="revd"></p>
    
    <button id="submitted">Reverse!</button> <!-- Required, as own method is slower than the default JS one. //-->
</body>    
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
* {
    transition: 0.5s;
    -webkit-transition: 0.5s;
}
#toRev, #revd {
    padding:.3em;
    display:block;
    margin:auto;
    margin-top:2em;
    height:8em;
    overflow:auto;
    white-space: pre-wrap;
    width:80%;
    resize:none;
    font-family:'PT Sans Narrow';
    line-height:1.5;
    font-size:100%;
    border: 1px solid #d9d9d9;
    border-radius:.3em;
    
}

#toRev:focus {
    outline:none;
}
#revd {
    background: #eee;
}

#submitted {
    margin:0 auto;
    display:block;
    border:1px solid #ddd;
    background:#eee;
    margin-top:1em;
    padding:.3em;
    border-radius:.3em;
}

JavaScript

function reverse(x) {
var str = x + '',
    len = str.length
    rev = "";
    
for (var i = len-1; i >= 0; i--) {
    rev += str[i];
}
return rev;
}

var textin = document.getElementById("toRev"),
    output = document.getElementById("revd"),
    submit = document.getElementById("submitted");

submit.onclick = function() {
    output.innerHTML = reverse(textin.value);
}