JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<input id="name" type="text" placeholder="Enter name">
<button id="enter">Add</button>
<br>
<br>
<ul id="names"></ul>

JavaScript

var namesElement = document.getElementById('names');
var nameInput = document.getElementById('name');
var namesList = [];

document.getElementById('enter').addEventListener('click', function() {
    var newName = nameInput.value.trim();
    // Only add when we have a value.
    if (newName) {
      namesList.push(newName);
      for (var i = 0, n; n = namesList[i]; i++) {
          var liElement = document.createElement('li');
          liElement.innerText = n;
      }
      namesElement.appendChild(liElement);
    }
    // Let's blank out the input ready for the next
    nameInput.value = '';
    // ...and focus it!
    nameInput.focus();
});