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....
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.
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.
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:01 Learn JavaScript DOM manipulation for beginners. 01:49 JavaScript DOM Manipulation is crucial for web interactivity. 05:19 Select HTML elements by ID and class name 07:14 Different methods for selecting elements in JavaScript DOM 10:55 Different ways to select DOM elements for manipulation 12:51 Manipulating CSS properties in JavaScript 16:51 Adding and modifying elements in DOM using JavaScript 18:36 Different ways to include text or modify text in HTML 22:14 Manipulating DOM attributes and classes in JavaScript 23:56 Modifying attributes and classes in the DOM 27:14 Understanding the hierarchy and relationships of DOM nodes is crucial for JavaScript and HTML manipulation. 28:57 Understanding parent, children, and siblings relationships in the DOM hierarchy. 32:07 Understanding the distinction between nodes and elements in the DOM tree. 33:41 Styling first child element in DOM 37:11 Learned about traversing the DOM and event listeners. 38:52 Creating events using HTML attributes or JavaScript 42:19 Using event listeners to trigger actions based on user interaction. 44:19 Event listeners in JavaScript DOM manipulation 47:41 Adding event listener for click events and manipulating DOM elements. 49:18 Creating basic reveal functionality using event listeners 52:17 Adding event listeners directly after elements saves code and improves scrolling efficiency 53:42 Understanding the event flow and event object in DOM manipulation 56:53 Stopping event propagation in JavaScript DOM manipulation 58:28 Understanding default behavior and prevent default method on elements/events 1:01:44 Adding event listener for click event 1:03:33 Implementing event delegation can allow for achieving the same result with less code 1:07:21 Event delegation in JavaScript DOM 1:09:05 Demonstrating the process of dynamically adding a new list item in the DOM using JavaScript 1:12:28 Setting up the project structure and including necessary files 1:14:15 Setting up the main section for the quote generator project. 1:18:08 Styling the container, heading, and main content with various properties 1:20:13 Styling the quote content and person 1:24:46 Setting up JavaScript variables and arrays 1:26:58 Adding event listener to button for generating new quotes. 1:30:18 Creating a modal with DOM manipulation and CSS styling. 1:32:02 Add styling to display background image and position button in project two 1:35:59 Styling the modal box with background color, size, position, and text 1:38:06 Styling text and animation using display flex and keyframes 1:42:27 Implementing event listeners for open and close buttons 1:44:21 Adding event listener to close modal when clicked outside 1:48:01 Creating an FAQ accordion using JavaScript DOM manipulation. 1:49:46 Styling the markup with background image, flexbox, and accordion styles 1:53:55 Hiding content with css properties 1:55:52 Adding event listener for click events on content containers 1:59:40 Creating a cool stopwatch with play, pause, and reset buttons. 2:01:30 Creating HTML markup for a timer and buttons 2:05:41 Styling buttons and adding functionality to stopwatch 2:07:49 Creating a stopwatch function to increment seconds, minutes, and hours. 2:11:15 Creating variables to add leading zero to seconds, minutes, and hours 2:13:14 Ensuring leading zeros display when required 2:16:50 Implementing functionality to pause the timer 2:18:33 Adding event listener to reset button and resetting timer values to zero 2:21:46 Setting up the markup for a to-do list using various DOM manipulation methods. 2:23:18 Styling the layout and content with flexbox and other styling properties. 2:27:03 Creating variables and event listeners for adding tasks 2:29:05 Inserting list item and adding functionality for check and delete buttons. 2:33:01 Adding tasks to the list and applying styling 2:34:44 Styling elements with box shadow, padding, margins, and flexbox properties 2:39:32 Deleting tasks from the to-do list 00:00 JavaScript DOM manipulation basics
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.
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.
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 !
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.
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.
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.
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!
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
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!!
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
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.
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😊
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 :)
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
not sure how long i had this video in my playlist but it was nice to finally finish it, with a few tweeks of your code i was able to create the project successfully, not sure why, example, i had to use previousSibling for the line-through to work in ToDo List project, for the timer i used innerText, innerHTML didn't modify correctly, overall i really enjoyed the course,
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 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...
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
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.
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 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.
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 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 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.
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
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.
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 the bridge I needed from learning the algorithms and loops to actually being useful for making pages
Thanks for this amazing channel, every video helped me alot
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.
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.
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?
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:01 Learn JavaScript DOM manipulation for beginners.
01:49 JavaScript DOM Manipulation is crucial for web interactivity.
05:19 Select HTML elements by ID and class name
07:14 Different methods for selecting elements in JavaScript DOM
10:55 Different ways to select DOM elements for manipulation
12:51 Manipulating CSS properties in JavaScript
16:51 Adding and modifying elements in DOM using JavaScript
18:36 Different ways to include text or modify text in HTML
22:14 Manipulating DOM attributes and classes in JavaScript
23:56 Modifying attributes and classes in the DOM
27:14 Understanding the hierarchy and relationships of DOM nodes is crucial for JavaScript and HTML manipulation.
28:57 Understanding parent, children, and siblings relationships in the DOM hierarchy.
32:07 Understanding the distinction between nodes and elements in the DOM tree.
33:41 Styling first child element in DOM
37:11 Learned about traversing the DOM and event listeners.
38:52 Creating events using HTML attributes or JavaScript
42:19 Using event listeners to trigger actions based on user interaction.
44:19 Event listeners in JavaScript DOM manipulation
47:41 Adding event listener for click events and manipulating DOM elements.
49:18 Creating basic reveal functionality using event listeners
52:17 Adding event listeners directly after elements saves code and improves scrolling efficiency
53:42 Understanding the event flow and event object in DOM manipulation
56:53 Stopping event propagation in JavaScript DOM manipulation
58:28 Understanding default behavior and prevent default method on elements/events
1:01:44 Adding event listener for click event
1:03:33 Implementing event delegation can allow for achieving the same result with less code
1:07:21 Event delegation in JavaScript DOM
1:09:05 Demonstrating the process of dynamically adding a new list item in the DOM using JavaScript
1:12:28 Setting up the project structure and including necessary files
1:14:15 Setting up the main section for the quote generator project.
1:18:08 Styling the container, heading, and main content with various properties
1:20:13 Styling the quote content and person
1:24:46 Setting up JavaScript variables and arrays
1:26:58 Adding event listener to button for generating new quotes.
1:30:18 Creating a modal with DOM manipulation and CSS styling.
1:32:02 Add styling to display background image and position button in project two
1:35:59 Styling the modal box with background color, size, position, and text
1:38:06 Styling text and animation using display flex and keyframes
1:42:27 Implementing event listeners for open and close buttons
1:44:21 Adding event listener to close modal when clicked outside
1:48:01 Creating an FAQ accordion using JavaScript DOM manipulation.
1:49:46 Styling the markup with background image, flexbox, and accordion styles
1:53:55 Hiding content with css properties
1:55:52 Adding event listener for click events on content containers
1:59:40 Creating a cool stopwatch with play, pause, and reset buttons.
2:01:30 Creating HTML markup for a timer and buttons
2:05:41 Styling buttons and adding functionality to stopwatch
2:07:49 Creating a stopwatch function to increment seconds, minutes, and hours.
2:11:15 Creating variables to add leading zero to seconds, minutes, and hours
2:13:14 Ensuring leading zeros display when required
2:16:50 Implementing functionality to pause the timer
2:18:33 Adding event listener to reset button and resetting timer values to zero
2:21:46 Setting up the markup for a to-do list using various DOM manipulation methods.
2:23:18 Styling the layout and content with flexbox and other styling properties.
2:27:03 Creating variables and event listeners for adding tasks
2:29:05 Inserting list item and adding functionality for check and delete buttons.
2:33:01 Adding tasks to the list and applying styling
2:34:44 Styling elements with box shadow, padding, margins, and flexbox properties
2:39:32 Deleting tasks from the to-do list
00:00 JavaScript DOM manipulation basics
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.
The DOM World is more than a few videos tutorial, therefore this topics deserve one of thouse extralarge one. Thanks ones again.
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.
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
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.
No offtopic things, just the things we wanted know, appreciate your content
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.
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.
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!
¡Gracias!
flabbergasting tutorial about the DOM! put it into practive with a couple of differents projects and you won't ever forget it!
IT WORKED, THANKS I'VE BEEN LOOKING FOR THIS FOREVER, BUT NO TUTORIAL COULD EXPLAIN IT AS YOU DID
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
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!!
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
You give me awesome practise, without you, I wouldn't step out of the comfort zone!!
Wonderful tutorial. Very well taught, and no one can match my happiness when I was able to make the master project myself lol. Thankyou
I love it when freecodecamp post JavaScripts content
This goes straight into my playlist.. 👍
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
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
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
This is awesome! Even made written notes for practice and so that the learning sticks. That's the best way to learn. ❤
This guy is the best teacher on the net
Thank y'all FreeCodeCamp and CodeLab both are priceless
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 :)
one of the best beginner friendly course to learn DOM manipulation 😀
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
One of the amazing DOM Manipulation Lectures and projects I got here :)
Your timing is so good
Thanks!
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.
not sure how long i had this video in my playlist but it was nice to finally finish it, with a few tweeks of your code i was able to create the project successfully, not sure why, example, i had to use previousSibling for the line-through to work in ToDo List project, for the timer i used innerText, innerHTML didn't modify correctly, overall i really enjoyed the course,
Great, loved it, learned from it, can't ask for much more. Thanks!
finally a course which covers the fundamentals of dom manipulation and event handling
Love this tutorial.
Thanks for sharing.
Love from Afghanistan.
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.
Very detailed and structured course
It's was the best video for JavaScript dom elements
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 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 what I was looking for,thanks for the great job you're doing ⚛️🤝
Thank you so much for all the content. I love this channel and admire all the knowledge you share with people.
quincy larson has a vision of democratizing developer skills and he certainly is in war mode. Great content! ❤
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!
Great course, worth spending your time on it. Kudos
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...
Woah, great video mate!
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?
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 so much for this excellent course, you guys are awesome. love you!
Very good initiative by free code camp.
This is called Perfection 😌
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.
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.
Simply the Best!!
I learning DOB based-XSS Good content.
I love to break code. 👊
It's the best lesson about DOM :)
Another awesome video, Derek Muller 😎 🤙
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
Perfect Timing!
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?
such an awesomeeee tutorial!!! thankyou thankyou loads and tons for this
I'm Learning so much, you're great people.
I love this very much thanks to put this course at correct time lots of love to you♥️♥️♥️♥️♥️
Truly speaking: this is an awesome tutorial sir, too good, loved it❤
You are such a great teacher. Keep up the great work you do! This content was very helpful
.
i love heytchtml all due respect to this man!!!
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.
the course was well structured, learnt quiet al lot
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
So thankful for this
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 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.
Much Thanks. DOM Manipulation is intersting and fun.
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.
Amazing guidance
Now I am finally understand how to build a todolist.
i waiting for this courses, thx
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
Thank you so much! Learned so much I did. This is gonna very important knowledge onwards.
Nice video I really enjoyed it thank u sir❤
Very decent video, @CodeLab smashed it. Thank you @50.29 you put Event probagation, should be propagation
Thank you for the projects on DOM manipulation.
Thanks a lot for this. I managed to get a good grasp and deeper insight compared to a crash course.
Very great tutorial, learning a lot 🙏🏻