JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="WhatYouTyped">
<button class="btn">click</button>
<ul class="collection"></ul>

JavaScript

//UI variables
const WhatYouTyped = document.querySelector("#WhatYouTyped");
const btn = document.querySelector(".btn");
const ul = document.querySelector(".collection");

// Function
loadEventFunction();

function loadEventFunction() {
  btn.addEventListener("click", btnFunction);
}

function btnFunction(e) {
  console.log("click");

  // If statement to check if the input is empty when the button is clicked

  if (WhatYouTyped.value === "") {
    alert("The input can't be empty");
  }

  // I created an li element and a text node to receive what ever that is put into the input.

  const li = document.createElement('li');
  li.className = "collection-item";
  li.appendChild(document.createTextNode(WhatYouTyped.value));

  // I appended the list item to the ul

  ul.appendChild(li);

  WhatYouTyped.value === "";
  e.preventDefault();
}