JavaScript DOM Exercises 04

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:
00:51 Exercise One (02:27 Final Solution)
02:48 Exercise Two (04:38 Final Solution)
05:10 Exercise Three (06:28 Final Solution)
06:55 Exercise Four (07:41 Final Solution)
08:12 Exercise Five (10:24 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!

[mudassirsayed]

Tysm for uploading more series on Dom
Need more like this❤

[Elator]

Thank you James! Great tutorial as always!

[suryaguthula]

Hi, James.Thank you so much for your great tutorials.. very very useful.you covering all the logical stuff with examples.. thanks for that.Please try to go slow and clear while explaining the logic.It will helps the students who were less logical like me.you are style is good at your #Command Line Crash Course.Please continue like that..bit slow and clear while explaining the logic.. Hope it works.thanks

[karimmoawad]

exercise 3 :
ul li')[1].insertAdjacentElement('beforebegin', document.querySelectorAll('.menu ul li')[2])

[elliott_]

excercise 3:
const services =
const about =
document.querySelector('ul').insertBefore(services, about)

[toni_potato]

const aboutItem = document.querySelector('.menu ul li:nth-child(2)');
const serviceItem = document.querySelector('.menu ul li:nth-child(3)');
serviceItem.parentElement.insertBefore(serviceItem, aboutItem);

[jritzeku]

Alt. solution to ex.3 (without hardcoding position value for practices sake)

let servicesPos =0;
let aboutPos =0;

const listItems =

for (let i = 0; i < listItems.length; i++) {
if(listItems[i].innerText === 'Services'){
servicesPos = i;
}
if(listItems[i].innerText === 'About'){
aboutPos = i;
}
}
listItems[aboutPos].insertAdjacentElement('beforeBegin', listItems[servicesPos])