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

Get 20% discount on Hostinger with my code:

*COMMUNITY NOTE*

Following a recent poll, it was a resounding YES (100%) vote to allow other creators to make videos for consistent uploads and to help grow this channel and community.

So with that in mind i would ask if you are a content creator or know of content creators who are interested in making educational content (predominantly front end videos for the time being) please reach out to me through my email. Additionally, I am also offering each content creator who sends videos 30% of revenue generated for that video from YouTube ads.

A few things to note regarding the videos

- Between 10-30 minutes in length.
- Use a good microphone.
- If you are showing code on screen, make it as large as possible.
- Make sure the video resolution is 1080p (720 at the absolute minimum).
- No background music.
- Must be in real voice. You should not use a computer generated voice or use music without dialog.
- If showing face, please have high visual camera.

Look forward to seeing the videos.

Hostinger Deal!! Use code below to get 20% discount! on a whole host of web hosting services!

Hey there guys!

Welcome to the Part 2/2 Master DOM Manipulation..in this video we will be using everything we learnt in part 1 and creating FIVE DOM projects. Ranging from BEGINNER to MASTER level...I hope you enjoy. 🙂

Source code:

------------------
Follow me on Social Media

Microphone I Use

PC Specs

------------------
TIMESTAMPS

00:00 - Introduction
00:13 – Subscribe
00:20 – Prerequisites

00:53 – Project 1: Beginner
03:27 – Project 1 Mark-Up
05:32 – General Styles for All Projects
06:09 –Project 1 CSS Styling
13:41 – Project 1 JavaScript

18:40 – Project 2: Beginner +
19:42 – Project 2 Mark Up
21:34 – Project 2 CSS styling
30:31 – Project 2 JavaScript
35:09 – Project 2 CSS Styling p2

36:54 – Project 3: Intermediate
37:40 – Project 3 Mark Up
39:00 – Project 3 CSS Styling
44:20 – Project 3 JavaScript
47:03 – Project 3 CSS Styling p2

49:46 - Project 4: Pro
50:27 – Project 4 Mark Up
51:45 – Project 4 CSS Styling
55:37 – Project 4 JavaScript

1:09:38 - Project 5: Master
1:11:02 – Project 5 Mark Up
1:12:16 – Project 5 CSS Styling
1:15:40 - Project 5 JavaScript
1:22:53 – Project 5 CSS Styling p2
1:27:42 – Project 5 JavaScript p2
------------------

------------------
Learn with Code Lab! easy to understand tutorials :-)

DISCLAIMERS:

[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')) {

}
if (target.matches('i')) {

}
});

[ZedMastery]

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

[Khamzat_]

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

[cjaims]

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

[kit-kat]

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.

[mustasinbillah-ud]

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

[douglascounts]

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;
}

[betanpc]

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!!!

[salihk]

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

[cryptosfool]

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

[vatansrivastava]

You are just very very helpful tutorial

[georgechatzis]

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

[moncompte]

Love it! Thanks mate, it helped me a lot

[sudhirkumarsingh]

Brother, you explained it so well. Could you please make videos on React.js projects?

[vatansrivastava]

bro please make a detailed video on asynchronous javascript

[figmawithrazib]

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

[saroj]

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

[poetpenton]

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

[mehedihasan-tmcs]

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

[SoberMan]

Hi brother, please provide link to download images for project