Javascript Dom Manipulation | Javascript Tutorial For Beginners
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- Check out my courses and become more creative!
developedbyed.com
Javascript Dom Manipulation | Javascript Tutorial For Beginners
In this video series we are going to learn modern javascript from scratch. This video is recommended for anyone wanting to learn javascript the modern way with ES2015. No previous programming knowledge is required, so this video series will help you learn javascript as your first programming language.
In this final video we are going to take everything we learning is this beginner javascript series so far and we are going to use our knowledge to add a bit of movement to our html page.
Things covered in this video:
How to grab elements from our HTML.
How to add classes in javascript.
Create a todo list type app in vanilla javascript.
📔 Materials used in this video:
VSCode: code.visualstu...
🛴 Follow me on:
Twitter: / deved94
Github: github.com/Dev...
![CAMPปลิ้น | EP.82[1/2] แก๊ง 3 สาวเพื่อนซี้บุก CAMPปลิ้นครั้งนี้ห้ามเสียอาการ](http://i.ytimg.com/vi/_6WUjXHe1TM/mqdefault.jpg)
Thank you everybody! Hopefully I covered some of the basics for you well enough!
I will strive to do better on my next series for sure!
Exciting things are on the way!
I enjoyed this series a lot, please make more content like this but maybe do other frameworks (react) or libraries(bootstrap)! Thanks!
Super duper helpful sir Ed! All are clear. Hope you make more video tuts. Thanks a lot!
Sir i am waiting for more indepth videos
I should say thanks to you for covering essential concept in less time
Ok, your explain is very goooooooooooooooooooooooooooood...
Man, I've been searching a long time now for someone to explain with CLARITY. This was EXACTLY what I was looking for. I'm so excited I've FINALLY got the FOUNDATION to javascript. Looking forward to those projects. The Best! Keep doing what you doing. Your approach is right, Dev Ed!
Yeah this guy rocks
You're so good! You've made JS so easy and fun to learn!
Very helpful but Woo! gets confusing towards the end. Tho, you are a great teacher!
Yeah, he kind of rushed the end but the other parts were ok.
This man deserves a beer. Finally got the hang of it! Thanks :)
I give up after 4 minutes. You are bad at explaining things.
- You did not demonstrate what “transform” does - but you demonstrated “color” and “background-color”.
- You said “style.background-color” doesn’t work and “the only thing you need to do” is to capitalize the second word - but that’s *NOT* the only thing. You also need to delete the “-“. 🤦🏻♂️
With that lack of attention to detail, I am certain I will be better off watching one of the 50 other videos teaching this stuff.
I wasted 4 minutes of my life on this content - plus another 3 minutes to vent in the comments here. It could have been worse and I could have watched the whole video. I’m glad I didn’t - but still annoyed by the first 4 minutes - especially the way you just glossed over “transform” - but felt the need to show us how the “color” property works… 🙄
Oh you are so cute! Helping me learn JS much quicker!!
You are cute too
@@spike2565 this is comment section not your whatsapp group
@@johncena-li1bl man. he is literally commenting.
Ed your energy and ability to explain JS simply is beyond anything I have found on YT so far! Thank you for this amazing content!
Great series. Love the way you tie it all together with "..and this is how you use it." examples. I have been studying for a few months but this is the first time i understand how it all works. Well played, Ed for the Win.
Last part adding new lines didn't worked for me.. I have tripple checked my code, but can't find anything different to your code.
Uncaught TypeError: itemList.appendChild is not a function
at HTMLButtonElement. (app.js:18)
(anonymous) @ app.js:18 plz correct this one
already knowing python and c++ i was able to breeze this whole series in like an hour (since a lot of the things you perfectly explained were review of course (just a little new syntax only) and by far, you are better than any professor i have had. I am learning front end development on the side so that i can gett an internship soon so that when i graduate cs next year, i can actually go into a roll where i want to be all my life! Thank you for everything and i look forward to reviewing your other tutorials and playlists!
why classlist.add does not work
7:22 next tutorial: how can you land ur mouse on the button so fast?
aimbot duh
text.classList.add("change); return an error saying app.js:4 Uncaught TypeError: Cannot read property 'classList' of null
at app.js:4
(anonymous) @ app.js:4
trying to learn in quarantine.. i am facing the same problem
@@niskarshaghimire2176 add. => above =>
Useful Course Developedbyed
sir this is not working in windows 7 but why
Thank you very very much bro this helped me a "LOT" cause very confuse about Dom manipulation that's why I can create any dom manipulation this helps me to answer the question in my mind. I hope you may upload more videos bro.
Hey Ed Thanks for these Tutorial. I was following the tutorial, but I am getting an error "userlist.appendChild is not a function" Below is my js code.
const userlist = document.querySelectorAll('.userList');
const listInput = document.querySelector('.list-input');
const addList = document.querySelector('.addListBtn');
//get value from inputs
addList.addEventListener('click', function(){
//create Li
const newLi = document.createElement('LI');
const liContent = document.createTextNode(listInput.value);
//Add the input value inside the li
newLi.appendChild(liContent);
//Attached the li to the ul
userlist.appendChild(newLi);
});
What am I doing wrong?
Just use document.querySelector no queryAll on user list. Should work!
@@developedbyed oh god thank you i was driving crazy
@@developedbyed thank you man i was stuck on this for around 3 hr thank you for saving my day
@@developedbyed Good video! Can you please tell me the name of the vscode theme? I love
you have being my new idol
i also just see your "unhappy confession" video, but i think u r just in problem of "searching problem" (which mean u in condition of u thinking "not have a problem" is "a problem", which not good and will make u always have problem)
just want to saying u r great, so take it easy
Perfect way to learn what you really will need, this course is awesome
omg it's hard for me!!!!!!!! :(
ur voice is so soothing we feel relaxed while studying
Im trying to add an element to the li, but also apply some mouseover and mouseout events to the same list. The mouse events are not getting applied to the newly added element. Please help
const newName = document.querySelector(".my-name");
const magicButton = document.querySelector(".magic-button");
magicButton.addEventListener("click", function () {
newName.classList.add("magicCSS");
});
const userListObj = document.querySelector(".names-list");
const newUserText = document.querySelector(".add-user");
const addUserBtn = document.querySelector(".add-user-btn");
addUserBtn.addEventListener("click", function () {
const newUserLi = document.createElement("li");
const newUserVal = document.createTextNode(newUserText.value);
newUserLi.appendChild(newUserVal);
userListObj.appendChild(newUserLi);
newUserText.value = "";
});
const userList = document.querySelectorAll(".names-list li");
for (user of userList) {
user.addEventListener("mouseover", function () {
this.style.color = "red";
});
user.addEventListener("mouseout", function () {
this.style.color = "black";
});
}
Ed, thank you very much. I finished the Node.js videos and now I am here because I want to start with the front-end of the website I am building. Thank you again
Uncaught TypeError: userList.appendChild is not a function
at HTMLButtonElement.
I'm getting this error bro... 😢
No doubt you are genius. Its work. Everything is fine. But not clear. const listContent = document.createTextNode(listInput.value); What is this what is that declaration on the end ? I see its value what we put in input text but is it that way to do that? I don't know what to even ask, that .createTextNode it is not clear for me.
for (name of nameList) {
name.addEventListener("click", function () {
console.log(this);
});
}
console said uncaught error name.addEventListener is not a function
how can i solve this?
Stuff went from 0-100 real fast with this video! xD
There is no way i can pay for courses on your Website Ed. I am from Nigeria and would like you to kindly create a debit card-enabled payment.
Watched the video => Like => subscribed . You have high teaching skills, thanks.
More than half of the code just doesnt want to work....
I laughed at 2:27... Who's Butt did you like to change? haha
I love your content. I started self-learning web development in May and your tutorials are very clear and fun. Please don't stop making videos.
Hahahahha. I bet nobody noticed
I am crazy in js dom tutorail problems I have understood that Developedbyed is very easy way...
Javascript Tutorial For Beginners .
nop not for beginners
Most functions don't work. I tried console log , It works though. Can you please help me?
Thanks Dev Sir; you really clreared my all concept about JS,thnaks alot sir.
Bro struggles with variable and class names. That's how you know he's legit
Best Javascript Tutorial👏👏
Idk if its just me or someone else as well. I am getting this error: 127.0.0.1/:1 Refused to apply style from '127.0.0.1:5500/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I have copied everything letter by letter in both the files by Ed. Still no idea why this would be happening. I looked around the internet and it seems to be a pathing issue. But I might also have skipped something while installing Js. Please help.
nvm figured it out. I didnt have the script attached im a fool.
The command text.style.color is not applying neither in notepad nor in visual studio code
thank you friend, it was very helpful for me :)
Why is this not working for me? I have followed along step by step?
Thank you, I really needed this!!!! You rock!!!!
Hi dev my java won't read addEventListener can you help me?
at 14:02 is there a specific reason why LI was written all uppercase? Will it not work if written in lowercase?
Hi userlist.appendChild is not function at htmlbutton element
I love how you explain everything slowly and don't leave anything out. Great!
I''ll repeat this later, a little bit dizzy hahaha
How did you make that button? My code didn’t work like that…
thank you so so much! great video and your explanation is clear and easy to understand :)
console.log('you are great');
7:58 Why no female names under the examples?! ;)
Pewdiepie if he studied computer science lol
Good video! Can you please tell me the name of the vscode theme? I love
plz someone write code of remove element plz i am trying since morning
This video was very fast. in my opinion a little bit to fast.
My program has an HTML element with class name "trial" and id name "run"
I have successfully, linked the javascript with my html document, (I tried it with printing "hello world" in the console)
if I am using the following commands, (I have not written any other commands yet, just these to test my script)
const trail = document.getElementsByClassName("trial");
console.log (trail);
//console is logging the details of our element successfully, but if I use the following commands, instead of the previous....
const label = document.getElementById("run");
console.log (label);
//console is logging "null"
Why is this happening? Why a javascript can fetch classes but not id's? Please help!
Can you give the audio name attached at beginning of video??
which vscode theme and font are you using dude ?
Umm, at 10:00 i had to add do console.log(this.textContent); because in Firefox it was showing so much stuff that made an Li element and not the value in between the html brackets.
Where the hell did Java script come from??
Wow thanks, I have looking for this for such a long time.
All I've been seeing is just people making "tutorials" whene really it was just a copy
and paste process. Thanks for the help, very much appreciated.
"Beginners"?? You meant "Intermediates"?
the text.style at 3:50 doesn't work for me for some reason :(
hit two stones with one? i thought it was hit two birds with one stone XD
anyways great video, you are to me the best teacher when it comes to this subject :)
Why you used function inside the for loop?
Hi, thanks for this video,
May I know, which theme & font family r u using in ur vscode?
I have been learning JavaScript for a while now without a proper understanding, Your videos give me hope. thanks
Hi Ed, thank you so much for making this series. If you ever find yourself in Copenhagen, Denmark I would be delighted to buy you a beer!
coding is hard af
Hey Dev Ed i have completed the last videos but I m facing the problem in this as I am not getting the output as you got .
the console says there is problem with code and it in the if loop, says that there is problem when I begin with if(user of userList)
it say you have error from of userList but I have tried the code as it is . so help with this if you can and thanks for the superb content on Javascript.
You are the best teacher in the world.
Thank you for this video!!
Can you please tell me why I get an error if I change user of userList into name of nameList or something like that???? I'm kinda stuck here.
I don't have words... Great video
..i can't do much but atleast watch full ads on your video that might help me contribute little bit 😉
It's easier to use querySelector but get getElementsByClassName maybe faster in terms of compilation ... maybe useful :)
10:46 this this didn`t worked on me
Aku pusing..
5:01, did you've said "Meu deus" ?
Hey Ed, in this for (user of userList) it is giving me an error that I need to declare 'user' with let, var or const. Any idea why this is happening?
Thank you for making javascript tutorial. Learing a lot
Dude i just love to see you doing these video's so "au natural" its so funny and i actually learn from you. Im doinmg a ucademy fullstack course and i hate it. next course im buying of you. thank you so much
7:22 idk anything but that needs talent!
Awesome videos. Made me get your course to learn more and more. Thanks a lot for the great work.
How to create a class using dom
Can I say I learned js after I get though this course
AND MORE!
What about dom manipulation before rendering or dom parsing or dom loading.
Is it possible?
bro looks like pewdiepie
Ed why do you look weird here.....
useless,unsubscribing.
Hey now, why gon do that for?
it was an amazing ride with you ser, more of the projecct based tutorial all the way
Ugh...the ending is tricky, but I'll rewatch it till it becomes natural. Great teaching, regardless!
Thanks!! Your videos are awesome! I've been learning a lot with u! Greetings from Brazil
thanks men I dont speak english but you explain very clearly
I really like this dude.
Youre the most funny guy I ever see in this youtube 😎 and also a good youtuber good teacher ❤️
what is the intro music
Still looking the link you said you were going to put in the description below for all the actions you can do with addEventListener