Review my Code Please

// 1: Set the text of the <h1> element
var h1 = document.getElementsByTagName('h1')[0];
h1.textContent = "Practice Session Win";

// 2: Set the color of the <h1> to a different color
h1.style.color = 'red';

// 3: Set the content of the '.desc' paragraph
// The content should include at least one HTML tag
var desc = document.getElementsByClassName('desc')[0];
desc.innerHTML= '<h4>Hello Jlo</h4>';

// 4: Set the class of the <ul> to 'list'
var ul = document.getElementsByTagName('ul')[0];
ul.className = "list";

// 5: Create a new list item and add it to the <ul>
var newListItem = document.createElement('li');
newListItem.innerHTML = '<input>The New List Item';
ul.appendChild(newListItem);

// 6: Change all <input> elements from text fields to checkboxes
var allInput = document.querySelectorAll('input');
allInput.forEach(function (elem,index) {
elem.type = "checkbox"});

// 7: Create a <button> element, and set its text to 'Delete'
// Add the <button> inside the '.extra' <div>
var delBtn = document.createElement('button');
delBtn.textContent = 'Delete';
var extraDiv = document.getElementsByClassName('extra')[0];
extraDiv.appendChild(delBtn);

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