JSFiddle - React, Tailwind, and code Playground

by Jagadeesh Vallabhaneni

HTML

<form id="ui">
    <input type="text" placeholder="Your Message" />
    <input type="submit" />
</form>
<ul id="messages"></ul>

CSS

#messages {
    color: #7F8A15;
    font-style: italic;
}

JavaScript

// When a user enters text and presses the 
// submit button, add the text they typed 
// into the messages list and clear the 
// input field.
var ulElem = document.querySelector("#messages");

function addMsgIntoList(str) {
    var liElem = document.createElement("li");
    /*var liText = document.createTextNode(str);
    liElem.appendChild(liText);*/
    liElem.innerText = str;
    ulElem.appendChild(liElem);
}

var formElem = document.querySelector("#ui");
var inpElem = document.querySelector('#ui [type="text"]');
formElem.addEventListener("submit", function (e) {
    e.preventDefault();
    if (inpElem.value !== "") {
        addMsgIntoList(inpElem.value);
    }
    inpElem.value = "";
});

ulElem.addEventListener("click", function (e) {
    if (!ulElem.isEqualNode(e.target)) {
        ulElem.removeChild(e.target);
    }
});