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

Поділитися
Вставка
  • Опубліковано 23 гру 2024

КОМЕНТАРІ • 244

  • @developedbyed
    @developedbyed  6 років тому +46

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

    • @sidisidahmed9081
      @sidisidahmed9081 6 років тому

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

    • @nepalcodetv6298
      @nepalcodetv6298 5 років тому +1

      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
      @ibrahims.h.4403 5 років тому

      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
      @rpanda_old 5 років тому

      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
      @C_Ariss 5 років тому

      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.

  • @diegorobayo9013
    @diegorobayo9013 4 роки тому +3

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

  • @faizanhassan2088
    @faizanhassan2088 5 років тому +14

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

  • @bentaylor10
    @bentaylor10 5 років тому +7

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

  • @l3_p14f9
    @l3_p14f9 3 роки тому

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

  • @sanji0302177
    @sanji0302177 4 роки тому +2

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

  • @nzekwemichael1862
    @nzekwemichael1862 2 роки тому +1

    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

  • @neosabiit
    @neosabiit 5 років тому +5

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

  • @yaroslavkozak
    @yaroslavkozak 5 років тому

    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!

  • @HostDotPromo
    @HostDotPromo 5 років тому +57

    Man I am addicted to Javascript!

    • @melvinkimathi8924
      @melvinkimathi8924 4 роки тому +1

      JavaScript was my first-love

    • @whoami5583
      @whoami5583 4 роки тому

      We are same bro

    • @marcus.the.younger
      @marcus.the.younger 4 роки тому

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

    • @danilmaheshwari5696
      @danilmaheshwari5696 4 роки тому

      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

    • @adetolasanni007
      @adetolasanni007 3 роки тому

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

  • @obeid_s
    @obeid_s 5 років тому +2

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

  • @4Y0P
    @4Y0P 5 років тому +8

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

  • @amarnathmukherjee3900
    @amarnathmukherjee3900 5 років тому +3

    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
    @faizanhassan2088 5 років тому +1

    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?

  • @rebeccayoung8266
    @rebeccayoung8266 5 років тому +1

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

  • @wornozkhmone6411
    @wornozkhmone6411 3 роки тому

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

  • @reudostf
    @reudostf 5 років тому +3

    Omg, so nice!! From Brazil

  • @wwt17
    @wwt17 5 років тому +1

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

  • @jeremiah869
    @jeremiah869 6 років тому +4

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

  • @marsin23
    @marsin23 5 років тому +12

    >simple
    >35 minutes
    javascript is at it again

  • @matfen7978
    @matfen7978 5 років тому +3

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

  • @ioannisme7495
    @ioannisme7495 5 років тому

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

  • @JahangirKhan-dc3mm
    @JahangirKhan-dc3mm 6 років тому +4

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

  • @dnoizaudio
    @dnoizaudio 5 років тому +1

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

  • @bikramchettri9405
    @bikramchettri9405 6 років тому

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

  • @rphuntarchive1
    @rphuntarchive1 5 років тому +28

    Description is missing the regex.

    • @Ameiren
      @Ameiren 4 роки тому +8

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

  • @hasany1562
    @hasany1562 4 роки тому +2

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

    • @adetolasanni007
      @adetolasanni007 3 роки тому

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

  • @alibarznji2000
    @alibarznji2000 4 роки тому +1

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

  • @alijonkuvondikov2861
    @alijonkuvondikov2861 4 роки тому

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

  • @rajeshrout648
    @rajeshrout648 5 років тому +1

    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

  • @متععقلك-خ4خ3ظ
    @متععقلك-خ4خ3ظ 5 років тому

    1:51 it doesnot appear any code link it wants a kit ? And What'S A Kit :(

  • @leonardoscuro
    @leonardoscuro 5 років тому +2

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

  • @andychung6877
    @andychung6877 5 років тому +2

    Amazing, keep working hard man!

  • @vaibhavgehani9315
    @vaibhavgehani9315 5 років тому +1

    why am getting nodelist[0] after selecting the class of arrows using queryselectorAll(.fa-arrow-down)?

    • @Krilllind
      @Krilllind 5 років тому

      Does "nodelist[0]" imply that your result nodelist has zero elements in it, or are you trying to access an item at position 0?

    • @vaibhavgehani9315
      @vaibhavgehani9315 5 років тому

      @@Krilllindit implies that 0 element is selected

    • @ricardoramirez1884
      @ricardoramirez1884 5 років тому

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

  • @subtituladoschile1024
    @subtituladoschile1024 5 років тому +3

    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
      @supernoblica 4 роки тому

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

  • @proknlee
    @proknlee 5 років тому +1

    awesome video Ed!!!1

  • @lakshmangope8963
    @lakshmangope8963 5 років тому +1

    it's amazing! keep up the good work.

  • @krispip1666
    @krispip1666 5 років тому

    I really love your videos! Amazing work !

  • @farazmehraien3913
    @farazmehraien3913 4 роки тому +1

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

  • @idkrn5301
    @idkrn5301 5 років тому

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

  • @diegovillamil7999
    @diegovillamil7999 4 роки тому

    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

  • @synoplex8042
    @synoplex8042 4 роки тому +1

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

  • @adetolasanni007
    @adetolasanni007 3 роки тому

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

  • @vic_shine
    @vic_shine 5 років тому +13

    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
      @atoum24 5 років тому +2

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

    • @nahfamimgood
      @nahfamimgood 5 років тому +3

      good thing its a js tutorial not a ux tutorial

    • @wickedADAMMM
      @wickedADAMMM 5 років тому +3

      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
      @waynebr2659 5 років тому +1

      watch till end of video before commenting.

  • @ArthurJ7154
    @ArthurJ7154 3 роки тому

    What program are you using to write down your code?

  • @شيرينالعجمى-د3ل
    @شيرينالعجمى-د3ل 3 роки тому

    its really cool 😍
    Thank you for this 👏

  • @TheHairbowMaster
    @TheHairbowMaster 3 роки тому

    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!

  • @samrajaved1163
    @samrajaved1163 4 роки тому

    sir,IDK but my inactive and active is not working in the project?? now, what should I do..

  • @nurharizulaimanmatharith4023
    @nurharizulaimanmatharith4023 4 роки тому

    Your videos really give me inspiration..thank you Ed

    • @danilmaheshwari5696
      @danilmaheshwari5696 4 роки тому

      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

  • @shna90
    @shna90 Рік тому

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

  • @husseineid7885
    @husseineid7885 4 роки тому

    Your content is great. Kindly keep up.

  • @1vigneshram
    @1vigneshram 4 роки тому

    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
      @danilmaheshwari5696 4 роки тому

      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

  • @sidyniang_coding4101
    @sidyniang_coding4101 2 роки тому

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

  • @faizanhassan2088
    @faizanhassan2088 5 років тому +1

    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
      @sarcaastech 5 років тому

      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
      @faizanhassan2088 5 років тому

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

    • @faizanhassan2088
      @faizanhassan2088 5 років тому +1

      @@sarcaastech and yeah it worked here.

    • @faizanhassan2088
      @faizanhassan2088 5 років тому

      We can personally contact on whatsapp.
      Here I am 9993502590

    • @sarcaastech
      @sarcaastech 5 років тому

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

  • @niharikab5202
    @niharikab5202 4 роки тому

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

  • @jackmanjls
    @jackmanjls 5 років тому

    Nice organized presentation with free icons...excellent

  • @viktorkasap
    @viktorkasap 4 роки тому +1

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

  • @akhwanstudio
    @akhwanstudio 5 років тому

    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.

  • @deepalirajenimbalkar6318
    @deepalirajenimbalkar6318 4 роки тому

    Which editor do you use

  • @sabertoothwallaby2937
    @sabertoothwallaby2937 3 роки тому

    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!

  • @joshuatao7020
    @joshuatao7020 5 років тому

    Great video.👍👍👍Thank you,sir !

  • @umersaeed259
    @umersaeed259 5 років тому

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

  • @shamanicmonotheism
    @shamanicmonotheism 4 роки тому

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

  • @swadha0007
    @swadha0007 3 роки тому

    how will innactive work which extension to be downloaded for this .. anyone help ?

  • @johnbritto4960
    @johnbritto4960 5 років тому

    Awesome man... superb... Best wishes

  • @RantsUrPantsOff
    @RantsUrPantsOff 5 років тому

    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.

    • @RantsUrPantsOff
      @RantsUrPantsOff 5 років тому

      Nvm everything works.... I spelled active wrong................

  • @arthurradium5823
    @arthurradium5823 5 років тому

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

  • @TherealEmemay
    @TherealEmemay 3 роки тому

    Really good man thank you

  • @Akira29H
    @Akira29H 5 років тому

    Can u provide steps preparing this platform? How to deploy the program to host in iis or apache?

    • @Frazmologist
      @Frazmologist 5 років тому

      You can setup locally on your machine. Follow this tutorial for the first 12 minutes: ua-cam.com/video/W6NZfCO5SIk/v-deo.html

  • @rithvikbhat6860
    @rithvikbhat6860 4 роки тому

    Amazing video it's helped me a lot!

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

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

  • @omsomol.j2501
    @omsomol.j2501 4 роки тому

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

  • @naiki1409
    @naiki1409 5 років тому

    what's your vs code theme extension? thanks

  • @rafaelcavallin3952
    @rafaelcavallin3952 5 років тому +1

    Thank you Bro! :)

  • @devlab_academy
    @devlab_academy 5 років тому

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

    • @danilmaheshwari5696
      @danilmaheshwari5696 4 роки тому

      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

  • @wheres_bears1378
    @wheres_bears1378 5 років тому

    can someone please refresh me on the specificity of .field-name i vs div.inactive ?

  • @SMARTERSECS
    @SMARTERSECS 4 роки тому +1

    Does anyone have access to the source link for Font awesome i was given a different link Thanks

    • @SMARTERSECS
      @SMARTERSECS 4 роки тому

      Please anyone let me know Thanks

  • @mauriciomiranda3218
    @mauriciomiranda3218 4 роки тому

    Sensacional, seus tuturiais são muito bons!

  • @yigit2505
    @yigit2505 3 роки тому

    thanks a lot for this great work.

  • @hassanalnajjar8881
    @hassanalnajjar8881 3 роки тому

    amz bro thx for this dude

  • @1vigneshram
    @1vigneshram 4 роки тому

    Learnt today well flow of javascript and dom

  • @remax110
    @remax110 5 років тому

    Awesome tutorial. Thank you.

  • @sadikurrahmanrafi4711
    @sadikurrahmanrafi4711 3 роки тому +1

    where is email validation? at 28:36????????????????????????????????????????????????????????????????

  • @abokamalshkeir7310
    @abokamalshkeir7310 5 років тому

    where is the regex in the description ?

  • @alizahmohammadsamaneen6347
    @alizahmohammadsamaneen6347 6 років тому

    this is your another best video

  • @karlrussellmenil9460
    @karlrussellmenil9460 3 роки тому

    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.

  • @shivamgoyal796
    @shivamgoyal796 5 років тому

    You are awesome man 😎

  • @LongEnough1987
    @LongEnough1987 4 роки тому

    Thank you! 🙏

  • @andreasfurst9406
    @andreasfurst9406 5 років тому

    i get an error: const arrows = document.querySelectorAll(".fa-arrow-down");
    ^
    ReferenceError: document is not defined
    do you have a idea?

    • @tontonsan3534
      @tontonsan3534 5 років тому

      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?

  • @mitchelldejonghe4271
    @mitchelldejonghe4271 5 років тому

    Great tutorial!

  • @krimo10
    @krimo10 5 років тому

    i get an unexpected token > error at the foreach in js. Somebody help!

  • @daeywyt3929
    @daeywyt3929 5 років тому

    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.

    • @daeywyt3929
      @daeywyt3929 5 років тому

      after successful input in Name my Email input changes to =

    • @daeywyt3929
      @daeywyt3929 5 років тому

      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 !

    • @developedbyed
      @developedbyed  5 років тому

      Eyy glad you figured it out! Good job!

  • @Maertaugh
    @Maertaugh 4 роки тому

    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
      @danilmaheshwari5696 4 роки тому

      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

  • @in-sanevlogs8633
    @in-sanevlogs8633 5 років тому

    my error() to change the colour is not working can you tell me why?

  • @shankargurung1335
    @shankargurung1335 6 місяців тому

    Lovely 🤘🤘

  • @omendrasingh5827
    @omendrasingh5827 5 років тому

    Bro transition effect is not working on my chrome browser?? What should I do?

    • @sarcaastech
      @sarcaastech 5 років тому

      yes ! it is not working for me neither

  • @darshankhose7395
    @darshankhose7395 4 роки тому

    I got aError:Arrow.addEventlistener is not a function please anyone can help?

  • @phantomboy1496
    @phantomboy1496 5 років тому

    Awesome Animation

  • @iamwhat23
    @iamwhat23 5 років тому

    Why u put have / in your tag of required? Plss tell me

  • @vikasvk9174
    @vikasvk9174 5 років тому

    icon are not showing my chrome browser and am using sublime text editor pls tell me how to solve problem