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....
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.
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
You can also do it like this: deleteBtn.addEventListener('click', function(e) { let taskDiv = e.target.closest('.task'); if (taskDiv) { taskDiv.remove(); } }); This ensures that you are targeting the nearest .task div regardless of whether the click originated from the button or the icon inside the button.
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.
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.
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
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😂
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.
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 !
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
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!
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
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😊
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'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.
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.
This Was THE BEST js DOM tutorial Anyways, for peeps stuck on 49:00 This you can use this too instead- const revealButton = document.querySelector(".button"); const content = document.querySelector(".content"); revealButton.addEventListener('click', function revealContent(){
}); Although it dosent give the exact same results, its a way. btw if anybody can help me to improve or tell me the cons of my code pls feel free to do so.
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 :)
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
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!!
I also changed the deleteButton.EventListener in Project 5 to deleteButton.addEventListener('click', function(e){ let taskToDelete = e.target.closest('.task'); taskToDelete.remove(); }); this allows you to delete the task either you click deleteButton button or the trash can. By using the closest() method, you can traverse up the DOM tree to find the nearest ancestor with the class task, which represents the task container. In the original version, if you click on the button out of the trash can icon, it deletes the whole task-container div
For the Event listener example section, if you are having any trouble understanding through the css, we can directly achieve the same functionality without modifying css as follows
const revealBtn = document.querySelector('.reveal-btn'); const hiddenContent = document.querySelector('.hidden-content'); let isHidden = true; // Initially, content is hidden function toggleContentVisibility() { if (isHidden) { hiddenContent.style.display = 'block'; // Show the content } else { hiddenContent.style.display = 'none'; // Hide the content } isHidden = !isHidden; // Toggle the state } revealBtn.addEventListener('click', toggleContentVisibility);
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.
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 .
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.
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
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 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 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.
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?
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...
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 ........
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.
Thanks for the great tutorial. Project 5 had a weird bug for me, it would not remove one of the parent divs properly if I added more than one task. Also, not sure why you went twice up in hierarchy, I suppose our code differs a bit Changed your code to the below and it works fine: deleteButton.addEventListener('click', function(){ deleteButton.parentElement.remove(); });
Actually I think yours is the right one, because he goes up 2 level so he removes the entire div with all tasks inside if I understand correctly. Me too didn't understand why i did 2 times parentNode
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 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....
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 the bridge I needed from learning the algorithms and loops to actually being useful for making pages
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.
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
You can also do it like this:
deleteBtn.addEventListener('click', function(e) {
let taskDiv = e.target.closest('.task');
if (taskDiv) {
taskDiv.remove();
}
});
This ensures that you are targeting the nearest .task div regardless of whether the click originated from the button or the icon inside the button.
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.
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?
Learn the basics and this is one of the most important concepts
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.
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
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
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.
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.
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 !
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?
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
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!
The DOM World is more than a few videos tutorial, therefore this topics deserve one of thouse extralarge one. Thanks ones again.
No offtopic things, just the things we wanted know, appreciate your content
flabbergasting tutorial about the DOM! put it into practive with a couple of differents projects and you won't ever forget it!
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
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
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'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
IT WORKED, THANKS I'VE BEEN LOOKING FOR THIS FOREVER, BUT NO TUTORIAL COULD EXPLAIN IT AS YOU DID
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.
This Was THE BEST js DOM tutorial
Anyways, for peeps stuck on 49:00 This you can use this too instead-
const revealButton = document.querySelector(".button");
const content = document.querySelector(".content");
revealButton.addEventListener('click', function revealContent(){
if ( content.style.display == "block") {
content.style.display = "none";
revealButton.style.width = "400px";
}
else{
content.style.display = "block";
revealButton.style.width = "100px";
}
});
Although it dosent give the exact same results, its a way.
btw if anybody can help me to improve or tell me the cons of my code pls feel free to do so.
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 :)
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
Watched multiple videos on youtube, but this is the most detailed and clearly explained. Thank you!
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!!
one of the best beginner friendly course to learn DOM manipulation 😀
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
I love it when freecodecamp post JavaScripts content
I also changed the deleteButton.EventListener in Project 5 to deleteButton.addEventListener('click', function(e){
let taskToDelete = e.target.closest('.task');
taskToDelete.remove();
});
this allows you to delete the task either you click deleteButton button or the trash can. By using the closest() method, you can traverse up the DOM tree to find the nearest ancestor with the class task, which represents the task container. In the original version, if you click on the button out of the trash can icon, it deletes the whole task-container div
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
finally a course which covers the fundamentals of dom manipulation and event handling
This guy is the best teacher on the net
You give me awesome practise, without you, I wouldn't step out of the comfort zone!!
For the Event listener example section, if you are having any trouble understanding through the css, we can directly achieve the same functionality without modifying css as follows
const revealBtn = document.querySelector('.reveal-btn');
const hiddenContent = document.querySelector('.hidden-content');
let isHidden = true; // Initially, content is hidden
function toggleContentVisibility() {
if (isHidden) {
hiddenContent.style.display = 'block'; // Show the content
} else {
hiddenContent.style.display = 'none'; // Hide the content
}
isHidden = !isHidden; // Toggle the state
}
revealBtn.addEventListener('click', toggleContentVisibility);
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.
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?
Thanks for this amazing channel, every video helped me alot
This is awesome! Even made written notes for practice and so that the learning sticks. That's the best way to learn. ❤
quincy larson has a vision of democratizing developer skills and he certainly is in war mode. Great content! ❤
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
thank you for the video! Your explanation is simple and clear, I enjoyed following you in part two, helps a lot with memorizing things!
One of the amazing DOM Manipulation Lectures and projects I got here :)
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
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.
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
const letslearn = document.queryselectorAll(‘.btn’);
letslearn.removeattributes(‘Get’,f*ckd’);
console.log(‘letslearn’);
//prints this is great!
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
Great, loved it, learned from it, can't ask for much more. Thanks!
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.
This goes straight into my playlist.. 👍
Love this tutorial.
Thanks for sharing.
Love from Afghanistan.
Your timing is so good
Very detailed and structured course
It's was the best video for JavaScript dom elements
i love heytchtml all due respect to this man!!!
the program works without any bugs
If you want you can use the following style :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #353b48;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-top: 40px;
}
.container {
text-align: center;
color: white;
border: solid white 4px;
width: 40%;
border-radius: 1rem;
margin: 0 auto;
}
.container h1 {
margin-top: 10px;
}
ul {
list-style: none;
padding-right: 40px;
margin-bottom: 20px;
color: black;
margin-top: 20px;
}
li {
font-size: 20px;
border: 1px solid black;
padding: 10px;
margin-left: 30px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
man, you are a god, thank you
This is awesome, Thanks!!!
Thank y'all FreeCodeCamp and CodeLab both are priceless
@14:40. Snake case doesn't use dashes. It uses underscores.
Dashes would infer kebab casing.
cam on chi vi vi deo huu ich va thiet thuc, da giup em them duoc bai hoc moi chuc chi chuc khoe thanh cong
thank you so much for this excellent course, you guys are awesome. love you!
I'm Learning so much, you're great people.
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.
This is called Perfection 😌
Now I am finally understand how to build a todolist.
Great course, worth spending your time on it. Kudos
the course was well structured, learnt quiet al lot
I love this very much thanks to put this course at correct time lots of love to you♥️♥️♥️♥️♥️
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?
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...
It's the best lesson about DOM :)
I learning DOB based-XSS Good content.
I love to break code. 👊
Very good initiative by free code camp.
Perfect Timing!
Providing code also helps a lot although it was a very good lecture. My concern is as we are practicing javascript we need html code to practice....
Much Thanks. DOM Manipulation is intersting and fun.
I wish MDN had video explanations of stuff like this in the docs.
such an awesomeeee tutorial!!! thankyou thankyou loads and tons for this
This is what I was looking for,thanks for the great job you're doing ⚛️🤝
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 ........
Thank you so much for all the content. I love this channel and admire all the knowledge you share with people.
Amazing guidance
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!
Masterclass of a cours! Kudos🙌
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.
In project 4, you can create values padded with zeros much quicker like this:
String(number).padStart(2, '0')
Can you throw more light on this?
Thank you for the projects on DOM manipulation.
So thankful for this
Thanks for the great tutorial. Project 5 had a weird bug for me, it would not remove one of the parent divs properly if I added more than one task. Also, not sure why you went twice up in hierarchy, I suppose our code differs a bit
Changed your code to the below and it works fine:
deleteButton.addEventListener('click', function(){
deleteButton.parentElement.remove();
});
Actually I think yours is the right one, because he goes up 2 level so he removes the entire div with all tasks inside if I understand correctly. Me too didn't understand why i did 2 times parentNode
hare krishna
thanku so much 😇😇krishna blesses every contributor on this channel 😇😇
This video is so helpful, thank you very much
Thanks a lot for this. I managed to get a good grasp and deeper insight compared to a crash course.