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 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.
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.
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
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.
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😂
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 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 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.
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.
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.
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.
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
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.
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
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.
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.
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 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 .
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?
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);
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!!
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
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
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
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.
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😊
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
im learning automation using playwright with JS and trying to learn more about all the different ways to select elements within the css. is this course going to be useful for me?
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.
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.
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 ........
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.
Great tutorial, really well explained. Thank you! Did something change in the meantime with code? The last part is not working for me in project 2. Click anywhere to close the window.
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?
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?
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 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.
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.
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.
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.
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?
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?
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
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.
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
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 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 !
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.
No offtopic things, just the things we wanted know, appreciate your content
The DOM World is more than a few videos tutorial, therefore this topics deserve one of thouse extralarge one. Thanks ones again.
flabbergasting tutorial about the DOM! put it into practive with a couple of differents projects and you won't ever forget it!
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.
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.
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.
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
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.
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
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
This guy is the best teacher on the net
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
Watched multiple videos on youtube, but this is the most detailed and clearly explained. 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
@@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.
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 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 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"
})
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?
You give me awesome practise, without you, I wouldn't step out of the comfort zone!!
finally a course which covers the fundamentals of dom manipulation and event handling
22:15 How can you give the same id for that as the main heading ?
Nice job I am starting other video .
one of the best beginner friendly course to learn DOM manipulation 😀
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);
I love it when freecodecamp post JavaScripts content
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 love this, came here from google discover tab on my pixel phone! Solid knowledge from the beginning to higher levels of event listener use
thank you for the video! Your explanation is simple and clear, I enjoyed following you in part two, helps a lot with memorizing things!
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 amazing DOM Manipulation Lectures and projects I got here :)
Great, loved it, learned from it, can't ask for much more. Thanks!
This is awesome! Even made written notes for practice and so that the learning sticks. That's the best way to learn. ❤
Thanks for this amazing channel, every video helped me alot
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
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
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
const letslearn = document.queryselectorAll(‘.btn’);
letslearn.removeattributes(‘Get’,f*ckd’);
console.log(‘letslearn’);
//prints this is great!
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 so much for this excellent course, you guys are awesome. love you!
This goes straight into my playlist.. 👍
It's was the best video for JavaScript dom elements
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.
Love this tutorial.
Thanks for sharing.
Love from Afghanistan.
Your timing is so good
I'm Learning so much, you're great people.
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
Thank y'all FreeCodeCamp and CodeLab both are priceless
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 course, worth spending your time on it. Kudos
@14:40. Snake case doesn't use dashes. It uses underscores.
Dashes would infer kebab casing.
Thank you so much for this. Does this course comes with course material we can download?
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?
Is the HTML and css code not availible from the course which you used ? Thx
im learning automation using playwright with JS and trying to learn more about all the different ways to select elements within the css. is this course going to be useful for me?
Masterclass of a cours! Kudos🙌
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.
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.
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 ........
I love this very much thanks to put this course at correct time lots of love to you♥️♥️♥️♥️♥️
Very detailed and structured course
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
the program works without any bugs
Great tutorial, really well explained. Thank you!
Did something change in the meantime with code? The last part is not working for me in project 2. Click anywhere to close the window.
such an awesomeeee tutorial!!! thankyou thankyou loads and tons for this
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!!!
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?
Perfect Timing!
Now I am finally understand how to build a todolist.
the course was well structured, learnt quiet al lot
i love heytchtml all due respect to this man!!!
This is called Perfection 😌
Thank you so much for all the content. I love this channel and admire all the knowledge you share with people.
Please share the code repository. Helpful for hands-on.
Much Thanks. DOM Manipulation is intersting and fun.
I wish MDN had video explanations of stuff like this in the docs.
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!
Good job can I please get the css styling? Because I was coding along but couldn't get the same results.
Please kindly give me the CSS styling thanks.
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....
Thank you for the projects on DOM manipulation.
Thanks for sharing I am enjoying it please can I get the source code for this tutorial. It will help me learn better
Hey, great one. Any references to the CSS codes?