JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<input id="user-input" type="text" value="tell me what you wanna do">
<button id="the-button">OH YEA CLICK ME!</button>

<ul id="the-list">
</ul>

JavaScript

//create a to do list app

//create the var for the UL
var theUl = document.querySelector('#the-list');

//grab the button and put it into a var
var theButton = document.querySelector('#the-button');

//create an event handler off the button click and grab the user's answer from the input field
theButton.addEventListener('click', getInput)

//create the handler (aka function duh) you referenced in the event handler you just made
function getInput() {
    //grab the user's answer from the input and put it into a var
    var userInput = document.querySelector('#user-input').value;
    
    //create an HTML element to put that user ans var into
    var theLi = document.createElement('li');
    
    //now put that user input into the element you just made
    
    //create a new var with the HTML and input together
    theLi.innerHTML = userInput;

    //now throw that HTML element back onto the web page
    theUl.appendChild(theLi);    
    
}