JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<!-- TODO: Create a ul element that you will insert new list items into -->
<!-- TODO: Create a button that will trigger your function you will be creating -->

<ul id="theUl">
    
</ul>

<button id="click-me">Right heeeere</button>

CSS

#click-me {
    font-size: 30px;
}

JavaScript

//TODO: Create a function that will prompt 'What is one thing you would like for christmas?'. Then take the value you prompted for and use it to call another function you will create next called createListItem()
//TODO: Create the createListItem() function that will take one parameter (the christmas gift you want). And append a new li element to the ul element in your HTML with the textContent of the answer to what was prompted.

//grabbing the ul and assigning it to a var
var theUl = document.getElementById('theUl');

//grabbing the button and assigning it to a var
var theButton = document.getElementById('click-me');

function promptUser() {
    var userAns = prompt("What is one thing you would like for christmas?");
    
    //calling the 'createListItem' function
    createListItem(userAns);
    
}

function createListItem(userAns) {
   
    //creating an li and assigning it to a var
    var theLi = document.createElement('li');
    
    //adding the text content to the li
    theLi.textContent = userAns;
    
    //appending the li
    theUl.appendChild(theLi);
}

theButton.onclick = promptUser;