JSFiddle - React, Tailwind, and code Playground

by alxers

HTML

<input type="text" id="userInput">
<input type="submit" id="userSubmit">
<div id="userText"></div>

JavaScript

//var userSubmit = document.getElementsByClassName("userSubmit")[0];

var userSubmit = document.getElementById("userSubmit");
var text = document.getElementById("userInput");

userSubmit.addEventListener("click", insertText, false);
userInput.addEventListener("keydown", sendByEnter, false);

function insertText() {
    var userText = document.getElementById("userText");
    if (text.value) {
        userText.innerHTML += "&gt; " + htmlEscape(text.value) + "<br />";
        text.value = '';
    }
}
// Professional JavaScript for Web Developers, p.158
function htmlEscape(text) {
    return text.replace(/[<>"&]/g, function (match, pos, originalText) {
        switch (match) {
            case "<":
                return "&lt;";
            case ">":
                return "&gt;";
            case "&":
                return "&amp;";
            case "\"":
                return "&quot;";
        }
    });
}

function sendByEnter(e) {
    if (e.keyCode === 13) insertText();
}