Master DOM Manipulation | Part 2 | 5 PROJECTS | JavaScript DOM Manipulation

[@CodeLearningAcademy]

I don't know why people underestimate the power of HTML and CSS with Javascript you can really create a project with great features. Nice project and nice animations,Keep it up

[@MohitMummon]

If anyone is having trouble with project 5 with the delete button breaking the app. Change the deleteBtn code to the following: deleteButton.addEventListener('click', function (e) { let target = e.target; if (target.matches('button')) { target.parentElement.remove(); } if (target.matches('i')) { target.parentElement.parentElement.remove(); } });

[@NaveenKumar-or1jd]

can you exaplain this a bit bruh?

[@_.Mustafa._]

Thanks a lot Mohit brother.

[@_.Mustafa._]

@@NaveenKumar-or1jd On the last exercise when you click the trash can icon within the button, it will fail by deleting everything including the parent. The icon is its own DOM element and is NOT the button element. (copied it from this comment section in case you missed it. )

[@kit-kat837]

Thanks! That was super helpful.

[@noumbissistael1470]

Thanks very much I noticed and was already asking in comments before I saw yours

[@douglascounts4634]

On the last exercise when you click the trash can icon within the button, it will fail by deleting everything including the parent. The icon is its own DOM element and is NOT the button element. You can either fix this in code by checking that e.target.matches('button') before doing the delete or you can simply add a CSS rule that turns off pointer events for the icon like so: i.fa-trash-can { pointer-events: none; }

[@_.Mustafa._]

Thanks bro, second one is also a better solution.

[@cjaims1646]

Love this...felt this video was meant for me....when I just started learning more about DOM manipulation

[@CodeLab98]

Thank you! I'm really glad it helped!

[@kit-kat837]

I have watched several of your videos and they have all been fantastic. Thank you for all the work that you have done on them, and for sharing your work with all of us.

[@betanpc8210]

i've been waiting for the part 2!!! Your explanation for DOM helped me understand the DOM. And i actually got a remarkable grade in my college course by watching your videos. Many thanks!!!

[@CodeLab98]

That’s amazing to hear things like that!

[@salihk5235]

Great one, was waiting for this part. Thank you :)

[@Hamza__Sardar_Khan]

Hey there! Your projects are really helpful and we request you to continue making such projects for us so we can learn and prosper................

[@vatansrivastava7279]

You are just Awesome....... very very helpful tutorial

[@CodeLab98]

Glad it was helpful!

[@georgechatzis8194]

Great job with DOM manipulation series! I believe your next videos should be on a bundler like webpack!

[@cryptosfool]

very explanation. very coding style and very focused. I followed and coded and I learned. Thank you.

[@CodeLab98]

Great to hear!

[@noumbissistael1470]

Thanks very much for the tutorial

[@moncompte8407]

Love it! Thanks mate, it helped me a lot

[@CodeLab98]

No problem 👍

[@SoberMan2001]

Hi brother, please provide link to download images for project

[@saroj3483]

Can you create a simple project or a Home page with only Dom By the way love this tutorial

[@ruthkitasy2808]

This is very well explained thank you

[@vatansrivastava7279]

bro please make a detailed video on asynchronous javascript

[@web3engineer]

Excellent bro!!!! 💎

[@CodeLab98]

Thank you so much 😊

[@mehedihasan-tm4cs]

I faced a problem on project 5; after deleting all task i added cant add new task;

[@PIYUSH-lz1zq]

sir , can u make videos to make nested comment section and folder structure using JS

[@JEDIXXXX1]

Thank you so much for this brillant tutorial. The link to the source code of P2 is not working. Can you provide it in some way? THANKS!!!

[@CodeLab98]

Updated

[@olegkravchenko9655]

Great content, thanks! Is there a link to the images used in projects?

[@adityatomar9548]

thank you for both the videos :)

[@CodeLab98]

Glad you like them!

[@poetpenton4392]

Gtting this error @ 1:57 (main.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'toggle') at HTMLDivElement. (main.js:6:24))

[@AdarshNarayanan]

I am getting the same error, were you able to solve this one?

[@tech_hashes]

I’ve been struggling with DOM for long, this tutorial bailed me out, great job. But could you please check the link to the source code, the GitHub link, it’s giving 404 Error, I’m stuck at the stop watch project and I don’t know what to do, so wanted to compare the source code to see what is really wrong, would be helpful if you get this fixed, thank you

[@CodeLab98]

All sorted, check again. :)

[@mustasinbillah-u7d]

thank you for this video. I love your js code writing style.

[@CodeLab98]

Thanks for watching!

[@Arjun-oq1jz]

how to arrange the newly added task to the top of the list ( project-5)

[@outtaname311]

Great video on explaining the concepts as well as making these projects, and I've been learning so much from your videos! There is one problem i have which is when adding content to webpage, the heading will start to be pushed further up (e.g project 3 & 5). Like in the last project, this means that I can't add enter any task since the input field is hidden. Can you suggest a solution for me?

[@figmawithrazib]

your coding is soo great.... plz make video in react js