I thought the length was great, as someone just starting out with a very brief knowledge of HTML CSS JS i found the explanations really useful. Thank you.
yo, man. Loved your tutorial. Spend last 20 minutes looking for it, as almost all others are so boring and tasteless. I have remembered that I watched you couple of months ago and tried so many things to find this vid. Thanks for such an addictive content!
Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. danilgamingacc@gmail.com
I am just love this video . Your are just awesome. Specially I like your video because you explain everything so clearly so I don't have to copy I can just remember and do my own. It's really help me to learn.
Thank you for another great tutorial, finally, JS is starting to make sense! I like your videos as they are bite-sized and they don't take up 3-4 hours like some tutorials. Another idea of progressing this further would be to change the placeholder to a label above on click for accessibility :)
Hi friend, how can we do to change this body tag ??? and change the style of another block for example ??? I want to know how we can use this script in the other medium than the body. for example I create a class and I apply this script to this class. but also I would like to know if we get to the end of these tests is what form must submit without submit button ????
Can we use this in a section ? U have used it in a complete body but I want to use it in section . When somebody will scroll down then they should be able to use it. I tried but it’s not happening. The problem is : when u checked the condition for the input value , is its false then you changed the colour by using - document.body.style.background - colour; . Here As I have two section in the body so I was passing the class name and that is - middle . So my code was document.middle.style.background - color. But it’s showing problems. I tried to get the element of the class as well but nothing happening. Please help me
Your video and energy are on point brother! You have a new subscriber here. Excellent work but Font Awesome has changed, do you know by any chance how to get that link you shared in 1:55? I'll copy it character by character but I think answering this might help others too. Awesome tutorial! Thanks
I just watched this video and is amazing bro, thank you so much for this and if you ended up making the full JavaScript tutorial I would appreciate it if you share the link with me, I'd like to watch it too, thanks
Has he hurt your feelings by making this comment or what? Come on guys, embrace critics to improve yourselves. He even said that it's a brilliant animation, just the UX is bad. I love Ed's tutorials but I can't agree more. Golden UX rules are the basics and he did well pointing that out. Don't just use this UX form concept as it is, coz it's bad, rather take inspiration to build some other stuff.
Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. danilgamingacc@gmail.com
This video is great thanks DevEd for creating such a nice video today i have learnt css more here like position:realtive when to use it and position absolute ........ and also flexbox And javscript is little confusing if i watch 3 to 4 times i will get it
Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. danilgamingacc@gmail.com
is it working for you??? i am not able to run it properly i even checked my code twice but it is still not working ..please help me if it worked for you
hi, mr. dimitri marco, why validate email not execute red color althought i didn't input email sign @ ?? i try to follow by video to write that crazy sign like this /^[^\s@]+@[^\s@]+\.[^\s@]+$/ but it still execute the green one.
why does this not work? ` const nextSlide = (parent, nextForm) => { console.log("next slide") // parent.className = "inactive" parent.classList.remove("active"); parent.classList.add("active"); // parent.classList.add('inactive'); // parent.classList.remove('active'); // parent. } ` it's getting called, but classList is having errors so I tried className = " " instead. The only documentation is showing me that I need to grab the element by the ID then use className on that. Anything I missed here?? Thanks!
So my form removes the first slide but afterwards doesn't bring the new text box back up. I have stared at the code and I can't figure out what the problem is. Also the shake doesn't work for me.
Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. danilgamingacc@gmail.com
How do I code this?any hints, suggestions and comments are welcome thank you in advance for your help: "Payment Info" section: The preferred or most common payment method option should be selected and the corresponding payment form sections should be displayed by default, while the other payment form sections should be hidden. Programming the "Payment Info" section requires working with the following elements: The "I'm going to pay with:" element The element with the id of "credit-card" The element with the id of "paypal" The element with the id of "bitcoin" Create variables to reference the above elements, and log them out to the console to confirm their identity. Use the "paypal" and "bitcoin" variables above to hide these elements initially. Use the payment variable above to target the element’s second child element and give it the selected property. The .children property and the setAttribute method will be helpful here. Use the payment variable above to listen for the change event on this element. When a change is detected, display the element with the id that matches the value of the event.target element. And hide the other two elements. Now save and refresh the page, and when the payment method option is updated in the drop-down menu, the payment sections in the form will update accordingly.
i fixed it by adding a line of code I dont think was in your video, to this function nextSlide(parent,nextForm) { parent.classList.add('innactive'); parent.classList.remove('active'); nextForm.classList.add('active'); I added = nextForm.classList.remove('innactive'); and it works fine now !
So I'm very impressed by your skill... just one question : why should we validate the value of each inputs ? They are "required" so HTML5 do it for us, don't it?
Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. danilgamingacc@gmail.com
Hope you like this one! Sorry if its a bit too long. I tried to jam as much as possible in 35 minutes!
I like animation using js ; because I learn JavaScript like this project
you could have cut it down to 20 min by not doing from scratch just showing javascript part & little summary of HTML & CSS
can you see what Im doing wrong? I cannot run it? I watched the video 3 times run through all again and again but failed...
// JavaScript Document
function animatedForm() {
const arrows = document.querySelectorAll('.fa-arrow-down');
arrows.forEach(arrow => {
arrow.addEventListener('click', () => {
const input = arrow.previousElementSibling;
const parent = arrow.parentElement;
const nextForm = parent.nextElementSibling;
if(input.type === "text" && validateUser(input)){
nextSLide(parent,nextForm);
}
else if(input.type == "email" && validateEmail(input)) {
nextSLide(parent, nextForm);
}
else if(input.type === "number" && validateUser(input)) {
nextSLide(parent, nextForm);
}
else{
parent.style. animation = "shake 0.5s ease";
}
parent.addEventListener("animationend", () => {
parent.style.animation = "";
})
})
})
}
function validateUser(user){
if(user.value.length < 6){
consolo.log("not enough characters");
error("rgb(189, 87, 87)");
}else{
error("rgb(87, 189, 130)");
return true;
}
}
function validateEmail(email) {
const validation = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if(validation.test(email.value)){
error('rgb(87,189,130)');
return true;
}
else {
error('rgb(189,87,87)');
}
}
function validateNumber(number) {
const validation = /^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}/;
if(validation.test(number.value)){
error('rgb(87,189,130)');
return true;
}
else {
error('rgb(189,87,87)');
}
}
function nextSLide(parent, nextForm){
parent.classList.add("inactive");
parent.classList.remove("active");
nextForm.classList.add("active");
}
function error(color) {
document.body.style.backgroundColor = color;
}
animatedForm();
not long at all. Its a useful video and not at all boring. Keep making more videos like this dont worry about the length.
I thought the length was great, as someone just starting out with a very brief knowledge of HTML CSS JS i found the explanations really useful. Thank you.
I have only watched one minute of this video and I am already certain that I will enjoy so much and I will watch it until the end. Thanks Ed!!
your voice is too amazing specially when you say "oh my goodness" (once in your tutorial)
Loving the tutorials dude! i'm going to be applying for my first frontend job in the next few weeks and your channel has been an amazing help :)
Didn't watch your videos for like three or four months. Forgot how fun and educational they are!
I'm from Taiwan.
Love your JS tutorial so much!
I'm so happy that I came across your tutorial,you are such a good tutor,make more videos please,I'm a begginer and I'm learning alot since I found you
Fall in love with your code...Love from Bangladesh Sir.
yo, man. Loved your tutorial. Spend last 20 minutes looking for it, as almost all others are so boring and tasteless. I have remembered that I watched you couple of months ago and tried so many things to find this vid. Thanks for such an addictive content!
Thanks so much! Glad I helped!
Man I am addicted to Javascript!
JavaScript was my first-love
We are same bro
i am learning js now...
but i am addicted to python and tkinter
Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it.
danilgamingacc@gmail.com
Me too. You guys can checkout what I did with the project here - github.com/kruze-dev/Form_validation
nice one man .. everything is clear .. hope u hit the 100k soon , good luck.
You have a really nice voice, made the video as easy listen 😄
I am just love this video . Your are just awesome. Specially I like your video because you explain everything so clearly so I don't have to copy I can just remember and do my own. It's really help me to learn.
yes do it man we need that. and one more thing plz make a tutorial on any database, how to store in database that taken input from user?
Thank you for another great tutorial, finally, JS is starting to make sense! I like your videos as they are bite-sized and they don't take up 3-4 hours like some tutorials. Another idea of progressing this further would be to change the placeholder to a label above on click for accessibility :)
i am from Bangladesh.this tutorial is very good and helpful for a starter label .i love this tutorial.
Omg, so nice!! From Brazil
Nice. Would be really cool if you did a follow up vid to do the things you talk about at the end!
Love your content man - keep up the awesome work :)
>simple
>35 minutes
javascript is at it again
Again, an awesome video, learnt and had fun
["Milk", "Cow"]
wow I've learned the basics of JavaScript in one week but to start to thinking so complex like this it's just unreal... !!!!!!!!
Wut?
please upload more javascript project videos(small project).. awesome content....Subscribed
Hi friend, how can we do to change this body tag ??? and change the style of another block for example ??? I want to know how we can use this script in the other medium than the body. for example I create a class and I apply this script to this class. but also I would like to know if we get to the end of these tests is what form must submit without submit button ????
Thank you. I have two video request, put those tutorials whenever you want. 1.Responsive Tabs and Accordions using javascript
Description is missing the regex.
The regex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
How can I print the (Not Enough Charachter) in a h2 and on the box?
Hey Hasan you can check out what I did with the project here - github.com/kruze-dev/Form_validation
you used two arrow icons for the email field,Love you btw
Thank you very much. In this course, I learned the animation button
Can we use this in a section ? U have used it in a complete body but I want to use it in section . When somebody will scroll down then they should be able to use it. I tried but it’s not happening. The problem is : when u checked the condition for the input value , is its false then you changed the colour by using - document.body.style.background - colour; . Here As I have two section in the body so I was passing the class name and that is - middle . So my code was document.middle.style.background - color. But it’s showing problems. I tried to get the element of the class as well but nothing happening. Please help me
1:51 it doesnot appear any code link it wants a kit ? And What'S A Kit :(
what extension do you have to close tags without closing on save like this
It's called autotag
Amazing, keep working hard man!
why am getting nodelist[0] after selecting the class of arrows using queryselectorAll(.fa-arrow-down)?
Does "nodelist[0]" imply that your result nodelist has zero elements in it, or are you trying to access an item at position 0?
@@Krilllindit implies that 0 element is selected
@@vaibhavgehani9315 I've gone back to the video a few times to make sure I have things the way he has them set up but I'm having the same issue here.
Your video and energy are on point brother! You have a new subscriber here. Excellent work but Font Awesome has changed, do you know by any chance how to get that link you shared in 1:55? I'll copy it character by character but I think answering this might help others too. Awesome tutorial! Thanks
I have the same question. I have manually typed it but still does not work.
awesome video Ed!!!1
it's amazing! keep up the good work.
I really love your videos! Amazing work !
fantastic, good vibes from you again, but forget regex that everyone can google it, np
Really nice tutorial, clear and informative, learned a couple new things from it
I just watched this video and is amazing bro, thank you so much for this and if you ended up making the full JavaScript tutorial I would appreciate it if you share the link with me, I'd like to watch it too, thanks
Bro you are too funny I like your style of teaching:)
Hey Ed, why will the Enter key not submit the form?
Awesome animation, but very bad UX for users. Gold rule of useful form on web is “let user show all fields for filling or add steps/progress”.
I assume this tutorial is for beginners and it's good enough. Golden rules is for pros
good thing its a js tutorial not a ux tutorial
Has he hurt your feelings by making this comment or what?
Come on guys, embrace critics to improve yourselves. He even said that it's a brilliant animation, just the UX is bad. I love Ed's tutorials but I can't agree more.
Golden UX rules are the basics and he did well pointing that out. Don't just use this UX form concept as it is, coz it's bad, rather take inspiration to build some other stuff.
watch till end of video before commenting.
What program are you using to write down your code?
its really cool 😍
Thank you for this 👏
Is there any way you can put this code in github or codepen so we can use it to help us build our own spin on it? Thanks!
sir,IDK but my inactive and active is not working in the project?? now, what should I do..
Your videos really give me inspiration..thank you Ed
Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it.
danilgamingacc@gmail.com
what the music are you using in the beginning? i like it !
Your content is great. Kindly keep up.
This video is great thanks DevEd for creating such a nice video today i have learnt css more here like position:realtive when to use it and position absolute ........ and also flexbox And javscript is little confusing if i watch 3 to 4 times i will get it
Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it.
danilgamingacc@gmail.com
HiDev Ed, this is a really cool video, i enjoy it ! 😁
Hey Ed, man I love really you. like not love love. it's a freind's love. You really helped us lot (as a beginner).
is it working for you??? i am not able to run it properly i even checked my code twice but it is still not working ..please help me if it worked for you
@@sarcaastech what help do you need? At what particular point?
@@sarcaastech and yeah it worked here.
We can personally contact on whatsapp.
Here I am 9993502590
It worked for me too bro !! Thanks for replying ..
I liked it...in a small time had learned a lot
Nice organized presentation with free icons...excellent
Thanks alot! Trying my best.
Очень классный пример) спасибо, хорошее решение для логина =)
hi, mr. dimitri marco, why validate email not execute red color althought i didn't input email sign @ ?? i try to follow by video to write that crazy sign like this /^[^\s@]+@[^\s@]+\.[^\s@]+$/ but it still execute the green one.
Which editor do you use
why does this not work?
`
const nextSlide = (parent, nextForm) => {
console.log("next slide")
// parent.className = "inactive"
parent.classList.remove("active");
parent.classList.add("active");
// parent.classList.add('inactive');
// parent.classList.remove('active');
// parent.
}
`
it's getting called, but classList is having errors so I tried className = " " instead. The only documentation is showing me that I need to grab the element by the ID then use className on that. Anything I missed here?? Thanks!
Great video.👍👍👍Thank you,sir !
Hey Bro, You are a good teacher. Please make a video of a complete website.
Thank you. It was best to learn to make project with java script among all of videos on java script.
how will innactive work which extension to be downloaded for this .. anyone help ?
Awesome man... superb... Best wishes
So my form removes the first slide but afterwards doesn't bring the new text box back up. I have stared at the code and I can't figure out what the problem is. Also the shake doesn't work for me.
Nvm everything works.... I spelled active wrong................
i love your videos..and u are very sympathic !
Really good man thank you
Can u provide steps preparing this platform? How to deploy the program to host in iis or apache?
You can setup locally on your machine. Follow this tutorial for the first 12 minutes: ua-cam.com/video/W6NZfCO5SIk/v-deo.html
Amazing video it's helped me a lot!
Круто! Спасибо из Новосибирска!)
div.active{
opacity: 1;
pointer-events: all;
transform: translate(-50%,-50%);
}
what's your vs code theme extension? thanks
Thank you Bro! :)
love it man.. Keep going. We are behind you :)
Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it.
danilgamingacc@gmail.com
can someone please refresh me on the specificity of .field-name i vs div.inactive ?
Does anyone have access to the source link for Font awesome i was given a different link Thanks
Please anyone let me know Thanks
Sensacional, seus tuturiais são muito bons!
thanks a lot for this great work.
amz bro thx for this dude
Learnt today well flow of javascript and dom
Awesome tutorial. Thank you.
where is email validation? at 28:36????????????????????????????????????????????????????????????????
where is the regex in the description ?
this is your another best video
How do I code this?any hints, suggestions and comments are welcome thank you in advance for your help:
"Payment Info" section:
The preferred or most common payment method option should be selected and the corresponding payment form sections should be displayed by default, while the other payment form sections should be hidden.
Programming the "Payment Info" section requires working with the following elements:
The "I'm going to pay with:" element
The element with the id of "credit-card"
The element with the id of "paypal"
The element with the id of "bitcoin"
Create variables to reference the above elements, and log them out to the console to confirm their identity.
Use the "paypal" and "bitcoin" variables above to hide these elements initially.
Use the payment variable above to target the element’s second child element and give it the selected property. The .children property and the setAttribute method will be helpful here.
Use the payment variable above to listen for the change event on this element. When a change is detected, display the element with the id that matches the value of the event.target element. And hide the other two elements.
Now save and refresh the page, and when the payment method option is updated in the drop-down menu, the payment sections in the form will update accordingly.
You are awesome man 😎
Thank you! 🙏
i get an error: const arrows = document.querySelectorAll(".fa-arrow-down");
^
ReferenceError: document is not defined
do you have a idea?
Try adding in your HTML the script element at the end of the document just above and ensure you linked it properly, see if that works?
Great tutorial!
Thank you Mitchell!
i get an unexpected token > error at the foreach in js. Somebody help!
I cant seem to find a reason why after inputing data in name when i try to input data into email i cant i also cant press the arrow for next.
after successful input in Name my Email input changes to =
i fixed it by adding a line of code I dont think was in your video,
to this
function nextSlide(parent,nextForm) {
parent.classList.add('innactive');
parent.classList.remove('active');
nextForm.classList.add('active');
I added = nextForm.classList.remove('innactive');
and it works fine now !
Eyy glad you figured it out! Good job!
So I'm very impressed by your skill... just one question : why should we validate the value of each inputs ? They are "required" so HTML5 do it for us, don't it?
Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it.
danilgamingacc@gmail.com
my error() to change the colour is not working can you tell me why?
Lovely 🤘🤘
Bro transition effect is not working on my chrome browser?? What should I do?
yes ! it is not working for me neither
I got aError:Arrow.addEventlistener is not a function please anyone can help?
Awesome Animation
Why u put have / in your tag of required? Plss tell me
no
just a simple closing tag of input tag
icon are not showing my chrome browser and am using sublime text editor pls tell me how to solve problem