Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript One Solution

How to optimised this code on step 5

Guess it is redundant to repeat them twice Thanks in advance

// 5: Create a new list item and add it to the <ul>

const list1 = document.createElement ('li');
const list1Content = document.createTextNode('This is content of new list');
const checkBox = document.createElement('input')
checkBox.setAttribute('type', 'checkbox');

list1.appendChild(checkBox);
list1.appendChild(list1Content);
ul.appendChild(list1);
// 1: Set the text of the <h1> element
const h1 = document.querySelector('h1');
h1.textContent = "This is H1 Tag"

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

// 3: Set the content of the '.desc' paragraph
// The content should include at least one HTML tag
const desc = document.querySelector('.desc');


const p1 = document.createElement('p');
const node1 = document.createTextNode("This is what inside p1");

p1.appendChild(node1);
desc.appendChild(p1);



// 4: Set the class of the <ul> to 'list'
const ul = document.querySelector('ul');
ul.classList.add('list');


// 5: Create a new list item and add it to the <ul>

const list1 = document.createElement ('li');
const list1Content = document.createTextNode('This is content of new list');
const checkBox = document.createElement('input')
checkBox.setAttribute('type', 'checkbox');

list1.appendChild(checkBox);
list1.appendChild(list1Content);
ul.appendChild(list1);



// 6: Change all <input> elements from text fields to checkboxes

const myInput = document.querySelectorAll('input');
let i;
for (i=0; i < myInput.length; i++ ){
    myInput[i].type = 'checkbox';
}


// 7: Create a <button> element, and set its text to 'Delete'
// Add the <button> inside the '.extra' <div>
const deleteButton = document.createElement('button');
const buttonContent = document.createTextNode('Delete Area');
deleteButton.appendChild(buttonContent);

const extra = document.querySelector('.extra');
extra.appendChild(deleteButton);

// 8: Remove the '.extra' <div> element from the DOM when a user clicks the 'Delete' button

extra.addEventListener('click', () => {
    extra.remove();
});

1 Answer

Steven Parker
Steven Parker
231,269 Points

I'm not sure why step 5 is shown twice here, clearly you only need one of them.

But while this code seems reasonably optimized, it's doing more than what the instructions call for. In particular, the instructions don't ask for a check box or an input field to be created and added to the list item.