Simple Form Animation With Javascript Tutorial | HTML Forms | Learn Javascript
ฝัง
- เผยแพร่เมื่อ 10 ม.ค. 2019
- Check out my courses and become more creative!
developedbyed.com
Simple Form Animation With Javascript Tutorial | HTML Forms | Learn Javascript
❤Become a patreon for exclusive videos and more!
/ dev_ed
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
Today we are going to use Javascript to add some animations to our html forms. You can use this to create simple html login forms or registration forms. Including animation for form validation using html and javascript.
We are also going to learn how to structure all your inputs and icons inside each form group. Taking the data from a form and submitting it will come in a later tutorial.
This video is made for people who want to learn more about HTML Forms and Javascript in very easy steps.
📔 Materials used in this video:
Font Awesome: fontawesome.com/
🛴 Follow me on:
Twitter: / deved94
Github: github.com/DevEdwin - วิทยาศาสตร์และเทคโนโลยี
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.
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 :)
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)
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 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.
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
Amazing, keep working hard man!
Love your content man - keep up the awesome work :)
Fall in love with your code...Love from Bangladesh Sir.
I'm from Taiwan.
Love your JS tutorial so much!
I really love your videos! Amazing work !
You have a really nice voice, made the video as easy listen 😄
nice one man .. everything is clear .. hope u hit the 100k soon , good luck.
Really nice tutorial, clear and informative, learned a couple new things from it
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!
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?
Omg, so nice!! From Brazil
it's amazing! keep up the good work.
Again, an awesome video, learnt and had fun
["Milk", "Cow"]
Thank you very much. In this course, I learned the animation button
Didn't watch your videos for like three or four months. Forgot how fun and educational they are!
Nice. Would be really cool if you did a follow up vid to do the things you talk about at the end!
Learning is great with your amazing style. Love it.
please upload more javascript project videos(small project).. awesome content....Subscribed
Awesome tutorial. Thank you.
Really good man thank you
Great video.👍👍👍Thank you,sir !
Sensacional, seus tuturiais são muito bons!
its really cool 😍
Thank you for this 👏
awesome video Ed!!!1
Thank you. I have two video request, put those tutorials whenever you want. 1.Responsive Tabs and Accordions using javascript
Amazing video it's helped me a lot!
love it man.. Keep going. We are behind you :)
Awesome man... superb... Best wishes
you used two arrow icons for the email field,Love you btw
Your content is great. Kindly keep up.
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
amz bro thx for this dude
thanks a lot for this great work.
Thank you Bro! :)
Круто! Спасибо из Новосибирска!)
I liked it...in a small time had learned a lot
HiDev Ed, this is a really cool video, i enjoy it ! 😁
i love your videos..and u are very sympathic !
i am from Bangladesh.this tutorial is very good and helpful for a starter label .i love this tutorial.
Thank you! 🙏
Очень классный пример) спасибо, хорошее решение для логина =)
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
>simple
>35 minutes
javascript is at it again
Awesome Animation
thanks a lot bro
You are awesome man 😎
Learnt today well flow of javascript and dom
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
what extension do you have to close tags without closing on save like this
It's called autotag
Thank you bro!!!
Great tutorial!
Thank you Mitchell!
Nice organized presentation with free icons...excellent
Thanks alot! Trying my best.
Thank you. It was best to learn to make project with java script among all of videos on java script.
Man I am addicted to Javascript!
JavaScript was my first-love
@@melvinkimathi8924 Same here
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
this is your another best video
Hey Bro, You are a good teacher. Please make a video of a complete website.
Lovely 🤘🤘
brilliant!
what's your vs code theme extension? thanks
Thankyou very much
Could someone please help me, in my app.js im getting document is not defined on the part where when try to get the arrow to log the input to the console. Thanks!
very understandable
What program are you using to write down your code?
Thank you
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?
Keep it up!
you are hero
Which editor do you use
Bro you are too funny I like your style of teaching:)
Thanks a lot....
Description is missing the regex.
The regex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
i like that !
can someone please refresh me on the specificity of .field-name i vs div.inactive ?
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.
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 ????
fantastic, good vibes from you again, but forget regex that everyone can google it, np
Спасибо! Очень полезно 👍
what the music are you using in the beginning? i like it !
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!
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.
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
thanks
sir,IDK but my inactive and active is not working in the project?? now, what should I do..
Can I see you creating registration form with email verification sir? thank you.
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
Ya like it but I have requested on last video commented to build video web site design that load video's in same page and it also play it please teach,e that
how will innactive work which extension to be downloaded for this .. anyone help ?
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.
Hey Ed, why will the Enter key not submit the form?
Sir super do all concpets
i get an unexpected token > error at the foreach in js. Somebody help!
1:51 it doesnot appear any code link it wants a kit ? And What'S A Kit :(
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?