It appears to be working not *quite* like it should...

const myListTitle = document.querySelector('h1');
const desc = document.querySelector('.desc');
const myListItems = document.querySelector('ul');
const newItem = document.createElement('li');
const inputElements = document.querySelectorAll('input');
const deleteButton = document.createElement('button');
const extraContent = document.querySelector('.extra');
const container = document.querySelector('.container');


// 1: Set the text of the <h1> element
myListTitle.textContent = "Stuff that which I have achieved only a barely adequate Skill level";

// 2: Set the color of the <h1> to a different color
myListTitle.style.color = "tomato";

// 3: Set the content of the '.desc' paragraph
// The content should include at least one HTML tag
desc.innerHTML = "A list of things of which I <em>should</em> have a greater skill level";

// 4: Set the class of the <ul> to 'list'
myListItems.className = 'list';

// 5: Create a new list item and add it to the <ul>
newItem.innerHTML = "<input> Playing Smash Bros.";
myListItems.appendChild(newItem);

// 6: Change all <input> elements from text fields to checkboxes
for (let i = 0; i < inputElements.length; i += 1) {
  inputElements[i].type = 'checkbox';
}

// 7: Create a <button> element, and set its text to 'Delete'
// Add the <button> inside the '.extra' <div>
deleteButton.textContent = "Delete";
extraContent.appendChild(deleteButton);


// 8: Remove the '.extra' <div> element from the DOM when a user clicks the 'Delete' button
deleteButton.addEventListener('click', () => {
  container.removeChild(extraContent);
});