Javascript using DOM

[wispy pivot]

TASK:
-Make an empty HTML file, put an empty main tag inside the body.
-In your JavaScript, use querySelector to get a reference to the main tag and save it in a variable named main.
-Look up three good jokes and store them as separate variables in your JavaScript.
-Define an HTML template with a template string. Make a heading for your template that says "My Jokes" and make a list of your three jokes, inserting the variables as items in the list.
-Put the template inside the main tag.
-Make a paragraph tag with the document.createElement method and save it to a variable.
-Add the text "That's all folks!" as text content to the newly created paragraph tag.
-Append the paragraph tag to the body tag of your HTML page.

const main = document.querySelector("main");

let joke1 = "Q: Why was Cinderella so bad at soccer? \n A: She kept running away from the ball!"
let joke2 = "Q: What would bears be without bees? \n A: Ears!"
let joke3 = "Q: How do you make an egg-roll? \n A: You push it!"

const p = document.createElement(p);
p.textContent = "That's all folks!"
main.appendChild(p);

const template = `
    <h1> My Jokes </h1>
    <ul>
        <li> ${joke1} </li>
        <li> ${joke2} </li>
        <li> ${joke3} </li>
    </ul>
`;

main.innerHTML = template;