How to add captcha to login Page | HTML, CSS, JavaScript | Captcha | Github link attached

hey what's up everybody welcome back protection elegance this is yamazing in the last video we made this recent looking login page that had the school navarre today we will be improvising the same by adding capture to it this is how our logging page will be looking like at the end of the video better and advanced and of course do watch our previous video to get better understandings now let's get started first things first let's start wiping up this form so here goes my username here goes my password and now let's check out the captcha it's a l a z r m so let's uh start up really by filling the wrong captcha and submit this and uh there we go please enter a valid captcha now the let's fill up the correct captcha here we got a truck even but still we got this and submit and form is validated successfully so that's how this form now will be working on scratch in specific the thing that we will be taking along from over here is that this entire section is being divided into two here comes our first section and here is the next one also we need to understand the fact that each uh column of a particular container is being treated as 12 units so this 12 is being divided into two so here comes our first six units and the remaining six units over here now let's go back to our code which over here and i'm sure that you guys recognize this and if you don't please make sure that you watch our previous video so now here our password here is our password the label for password and we will be extending the screen so first we've got one do a class or from row and this form row is now being divided into two form groups yes form groups and here is the first and here comes the second one and as i told you that each form group has been given six units so column medium six both of them and do this as well i'll be saving this now let me add also a label over here which was enter capture save this let's go back to our login page refresh this and guess what record and capture over here now we will be adding inputs to both this column medium 6 type will be text there will be no name so now i'll be immediate class or from control over here as well there will be an input with type is equal to text i will remove the name here as well and i will begin a class of form control i'll save this and go back to my page and refresh this and we got two sections over here the thing that we can notice is that here this section does not have this gray background and here we can input but that is not the case so i will be adding read only to the first one which over here read only save this go back i refresh this and now we have this gray background and we cannot enter anything over here now last but not the least we'll be adding certain ids over here so here is our first input and this will be adding an id of capped and is your second id over here will be adding an id of a text area now text input these are certain ids that i have been that i have named you can of course name according to your choice and on this button i'll be adding this on click so when this button will be clicked a function will be called and that function is valid cap these three things are new over here now we'll be working on javascript now i'll be adding the syntax for javascript and number five what's conventional is that when you've got html when you got css when you got javascript or any other kind of language you put them in different files not um here we got our javascript over here we got our html over here even we added a css to the same file but since we do not have too much work to do so that's why i did this but you should of course go with making separate files so in our javascript first we'll be creating a function called as cap and in this we'll be making a variable named as alpha and this alpha will consist of all the alphabets that we bought in our capture let's say we want capital a also we want smaller things also we want special characters so we will include this all from over here so this is a long list and i have saved them already in my sticky notes so i will just copy paste them from over here and now let's come back over here and i'll paste them so here we go here uh the capital letters here are the small letters and here are the special characters now if you take a look at our captcha it consists of one two three four five six it consists of six variables so we have to add six variables over here first so let's call the first variable as a let's call the second as b similarly scene similarly uh oh okay so we got six variables over here so this first variable will be taking will be consisting of any random value from over here so to make that possible we will be adding alpha now inside alpha we have to make a function that takes a specific random value from the set and returns to the character a so i'll be making the function as math dot floor and inside that that is random and that is to be multiplied with the total number of characters we got over here that is i guess we got 26 capital 26 small 10 numeric and 9 special and that makes it 71. so this particular function will take a random value from over here multiply with it the number of characters it got and then approximate the value and this random value will be stored in this variable a similarly i will be copy pasting or before i copy paste this i just noticed that we have been writing the spelling of alpha in correct and this is the correct spelling so after saving this i will be copying this function from over here and i will be pasting it in all the values so we got six different random values for our captcha now let's also save it inside a creator let me call it as final and that will include all the variables now inside this variable final we have got this random values from this particular set so every time we call this function we call this function cap random values will be stored inside the variable final now what we need to do is we need to convey the value of this variable find it to over here that is to this specific place and how do we do that we go to downward here we find the element by id and specify the id and get the value and that value is from the final so the value of this variable final will be conveyed over here now what we need to do next is we need to make a function that when called uh gets us the specific random value so that a function is called as valid cap remember we named this function over here whatever you name this the same you have to define so valid cap so first in this valid cap we make a variable string one for this string one is it is basically the value that is being generated from over here so document dot get element by id again and that id is capped and we need to put the exact value so the first variable over here is the string that is being generated now here we also have another string let's call that as a string two and this is a string that the user inputs this is the string that we need to compare with again get element by id and here the id is text input i guess let me just cross check this yes this is text input so takes input and again we need a value out of it so we have got string one we got string two so now let's equate them if string one equals string two remember we have also to compare the upper and lower type so we need to equate them correctly so if string 1 is equal to string 2 we will alert that the form is validated successfully if the string does not match then we need to alert that please enter valid captcha and we will return let's return false and over here let's return true that does not make any difference as such but still let's go with it now if we take a look first at our logging page the thing we notice we are missing is this capture not visible and this statement over here if you take a closer look at this this is just an image not anything else that i have added to make it look better so i'll be adding the same over here so let's go back to the code and here before we sign up for a new account it's adding h6 and it has a takes off capture not visible and also let's add the image source uh the source is next source first uh it's in the same directory with the name of refresh so refresh dot gpg now save this to check if we got things over there as well uh refresh this oh this is too big so let's give it some specific weight let's give it a bit of 40 pixels refresh this yes perfect it looks better even at this side if i go zooming in it doesn't look like an image so it's good now we need to fire that specific event at this h6 that is we need to add on click over here as well and this time we need to give it the function cap now if we save it and go back to our code i think things should be good to go so let's go back to the page i think this is the pages let me just refresh this and now yes we got a captcha over here so now let's try validating this this is my username there goes something as password and now let's check out this fpm fp and submit this and the form is validated successfully if you like the video do hit the like button if you want any specific video do comment and share will be appreciated thank you

Channel: Tech Shenanigans

Views: 26,890

Keywords:

Id: wSyu6sANHTQ

Length: 16min 5sec (965 seconds)

Published: Tue Nov 17 2020