JSFiddle - React, Tailwind, and code Playground

by tmyie

HTML

<div class="wrapper">
    <input id="input" placeholder="Write here">
    <button>Add</button>
    <hr>
    <ul></ul>
</div>

CSS

.wrapper {
    max-width: 300px;
    text-align: center;
    margin: 300px auto;
    font-family:"Open Sans";
    font-size: 10pt;
}
li {
    background-color: tomato;
    margin: 4px 0;
}
ul {
    padding: 0;
    background-color: none;
    text-align: left;
}
.remove {
    display: inline;
    float: right;
}
button {
    width: 50px;
}
#input {
    width: 240px;
}
hr {
    padding: none;
}

JavaScript

var doc = document, // creates a variable, changing 'document' to the variable 'doc'
		    list = doc.getElementsByTagName('ul')[0],
		    li = doc.getElementsByTagName('li')[0],
		    input = doc.getElementById('input'),
		    button = doc.getElementsByTagName('button')[0]; // creates a variable called 'button', that gets the first array of all the <button> elements



		button.onclick = function () {

		    var mySubmission = doc.getElementById('input').value; // Get values of the input box and call it 'mySubmission'
		    var item = doc.createElement('li'); // Creates a <li> element in a variable called 'item'
		    item.innerHTML = mySubmission; // Inside the created 'item', the inner HTML becomes mySubmission + the class 'remove'

		    list.appendChild(item); // get <ul>, and add the variable 'item'.
		    doc.getElementById('input').value = ""; // resets input after submission

		};

		li.onclick = function () {

		    li.parentNode.removeChild(li);

		};