JavaScript DOM Exercises 06

In this tutorial, you'll get the chance to practice your JavaScript skills by working with the DOM.

Here's the link to the exercises hosted on CodePen:

Jump to any of the exercises:
01:01 Exercise One (02:13 Final Solution)
02:40 Exercise Two (03:33 Final Solution)
03:51 Exercise Three (05:22 Final Solution)
05:48 Exercise Four (07:41 Final Solution)
08:08 Exercise Five (08:40 Final Solution)

So these JavaScript exercises will help you put your JavaScript skills into practice by applying them to a simple page. You'll have to manipulate and read the DOM (Document Object Model) with JavaScript and make changes to the contents on the page.

Most of the exercises could be easily solved by simply updating the markup or adding CSS rules however this tutorial will give you a challenge and help you think differently about your JavaScript code by asking you to solve the challenges with JavaScript code.

#JavaScript #Practice #Exercises Channel Handle @codebubb

[codewithbubb]

Got your own solution to one of the exercises? Post it as a comment below!

[akshay__sood]

You don't know how much you are opening up our mind. This is where many beginners struggle and also intermediates. We feel L O S T.
We usually struggle with how to practice and how to go about learning something with quality you provide.

Thank you for all your help!

[zillalsenmesrane]

for exercice 2 : its better use querySelectorAll :
Array.from(tds).forEach((e) => {
}
});
this is dynamic no matter what place is the td .
thanks for those videos

[mudassirsayed]

Ty once again
I hope your channel grow faster in future

[toscaantosca]

Ex 2:

const leona = tr')).filter(el => {
return
})[0].cells;

[adietltesa]

Very well explained!!! again thanks a million!!!!

[wasimsuperb]

Thanks very good topic and practice .please like that with all topics of javascript from start to master a topic one by one ..thanks

[Ripstrm]

for Exercise 4: why not use:

const handleCol = row.lastElementChild;
const indexCol = row.firstElementChild;


instead of:

const handleCol = row.querySelector("th:nth-child(4), td:nth-child(4)");
const indexCol = row.querySelector("th:nth-child(1), td:nth-child(1)");

Is there a performance downside to doing it this way?

[pratyushranjan]

for exercise 4:-
document. => item.insertBefore(item.children[3], item.children[1]));

[jritzeku]

How to find position of person without hardcoding the pos value ? Have tried below but getting error saying
value is null. Essentially want to loop thru and find rosa's location in row. This is not the full program, just testing to access text content and fails.

let arr
for (let i = 1; i < arr.length + 1; i++) {

// td:nth-child(2)`))
td:nth-child(2)`).innerText) //Cannot read property 'innerText' of null
}

[vrutikapremani]

let table =
let row = table.insertRow(-1);
for(let i=0;i<value.length;i++) {
let cell = row.insertCell(i);
cell.innerHTML = value[i];
}

[elliott_]

excercise 1:
const table = tbody tr')[5];
const newRow = table.cloneNode(true);
= '6';
= 'Sean';
= 'Reyes';
tbody').insertAdjacentElement('beforeEnd', newRow);