This is just great. As a venezuelan who lives in a difficult country, i want to say thank you to all of you guys for making this tutorial and for helping us to grow as a developers. Cheers my friend
Imaginate que fuerza tiene el marxismo que ni se puede hablar de la palabra del communismo o socialismo sin tener miedo de la pandilla. Te deseo prosperidad y que la gente no te quite cuando vos avanzas.
I paid for a udemy “beginner” course and the guy steamrolls through not explaining what he is doing and was too hard for me to follow. This course is perfect and the tutor explains everything as he goes through it and I understood it perfectly. Top notch thanks
i enrolled into springboard which is the same instructor and i have the same issue. just watched this and learned more than what I have so far in the springboard course that i paid for....
Can't believe this was uploaded when I was in need of a good DOM course. Sometimes it really feels like some mysterious force knows everything you are thinking of😂
This....times 100. Seriously, not a lot of courses cover the DOM first. I have been struggling with JavaScript for sometime now, but with this video, it became so much clearer!
@@MrPanzerDragoon I agree....there is also an article by "Chibuike Okere" on "Free Code Camp" that basically covers this video but in writing...it is really good.
great video. There is a bug in the last project; if you click the button and not the icon inside the button all the todo list will be deleted. To solve this add the following code: deleteButton.addEventListener('click', function(e){ let target = e.target; if(target.tagName === 'I'){ target.parentElement.parentElement.remove(); }else{ target.parentElement.remove(); } In this way you know if the click is done on the button or on the font-awesome icon
In the 4th project, while adding the functionality for the stopwatch, you need to even add one more line of code in the Event listener of resetBtn so that when the timer is running and we reset it while it is paused, the pause button should go back to the play button too. resetBtn.addEventListener('click', function(){ window.clearInterval(timerInterval); seconds = 0; minutes = 0; hours = 0; document.getElementById('timer').innerHTML = "00:00:00"; document.getElementById('startStopBtn').innerHTML = ``; }); In the end, I just want to thank you for explaining the course so well and literally helping me get better at it and sharper too. Thank you so much.
Thanks for this video. Though theory is something I find boring so I started with the Project part directly, I really appreciate the hard work you put for this. One small add-up, in Project 4 ending when we click the reset button, the pause button was still there but it should turn to play. So, all we need inside the reset event listener, we'll change the timerStatus to stopped and change the icon for StartStopBtn to play like we did in else statement.
One of the best tutorials I have encountered that teaches you how to manipulate the DOM. This is a must-watch video! Thank you for this incredibly informational and detailed video!
came here as a break from JS basics. Motivated to code, just not motivated to do highly abstract coding. I was both surprised and sad to learn that DOM manipulation isn't part of any of the certified courses.
I was looking exactly for this, was getting into javascript and this video did helped a lot, the best thing was the css styling, so I kinda revised there too as I am just starting my web dev journey. Thanks a lot !
Thanks! I was so lost on DOM manipulation as a self learner I really appreciate this video. Also it makes it funny that the captions sometimes changes DOM to 'dumb' which made me laugh 'if you want to know more about dumb events go to...' amazing tutorial (havent finished it yet but I've learned so much in the first hour.
00:00 Learn JavaScript DOM manipulation to modify website elements. 05:01 Different ways to select HTML elements in JavaScript 15:22 Learn how to loop through and style elements using JavaScript 20:39 Learn how to modify and manipulate element attributes and classes in JavaScript 00:09 Understanding the difference between nodes and elements in the DOM 35:00 Learn about traversing the DOM and sibling nodes 45:00 Learn how to create a reveal effect using event listeners in JavaScript 49:45 Learn about event propagation in JavaScript 58:27 Learn about prevent default method and event delegation 1:03:20 Using event delegation improves code quality and performance. 1:13:28 Creating a quote generator project with HTML, CSS, and JavaScript. 1:19:02 Styling a quote box with a button 1:30:31 Creating a modal with DOM manipulation and styling 01:03 Styling and animating a modal container 1:47:27 Create an accordion to display frequently asked questions. 1:52:55 Create an accordion with JavaScript and CSS 2:04:02 Styling buttons and creating stopwatch functionality 2:09:48 Creating a stopwatch with leading zeros 2:20:00 Create a stopwatch and to-do list using JavaScript 2:24:31 Styling and adding functionality to a to-do list 2:35:38 Fully functional to-do list created using DOM manipulation Crafted by Merlin AI.
This video is fantastic, I spent so much time trying to figure out the DOM and what it does. This video course is very complete, covers a lot of material and I am happy to say that I actually understand the narrator in the video. Great job and Thank you for a great video course!!
learned html,css and taked a look at the js basic, then stopped and learned c++ for school... came back to js an watched this video, learned a lot dude
You should recreate the CSS to improve your skills and familiarize yourself with the arrangement of elements when you see the website for the first time😊
it's really interesting and informative. it helped me a lot but it would have been better if you had shown the CSS code so we could replicate the style changes as we were testing the queries.
const ul=document.querySelector('ul'); const li=document.createElement('li'); ul.append(li); li.innerText='X-Men'; li.setAttribute('id', 'main-heading'); Can you tell, why setAttribute not working for me
This is just brilliant! I understood everything clearly and I liked that you also explain the concept not just only the code and how it works. Thank you so much
This is a great course, well paced, good structure, great flow of concepts, just wow!, great work and thank you. Just had to check your channel to smash the subscribe button.
Thank you Freecodecamp what you are doing here is both wonderful and really eye opening. Thank you codelab finally i feel like i am grasping javascript.Thank you
i never explained how helpful and amazing tutorial on DOM this is and awesome channel this is..simply a best channel to learn courses for begginers as well as experts also. i will also recommend this to my class-fellows also to learn from this channel. keep giving a useful knowledge about technologies that others can't do. thanks sir good expalnation skills you have. i give a segguestion plzz explain your concepts before implementaion practically.
Been looking everywhere for a course like this. will reply to this comment with my thoughts and how much this helped me when im finished with this course :)
Very informative and helpful tutorial. However it got harder to follow along once I got to the event listeners part. I noticed that most of the styling code for the HTML and CSS files weren't revealed. Any reason for this?
Thank you for this awesome tutorial. With due respect, I beg to say that, it would have been much better if you would have also shown your CSS codes in the tutorial.
I think you can use defer atribute of script tag and move it to the top for easier readability .this atribute makes so that script tad is read after the document which is important cause you dont want to manipulate non existing tags.
Very amazing courses this channel providing and uploading..super... amazing...some practical projects in the courses can also make amazing efforts for this channel fame and papularity...
great course, great content, thank you. we just have to change the innerhtml of the star stop button to play(green) if we click directly on the reset button without pausing the color is gonna stay orange with the pause option
Thank you for a great tutorial. It is very important not just to watch but to code even if you just copy it down. I have been looking at the code in the accordion project for about 30 min, cause nothing worked. And the devil was in the details...my script link in HTM was at the top, then I put it down before and it works!
in the css, there are "transitions". I use tab w/ Emmet abbreviations. and accidentally had one of those as "transform" instead. that was the most frustrating 30 minutes of my life trying to find out what wasn't working. I dropped all the code into chatGPT and had it check for errors and it didn't find that. Sneaky.
Haha ... i too had the same problem and was getting anxious about where the heck is the problem , but yaa after putting script inside body everything was fine . And i learnt that adding script tag inside the body is the best way to run Js as it makes sure that the whole elements are loaded before running js an doesn't give errors during execution .
Great course! Can you also please include the html and css as a starter code? so that we can copy them on our local computer and learn DOM manipluation interactively?
right? why would he not include the code so that we can work alongside instead of simply watching? I was excited for this tutorial until i saw that. I will not be continuing on with this tutorial because of the lack of interactivity.
Hello Free Code Camp . This tutorial helped me a lot regarding DOM Manipulation . and yes i enjoyed this course . the 4th project was difficult for me to understand. i thought there is some predefined javascript function for creating stopwatch and we just have to show it into front-end part using dom. THANK YOU ........
In the 4th and 5th project I found one issue in each: 1) 4th project: When the stopwatch is running and you press on the "reset " button without actually pausing the watch, the counting should technically go back to zero and restart on its own without pressing the play key , so it can be achieved like this: startStopBtn.addEventListener("click", function () { if (timerStatus === "stopped") { timerInterval = window.setInterval(stopWatch, 1000); document.getElementById( "startStopBtn" ).innerHTML = ``; timerStatus = "started"; } else { window.clearInterval(timerInterval); document.getElementById( "startStopBtn" ).innerHTML = ``; timerStatus = "stopped"; } }); resetBtn.addEventListener("click", function () { window.clearInterval(timerInterval); seconds = 0; minutes = 0; hours = 0; document.getElementById("timer").innerHTML = "00:00:00";
//to cause the watch to restart without pressing the play button again👈 let a = document.querySelector("i"); if (a.id === "pause") { timerInterval = window.setInterval(stopWatch, 1000); } }); 2) 5th project: In this project when we added the delete functionality we added the event listener to the button but in the the function we are removing the parent of parent of clicked element, thinking that we will only click on the element , but that is not the case. When we click on the element inside the button , the code runs fine but when we click on the button it removes the whole task-container as the parent of parent of button is the task-container. so this ambiguity can be removed like this: addTask.addEventListener("click", function () { let task = document.createElement("div"); task.classList.add("task"); let li = document.createElement("li"); li.innerText = `${inputTask.value}`; task.appendChild(li); let checkButton = document.createElement("button"); checkButton.classList.add("checkTask"); task.appendChild(checkButton); let deleteButton = document.createElement("button"); deleteButton.classList.add("deleteTask"); task.appendChild(deleteButton); if (inputTask.value === "") { alert("please Enter a task"); } else { taskContainer.appendChild(task); } inputTask.value = ""; checkButton.addEventListener("click", function () { checkButton.parentElement.style.textDecoration = "line-through"; }); deleteButton.addEventListener("click", function (e) { let target = e.target; target.parentElement.remove(); console.log(target); }); }); Well I just removed the ".innerhtml" line from both check box button and delete button and targeted only the parent of buttons which is task and not the parent of parent of which is task-container. It can be done in a more different way keeping the icons intact.
how about the modal project? i copied all the code.. everything was perfectly fine except to window.addEventListener. if i click to any space the modal container didn't close. window.addEventListener('click', function(i) { if (i.target === modalContainer) { modalContainer.style.display = 'none'; } }); did I made a mistake or what ? help please .thanks
@@PiyushYadav-pl9jm really? Oh my. Maybe i did something wrong. But all i did was to copy the code. Why my window.obj didn't work. Anyway thanks. I'll try to google it. Or maybe do i need some extensions to install? im using vscode too.
I have solved this issue by increasing the padding of the element and leaving no padding on the box that contains it, that way there is a 90% the user will always click on the . Maybe this helps anyone with the same issue.
Will start this! 11/4/2023 11:51 16:29 21:15 - to the future me, This is important. Come back here if you get stuck on your project, like making a new div and you need to set that div into a existing style on your css in dom
What a superb evaluation of the Chris Palmer video. Please publish your follow-up results on Money Robot as well as if the backlinks are ever appearing in the Google Index. What indexer do you use for trying to obtain backlinks indexed?
![The Complete Web Development Roadmap [2024]](http://i.ytimg.com/vi/GxmfcnU3feo/mqdefault.jpg)
Thanks for watching everyone! I hope you enjoy the course and learn a lot from it!😎
This is what I was looking for and i was stuck,Thank you so much,I also subscribed your Channel.It's awesome.
Thanks for your hard work ❤️
Very good tho. I like the way you made it straight to the point!
Thank you!!!
Thank you!
This is literally the perfect tutorial for beginners, he literally just explained it to us like we're 5 year olds. I love it.
This is everything you can possibly do in Dom that you will encounter in real life.
Fucking not catching the accent 😭
I wish he would explain like if we were 4 because i can't send this to my nephew now :(
@@akashpandey1215same problem
@@Terms-and-ConditionsMaybe He identifies as a 5yo?
This is just great. As a venezuelan who lives in a difficult country, i want to say thank you to all of you guys for making this tutorial and for helping us to grow as a developers. Cheers my friend
Imaginate que fuerza tiene el marxismo que ni se puede hablar de la palabra del communismo o socialismo sin tener miedo de la pandilla.
Te deseo prosperidad y que la gente no te quite cuando vos avanzas.
It cannot be more difficult than Soviet Union before the internet era, but those guys are still among the strongest programmers of the world.
just keep it up, don't look back just look forward for the new life awaits you bro!
@@aammssaamm Yes, they are. Cheers
@@khoroshoigra8388 Thank you My friend.
I paid for a udemy “beginner” course and the guy steamrolls through not explaining what he is doing and was too hard for me to follow. This course is perfect and the tutor explains everything as he goes through it and I understood it perfectly. Top notch thanks
i enrolled into springboard which is the same instructor and i have the same issue. just watched this and learned more than what I have so far in the springboard course that i paid for....
Can't believe this was uploaded when I was in need of a good DOM course. Sometimes it really feels like some mysterious force knows everything you are thinking of😂
Saaame
same
This might be one of the top 10 courses ever offered by free code camp. This was needed so many years ago
This....times 100. Seriously, not a lot of courses cover the DOM first. I have been struggling with JavaScript for sometime now, but with this video, it became so much clearer!
@@MrPanzerDragoon I agree....there is also an article by "Chibuike Okere" on "Free Code Camp" that basically covers this video but in writing...it is really good.
This is the bridge I needed from learning the algorithms and loops to actually being useful for making pages
great video.
There is a bug in the last project; if you click the button and not the icon inside the button all the todo list will be deleted. To solve this add the following code:
deleteButton.addEventListener('click', function(e){
let target = e.target;
if(target.tagName === 'I'){
target.parentElement.parentElement.remove();
}else{
target.parentElement.remove();
}
In this way you know if the click is done on the button or on the font-awesome icon
This should be pinned
Dude your a life saver. I’m self teaching myself web development and I been stuck on this for 2 weeks until today. Thank you !!!!
ai gonna replace us find a different niche
@@hanzalamehtab I’ve read that’s not happening anytime soon
@@ksneeraj399 exactly. AI just isn’t smart enough for these kind of things
@@azureharris8647 Why won't one person write all codes to AI and the sell them this programm for big money?
In the 4th project, while adding the functionality for the stopwatch, you need to even add one more line of code in the Event listener of resetBtn so that when the timer is running and we reset it while it is paused, the pause button should go back to the play button too. resetBtn.addEventListener('click', function(){
window.clearInterval(timerInterval);
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById('timer').innerHTML = "00:00:00";
document.getElementById('startStopBtn').innerHTML = ``;
});
In the end, I just want to thank you for explaining the course so well and literally helping me get better at it and sharper too. Thank you so much.
Thanks for this video. Though theory is something I find boring so I started with the Project part directly, I really appreciate the hard work you put for this. One small add-up, in Project 4 ending when we click the reset button, the pause button was still there but it should turn to play. So, all we need inside the reset event listener, we'll change the timerStatus to stopped and change the icon for StartStopBtn to play like we did in else statement.
One of the best tutorials I have encountered that teaches you how to manipulate the DOM. This is a must-watch video! Thank you for this incredibly informational and detailed video!
Thanks, learning a lot. More fun way of interacting with JavaScript after boring time on JS basics
came here as a break from JS basics. Motivated to code, just not motivated to do highly abstract coding. I was both surprised and sad to learn that DOM manipulation isn't part of any of the certified courses.
Learn the basics and this is one of the most important concepts
The DOM World is more than a few videos tutorial, therefore this topics deserve one of thouse extralarge one. Thanks ones again.
I was looking exactly for this, was getting into javascript and this video did helped a lot, the best thing was the css styling, so I kinda revised there too as I am just starting my web dev journey. Thanks a lot !
Thanks! I was so lost on DOM manipulation as a self learner I really appreciate this video. Also it makes it funny that the captions sometimes changes DOM to 'dumb' which made me laugh 'if you want to know more about dumb events go to...' amazing tutorial (havent finished it yet but I've learned so much in the first hour.
IT WORKED, THANKS I'VE BEEN LOOKING FOR THIS FOREVER, BUT NO TUTORIAL COULD EXPLAIN IT AS YOU DID
I love the fact that you took your time to explain everything into details
00:00 Learn JavaScript DOM manipulation to modify website elements.
05:01 Different ways to select HTML elements in JavaScript
15:22 Learn how to loop through and style elements using JavaScript
20:39 Learn how to modify and manipulate element attributes and classes in JavaScript
00:09 Understanding the difference between nodes and elements in the DOM
35:00 Learn about traversing the DOM and sibling nodes
45:00 Learn how to create a reveal effect using event listeners in JavaScript
49:45 Learn about event propagation in JavaScript
58:27 Learn about prevent default method and event delegation
1:03:20 Using event delegation improves code quality and performance.
1:13:28 Creating a quote generator project with HTML, CSS, and JavaScript.
1:19:02 Styling a quote box with a button
1:30:31 Creating a modal with DOM manipulation and styling
01:03 Styling and animating a modal container
1:47:27 Create an accordion to display frequently asked questions.
1:52:55 Create an accordion with JavaScript and CSS
2:04:02 Styling buttons and creating stopwatch functionality
2:09:48 Creating a stopwatch with leading zeros
2:20:00 Create a stopwatch and to-do list using JavaScript
2:24:31 Styling and adding functionality to a to-do list
2:35:38 Fully functional to-do list created using DOM manipulation
Crafted by Merlin AI.
This video is fantastic, I spent so much time trying to figure out the DOM and what it does. This video course is very complete, covers a lot of material and I am happy to say that I actually understand the narrator in the video. Great job and Thank you for a great video course!!
learned html,css and taked a look at the js basic, then stopped and learned c++ for school... came back to js an watched this video, learned a lot dude
No offtopic things, just the things we wanted know, appreciate your content
This is perfect! Going to go through this whole thing. I think we can appreciate stuff like react so much more once we know this
Any perfect resource for React you reffered after this video & found extremely useful? Please do put it here!
@@ShrishDollin yeah pls share your own learning path. i also want to learn react after that tutorial
flabbergasting tutorial about the DOM! put it into practive with a couple of differents projects and you won't ever forget it!
Watched multiple videos on youtube, but this is the most detailed and clearly explained. Thank you!
How many people actually tried recreating the CSS just for following better😅
I applied css in all, because without css, I won't have understood the course.
You should recreate the CSS to improve your skills and familiarize yourself with the arrangement of elements when you see the website for the first time😊
I know but its kinda time consuming
I don’t know why it didn’t show that they added ccs on their own, but I had to 🙂
Can you tell the background style
it's really interesting and informative. it helped me a lot but it would have been better if you had shown the CSS code so we could replicate the style changes as we were testing the queries.
He has a point
If you can´t replicate it I suggest you learn CSS, you'll need to learn it, besides its something that should be learned before jumping in JS.
@@TheFearedTurtle mostly ppl already know CSS and yeah always is good to practice but most of us just want to practice JS and DOM
You give me awesome practise, without you, I wouldn't step out of the comfort zone!!
After finishing your tutorial. I became confident in pure javascript coding. Amazing tutorial. God bless You!🙏🙏🙏
const ul=document.querySelector('ul');
const li=document.createElement('li');
ul.append(li);
li.innerText='X-Men';
li.setAttribute('id', 'main-heading');
Can you tell, why setAttribute not working for me
i love this, came here from google discover tab on my pixel phone! Solid knowledge from the beginning to higher levels of event listener use
This is just brilliant! I understood everything clearly and I liked that you also explain the concept not just only the code and how it works. Thank you so much
This is awesome! Even made written notes for practice and so that the learning sticks. That's the best way to learn. ❤
If you have multiple elements or how do you specify which exactly? Would you include the class=“” in the name? What is the distinguishing factor?
This is a great course, well paced, good structure, great flow of concepts, just wow!, great work and thank you. Just had to check your channel to smash the subscribe button.
finally a course which covers the fundamentals of dom manipulation and event handling
quincy larson has a vision of democratizing developer skills and he certainly is in war mode. Great content! ❤
I love it when freecodecamp post JavaScripts content
This is what I was looking for,thanks for the great job you're doing ⚛️🤝
Thank you Freecodecamp what you are doing here is both wonderful and really eye opening. Thank you codelab finally i feel like i am grasping javascript.Thank you
thank you for the video! Your explanation is simple and clear, I enjoyed following you in part two, helps a lot with memorizing things!
i never explained how helpful and amazing tutorial on DOM this is and awesome channel this is..simply a best channel to learn courses for begginers as well as experts also. i will also recommend this to my class-fellows also to learn from this channel. keep giving a useful knowledge about technologies that others can't do. thanks sir good expalnation skills you have. i give a segguestion plzz explain your concepts before implementaion practically.
Been looking everywhere for a course like this.
will reply to this comment with my thoughts and how much this helped me when im finished with this course :)
Thank y'all FreeCodeCamp and CodeLab both are priceless
Thank you so much for all the content. I love this channel and admire all the knowledge you share with people.
Great course! I enjoyed it like a movie. Can come back to this tutorial anytime whenever I would need this to implement in the project. Thank you!
Thanks for this amazing channel, every video helped me alot
Very informative and helpful tutorial. However it got harder to follow along once I got to the event listeners part. I noticed that most of the styling code for the HTML and CSS files weren't revealed. Any reason for this?
Thank you for this awesome tutorial.
With due respect, I beg to say that, it would have been much better if you would have also shown your CSS codes in the tutorial.
One of the amazing DOM Manipulation Lectures and projects I got here :)
This guy is the best teacher on the net
I think you can use defer atribute of script tag and move it to the top for easier readability .this atribute makes so that script tad is read after the document which is important cause you dont want to manipulate non existing tags.
Very amazing courses this channel providing and uploading..super... amazing...some practical projects in the courses can also make amazing efforts for this channel fame and papularity...
one of the best beginner friendly course to learn DOM manipulation 😀
This goes straight into my playlist.. 👍
great course, great content, thank you. we just have to change the innerhtml of the star stop button to play(green) if we click directly on the reset button without pausing the color is gonna stay orange with the pause option
Thank you for a great tutorial. It is very important not just to watch but to code even if you just copy it down. I have been looking at the code in the accordion project for about 30 min, cause nothing worked. And the devil was in the details...my script link in HTM was at the top, then I put it down before and it works!
in the css, there are "transitions". I use tab w/ Emmet abbreviations. and accidentally had one of those as "transform" instead. that was the most frustrating 30 minutes of my life trying to find out what wasn't working. I dropped all the code into chatGPT and had it check for errors and it didn't find that. Sneaky.
Haha ... i too had the same problem and was getting anxious about where the heck is the problem , but yaa after putting script inside body everything was fine . And i learnt that adding script tag inside the body is the best way to run Js as it makes sure that the whole elements are loaded before running js an doesn't give errors during execution .
where did u get the source code?
Sir thanks, at least I got a good idea of what DOM is and now what is needed is a lot of practice to get a hold on it
Very detailed and structured course
2:20:12 copy code from line 69, 70 and paste at line 84 ------ to get play button if you click directly on Reset button while stopwatch is active.
It's the best lesson about DOM :)
Great course, worth spending your time on it. Kudos
thank you so much for this excellent course, you guys are awesome. love you!
Your timing is so good
Love this tutorial.
Thanks for sharing.
Love from Afghanistan.
You are such a great teacher. Keep up the great work you do! This content was very helpful
.
Thank you so much! Learned so much I did. This is gonna very important knowledge onwards.
This is Amazing thanks for the video. For the last project, I added a condition that unchecks the input value should in case one mistakenly checks it
Perfect Timing!
Now I am finally understand how to build a todolist.
So thankful for this
Great course! Can you also please include the html and css as a starter code? so that we can copy them on our local computer and learn DOM manipluation interactively?
right? why would he not include the code so that we can work alongside instead of simply watching? I was excited for this tutorial until i saw that. I will not be continuing on with this tutorial because of the lack of interactivity.
In the original video from codeLab he put the code in the description
I'm Learning so much, you're great people.
Truly speaking: this is an awesome tutorial sir, too good, loved it❤
Amazing guidance
I learning DOB based-XSS Good content.
I love to break code. 👊
The whole course was just amazing 😊
this was so helpful thanks to the codelab !
Thanks a lot for this. I managed to get a good grasp and deeper insight compared to a crash course.
Masterclass of a cours! Kudos🙌
Hello Free Code Camp . This tutorial helped me a lot regarding DOM Manipulation . and yes i enjoyed this course . the 4th project was difficult for me to understand. i thought there is some predefined javascript function for creating stopwatch and we just have to show it into front-end part using dom. THANK YOU ........
Another awesome video, Derek Muller 😎 🤙
Is the HTML and css code not availible from the course which you used ? Thx
such an awesomeeee tutorial!!! thankyou thankyou loads and tons for this
I love this very much thanks to put this course at correct time lots of love to you♥️♥️♥️♥️♥️
the course was well structured, learnt quiet al lot
Thank you for the projects on DOM manipulation.
Woah, great video mate!
Thanks a lot.
Is there any difference?
01:45:55
window.addEventListener('click', (e) => {
console.log('e')
if (e.target === modalCont){
modalCont.style.display = "none"
}
})
VS
modalCont.addEventListener('click', () => {
modalCont.style.display = "none"
})
Thanks you so much for this man.
I learnt alot especially from the projects🙌
And I do like your styling too 😁
Very decent video, @CodeLab smashed it. Thank you @50.29 you put Event probagation, should be propagation
In the 4th and 5th project I found one issue in each:
1) 4th project: When the stopwatch is running and you press on the "reset " button without actually pausing the watch, the counting should technically go back to zero and restart on its own without pressing the play key , so it can be achieved like this:
startStopBtn.addEventListener("click", function () {
if (timerStatus === "stopped") {
timerInterval = window.setInterval(stopWatch, 1000);
document.getElementById(
"startStopBtn"
).innerHTML = ``;
timerStatus = "started";
} else {
window.clearInterval(timerInterval);
document.getElementById(
"startStopBtn"
).innerHTML = ``;
timerStatus = "stopped";
}
});
resetBtn.addEventListener("click", function () {
window.clearInterval(timerInterval);
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById("timer").innerHTML = "00:00:00";
//to cause the watch to restart without pressing the play button again👈
let a = document.querySelector("i");
if (a.id === "pause") {
timerInterval = window.setInterval(stopWatch, 1000);
}
});
2) 5th project: In this project when we added the delete functionality we added the event listener to the button but in the the function we are removing the parent of parent of clicked element, thinking that we will only click on the element , but that is not the case. When we click on the element inside the button , the code runs fine but when we click on the button it removes the whole task-container as the parent of parent of button is the task-container.
so this ambiguity can be removed like this:
addTask.addEventListener("click", function () {
let task = document.createElement("div");
task.classList.add("task");
let li = document.createElement("li");
li.innerText = `${inputTask.value}`;
task.appendChild(li);
let checkButton = document.createElement("button");
checkButton.classList.add("checkTask");
task.appendChild(checkButton);
let deleteButton = document.createElement("button");
deleteButton.classList.add("deleteTask");
task.appendChild(deleteButton);
if (inputTask.value === "") {
alert("please Enter a task");
} else {
taskContainer.appendChild(task);
}
inputTask.value = "";
checkButton.addEventListener("click", function () {
checkButton.parentElement.style.textDecoration = "line-through";
});
deleteButton.addEventListener("click", function (e) {
let target = e.target;
target.parentElement.remove();
console.log(target);
});
});
Well I just removed the ".innerhtml" line from both check box button and delete button and targeted only the parent of buttons which is task and not the parent of parent of which is task-container. It can be done in a more different way keeping the icons intact.
how about the modal project? i copied all the code.. everything was perfectly fine except to window.addEventListener. if i click to any space the modal container didn't close.
window.addEventListener('click', function(i) {
if (i.target === modalContainer) {
modalContainer.style.display = 'none';
}
});
did I made a mistake or what ? help please .thanks
@@GEBO_888 mine worked fine when I ran the code exactly as shown maybe with a little twitching, I will share if I did change something.
@@PiyushYadav-pl9jm really? Oh my. Maybe i did something wrong. But all i did was to copy the code. Why my window.obj didn't work. Anyway thanks. I'll try to google it. Or maybe do i need some extensions to install? im using vscode too.
You are a life saver sir, I thought it was only me
I have solved this issue by increasing the padding of the element and leaving no padding on the box that contains it, that way there is a 90% the user will always click on the . Maybe this helps anyone with the same issue.
Much Thanks. DOM Manipulation is intersting and fun.
Very good initiative by free code camp.
I wish MDN had video explanations of stuff like this in the docs.
Will start this!
11/4/2023
11:51
16:29
21:15 - to the future me, This is important. Come back here if you get stuck on your project, like making a new div and you need to set that div into a existing style on your css in dom
Saved. Thanks.
i love heytchtml all due respect to this man!!!
This is called Perfection 😌
What a superb evaluation of the Chris Palmer video. Please publish your follow-up results on Money Robot as well as if the backlinks are ever appearing in the Google Index. What indexer do you use for trying to obtain backlinks indexed?
i waiting for this courses, thx