Simple Form Animation With Javascript Tutorial | HTML Forms | Learn Javascript

[@developedbyed]

Hope you like this one! Sorry if its a bit too long. I tried to jam as much as possible in 35 minutes!

[@sidisidahmed9081]

I like animation using js ; because I learn JavaScript like this project

[@nepalcodetv6298]

you could have cut it down to 20 min by not doing from scratch just showing javascript part & little summary of HTML & CSS

[@ibrahims.h.4403]

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();

[@rpanda_old]

not long at all. Its a useful video and not at all boring. Keep making more videos like this dont worry about the length.

[@C_Ariss]

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.

[@faizanhassan2088]

your voice is too amazing specially when you say "oh my goodness" (once in your tutorial)

[@diegorobayo9013]

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!!

[@nzekwemichael1862]

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

[@sanji0302177]

I'm from Taiwan. Love your JS tutorial so much!

[@l3_p14f9]

Didn't watch your videos for like three or four months. Forgot how fun and educational they are!

[@bentaylor10]

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 :)

[@wornozkhmone6411]

i am from Bangladesh.this tutorial is very good and helpful for a starter label .i love this tutorial.

[@neosabiit]

Fall in love with your code...Love from Bangladesh Sir.

[@HostDotPromo]

Man I am addicted to Javascript!

[@melvinkimathi8924]

JavaScript was my first-love

[@whoami5583]

We are same bro

[@marcus.the.younger]

i am learning js now... but i am addicted to python and tkinter

[@danilmaheshwari5696]

Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. [e-mail]

[@adetolasanni007]

Me too. You guys can checkout what I did with the project here - github.com/kruze-dev/Form_validation

[@amarnathmukherjee3900]

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.

[@faizanhassan2088]

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?

[@omsomol.j2501]

div.active{ opacity: 1; pointer-events: all; transform: translate(-50%,-50%); }

[@4Y0P]

You have a really nice voice, made the video as easy listen 😄

[@marsin23]

>simple >35 minutes javascript is at it again

[@ioannisme7495]

wow I've learned the basics of JavaScript in one week but to start to thinking so complex like this it's just unreal... !!!!!!!!

[@eoussama]

Wut?

[@wwt17]

Nice. Would be really cool if you did a follow up vid to do the things you talk about at the end!

[@obeid_s]

nice one man .. everything is clear .. hope u hit the 100k soon , good luck.

[@yaroslavkozak]

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!

[@developedbyed]

Thanks so much! Glad I helped!

[@alibarznji2000]

you used two arrow icons for the email field,Love you btw

[@rphuntarchive1]

Description is missing the regex.

[@Ameiren]

The regex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

[@reudostf]

Omg, so nice!! From Brazil

[@alijonkuvondikov2861]

Thank you very much. In this course, I learned the animation button

[@rebeccayoung8266]

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 :)

[@matfen7978]

Again, an awesome video, learnt and had fun ["Milk", "Cow"]

[@niharikab5202]

I liked it...in a small time had learned a lot

[@1vigneshram]

Learnt today well flow of javascript and dom

[@proknlee]

awesome video Ed!!!1

[@JahangirKhan-dc3mm]

please upload more javascript project videos(small project).. awesome content....Subscribed

[@farazmehraien3913]

fantastic, good vibes from you again, but forget regex that everyone can google it, np

[@vic_shine]

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”.

[@atoum24]

I assume this tutorial is for beginners and it's good enough. Golden rules is for pros

[@nahfamimgood]

good thing its a js tutorial not a ux tutorial

[@wickedADAMMM]

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.

[@waynebr2659]

watch till end of video before commenting.

[@bikramchettri9405]

Thank you. I have two video request, put those tutorials whenever you want. 1.Responsive Tabs and Accordions using javascript

[@shamanicmonotheism]

Thank you. It was best to learn to make project with java script among all of videos on java script.

[@TherealEmemay]

Really good man thank you

[@husseineid7885]

Your content is great. Kindly keep up.

[@ahadsvlog1366]

Learning is great with your amazing style. Love it.

[@umersaeed259]

Hey Bro, You are a good teacher. Please make a video of a complete website.

[@jeremiah869]

Love your content man - keep up the awesome work :)

[@jackmanjls]

Nice organized presentation with free icons...excellent

[@developedbyed]

Thanks alot! Trying my best.

[@karlrussellmenil9460]

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.

[@synoplex8042]

Bro you are too funny I like your style of teaching:)

[@diegovillamil7999]

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

[@viktorkasap]

Очень классный пример) спасибо, хорошее решение для логина =)

[@nurharizulaimanmatharith4023]

Your videos really give me inspiration..thank you Ed

[@danilmaheshwari5696]

Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. [e-mail]

[@andychung6877]

Amazing, keep working hard man!

[@idkrn5301]

Really nice tutorial, clear and informative, learned a couple new things from it

[@yigit2505]

thanks a lot for this great work.

[@شيرينالعجمى-د3ل]

its really cool 😍 Thank you for this 👏

[@1vigneshram]

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

[@danilmaheshwari5696]

Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. [e-mail]

[@krispip1666]

I really love your videos! Amazing work !

[@lakshmangope8963]

it's amazing! keep up the good work.

[@rafaelcavallin3952]

Thank you Bro! :)

[@Maertaugh]

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?

[@danilmaheshwari5696]

Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. [e-mail]

[@dnoizaudio]

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 ????

[@mythm2063]

thanks a lot bro

[@LongEnough1987]

Thank you! 🙏

[@phantomboy1496]

Awesome Animation

[@rithvikbhat6860]

Amazing video it's helped me a lot!

[@TherealEmemay]

Thank you

[@mauriciomiranda3218]

Sensacional, seus tuturiais são muito bons!

[@АлександрБугров-н7т]

Круто! Спасибо из Новосибирска!)

[@remax110]

Awesome tutorial. Thank you.

[@kuvonchbek871]

very understandable

[@arthurradium5823]

i love your videos..and u are very sympathic !

[@sidyniang_coding4101]

HiDev Ed, this is a really cool video, i enjoy it ! 😁

[@johnbritto4960]

Awesome man... superb... Best wishes

[@DrinkCola]

The CSS is more complicated than the java-script , although CSS is not a programming language.

[@danilmaheshwari5696]

Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. [e-mail]

[@subtituladoschile1024]

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

[@supernoblica]

I have the same question. I have manually typed it but still does not work.

[@alizahmohammadsamaneen6347]

this is your another best video

[@hassanalnajjar8881]

amz bro thx for this dude

[@joshuatao7020]

Great video.👍👍👍Thank you,sir !

[@shivamgoyal796]

You are awesome man 😎

[@javascriptwar9525]

Thankyou very much

[@mitchelldejonghe4271]

Great tutorial!

[@developedbyed]

Thank you Mitchell!

[@hasany1562]

How can I print the (Not Enough Charachter) in a h2 and on the box?

[@adetolasanni007]

Hey Hasan you can check out what I did with the project here - github.com/kruze-dev/Form_validation

[@davronbekteacher]

Thank you bro!!!

[@redheadedgamer88]

Only thing that bugs me is that the envelope icon never ended up being used

[@mehdiferhat2773]

thanks

[@rajeshrout648]

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

[@mohammadanarul624]

Thanks a lot....

[@shankargurung1335]

Lovely 🤘🤘

[@developedbyed]

A simple email regex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/

[@leonardoscuro]

what extension do you have to close tags without closing on save like this

[@konohamaru8497]

It's called autotag

[@justfly1984]

Accessibility and UX for repeating users could suffer

[@shna90]

what the music are you using in the beginning? i like it !

[@faizanhassan2088]

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).

[@sarcaastech]

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

[@faizanhassan2088]

@@sarcaastech what help do you need? At what particular point?

[@faizanhassan2088]

@@sarcaastech and yeah it worked here.

[@faizanhassan2088]

We can personally contact on whatsapp. Here I am 9993502590

[@sarcaastech]

It worked for me too bro !! Thanks for replying ..

[@lhelper1537]

I am.ur 1001 subscribe er from India 😆😆😆😆

[@devlab_academy]

love it man.. Keep going. We are behind you :)

[@danilmaheshwari5696]

Can you share me the HTML and JavaScript File. I am stuck at the validations parts of the functions. Cant really get through it. [e-mail]

[@kansizorhan2483]

you are hero

[@omosironaiomosironai]

brilliant!

[@Clickyv]

Why u repeat arrow-down, u could do it once and repeat by JS

[@ArthurJ7154]

What program are you using to write down your code?

[@TheHairbowMaster]

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!

[@pablolimo8481]

Very imaginative but I'd say it needs some DRY

[@adetolasanni007]

Hey Ed, why will the Enter key not submit the form?

[@ПётрИванович-ы3г]

Спасибо! Очень полезно 👍

[@deepalirajenimbalkar6318]

Which editor do you use

[@VRReal-Estate]

Sir super do all concpets

[@okandme]

At the arrow part, just use &DownArrow;

[@philippenangui1573]

i like that !