JavaScript DOM Exercises 05

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:55 Exercise One (02:39 Final Solution)
03:19 Exercise Two (03:48 Final Solution)
04:27 Exercise Three (05:41 Final Solution)
05:55 Exercise Four (08:10 Final Solution)
08:42 Exercise Five (09:54 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!

[toscaantosca]

thanks for these excersises, James!I

think it's beeter to create a function for card in the excersise 1 and 2. Like this:

function createCard(h3, h4, demands) {
const card =
= h3
= h4
const list = card.querySelector('ul')
Array.from(list.children).forEach((el, i) => el.innerText = demands[i])
return card
}

Developer', '$60, 000', ['HTML', 'CSS', 'JS']))

[adietltesa]

Thanks once again Junior Developer Central! I learned a lot!

[grgol]

Best exercises for me as a junior developer! Thanks a lot)

[adietltesa]

Very nice explained!!! Realy helpfull! thanks a million!!

[SH-ltiv]

great exercises and explanations learning more everyday tyvm!

[marcoonlinetv]

excercise 2 -> let jobTitle = h3');

Developer'
Developer'
Developer'

[Ripstrm]

On exercise 4 - any reason for using the "keyup" event instead of "keydown"? I first did this on my own without watching the video, but noticed that when using "keydown" the search function was 1 keystroke behind. Not sure why that is but would love to know why. Love these exercises by the way. Great job!

[crazy_-bak]

why this don't work with me (job1.insertAdjacentElement("afterend", job2);) should i put somthing in the head ??

[toni_potato]

Exercise #2
const jobTitle = [ 'Software Developer', 'JavaScript Developer', 'Java Developer', 'Python Developer' ];
const listJobTitle = h3');

listJobTitle.forEach((item, index) => {
item.innerText = jobTitle[index];
});

[pandabuddy]

Hi. Do you can to make exercisies of OOP for Jr?

[toni_potato]

Exercise #1
const jobList =
const jobCard = document.querySelector('.jobs .job-card');

for(let i = 0; i < 3; i++) {
const cloneJobCard = jobCard.cloneNode(true);

}