JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<html>
        <head>
    </head>
        <body>
            <h1>Hello!</h1>
            <p>wow let's make it happen</p>
            <ul id="list">
                <li>first one</li>
                <li>second one</li>
                <li>third!</li>
            </ul>
            <p><button id="theButt" type="button">Click me!</button>
    </body>
    </html>

CSS

h1 {
    font-size: 30px;
    padding-bottom: 15px;
}

p {
    color: #ff0000;
}

li {
    padding: 10px;
    background-color: #cccccc;
    margin: 4px;
    width: 200px;
}

button {
    margin: 10px;
}

JavaScript

//grab the button from the DOM
  
//set the event to the event handler and declare     
    
//Create the event handler (function)
    
//inside the event handler, create the DOM object, then create the text node that will go in the DOM object
    
//append the text node to the object you just created
    
//grab the DOM object you want to append it to and assign it to a var
    
    //append the object to the DOM you just assigned a var to

var theButton = document.getElementById("theButt");

theButt.onclick = handleButton;

function handleButton() {
    theLi = document.createElement("li");
    theText = document.createTextNode("Aww yea!");
    theLi.appendChild(theText);
    theUl = document.getElementById("list");
    theUl.appendChild(theLi);
}