Up next in 10
Get the full source code of application here:
https://gist.github.com/gauti123456/a6425451e0262dffd98a1e0a4b47bc51
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we will actually talk
0:03
about how to actually make this random
0:06
uh capture generator inside browser
0:09
using HTML and JavaScript so if you
0:13
refresh this will be the actual
0:15
interface you will see on your
0:17
screen so here you will actually have
0:21
this capture here you can enter the
0:25
random correctors you will see
0:28
that here you need to enter the capture
0:31
if you enter incorrect capture click on
0:33
check you will see this message try
0:36
again if you enter the correct
0:39
capture let me enter the correct capture
0:42
right here
0:43
d76 D
0:46
E3 click on check you will actually see
0:50
this is actually a correct capture and
0:53
we can click on this generate new but
0:55
button to actually generate a new
0:57
capture every time when we click this
0:59
button a new capture will be generated
1:01
and now we can actually solve this
1:04
capture by writing the correct
1:08
characters and clicking or check and you
1:11
will actually see correct based upon the
1:13
answer given so I will show you how to
1:16
build this random capture generator
1:17
inside browser for completely free we
1:20
will not be using any third party
1:22
Library we'll just be using some methods
1:25
inside JavaScript so all the source code
1:29
that I I will use in this video is given
1:31
in the description so do check out
1:34
description if you want the full source
1:36
code so in order to get started you just
1:39
need to create a simple index.html
1:43
file and now I will write this code step
1:47
by
1:53
step so now to get started we will first
1:56
of all make a simple index
2:00
we simply say random capture
2:06
generator and uh now for building this
2:09
first of all we do need
2:14
a div tag and inside this you will put a
2:17
rapper class which we will style it in
2:19
the
2:20
CSS after this we will actually have a
2:23
H2 heading you will give it an ID to it
2:26
of status whether the capture that you
2:29
submit isre correct or not and we will
2:31
basically the color of this status will
2:35
be this color
2:38
E7
2:41
e6a so it will actually show whether the
2:44
User submitted correct capture or not
2:47
and here we will allow the user to
2:49
submit the capture input type text and
2:53
it will only be for read only purposes
2:55
and give an ID to it of generated
2:58
capture so here here the user can only
3:01
see the capture it cannot change the
3:04
capture that's why we provided this
3:05
attribute read only so reader can't
3:08
write in this input field reader can
3:11
only read it so after this we will have
3:15
another diff this time here the user
3:17
will write the actual capture input type
3:19
text and we'll give it an ID to it as
3:22
well entered
3:24
capture simply give it a placeholder
3:27
that enter the
3:34
capture so after that we'll be having a
3:37
button button type button and it will
3:41
simply say to the user check
3:49
capture so if you basically refresh the
3:52
browser it will look something like
3:54
this now we need to Simply style this
3:57
using custom CSS
4:00
and we do need to initialize a onclick
4:02
listener so when we click this button we
4:04
will execute this check function which
4:07
will actually check the capture and now
4:09
in the
4:11
JavaScript we will have another button
4:14
right here just below this this one will
4:16
be responsible for generating a new
4:19
capture so generate new button will be
4:22
there and again it's a button type
4:24
button and when we click on this button
4:27
we will create a function which is
4:29
generate
4:30
which will generate a new capture for us
4:33
we will give it an ID to it of
4:36
gen so right here now to generate a new
4:40
capture we will create a capture
4:43
variable and
4:45
then for generating the capture we will
4:48
basically use all all the alphabets
4:51
which are available on the
4:53
keyboard including capital letter A then
4:58
small letter so so it will be a
5:01
combination of all the letters which are
5:03
present on the keyboard we will simply
5:05
create a
5:07
alphabets variable holding all these
5:10
characters and then we can console log
5:12
the character length how many characters
5:14
are there I think it's 27 and from these
5:18
27 characters we need to generate a
5:20
random capture every time so we will get
5:22
reference to the
5:25
status element we have given this ID
5:28
here of status whether the user entered
5:30
capture is correct or not correct you
5:33
will manipulate this inner inner text of
5:39
it so you simply say capture
5:44
generator and I will simply include the
5:47
custom CSS guys that as this video is
5:50
not about CSS so what I will do I will
5:53
simply paste it you will basically find
5:55
all this code in the
5:57
description so you need to simp simply
5:59
make a simple style tag right here and
6:03
paste all the stylesheet so once you do
6:06
this you will actually end up with this
6:09
interface here you enter your capture
6:12
this is check check capture button and
6:13
generate new capture so here we need to
6:17
generate a new capture then we
6:21
click the generate new
6:28
button so so now we need to make this
6:30
function so when we click generate
6:33
button we need to make this
6:36
function which will be responsible for
6:40
generating a new capture now for
6:44
creating a new
6:45
capture we will basically need to
6:51
get the first
6:55
corrector so the first character can be
6:57
obtained by alphabets
7:00
and inside this we will use some math
7:02
function for
7:03
Randomness for randomly selecting
7:06
characters we using math. floor and
7:08
inside this we'll again use some more
7:10
random functions math. random multiplied
7:14
by and for selecting the characters guys
7:18
you can use any formula it is not that
7:21
whatever I am writing this code you need
7:23
to copy this you can use your own
7:25
Randomness formula to generate
7:28
characters so so using this formula it
7:31
will generate a random character to us
7:33
that we need and similarly we will
7:36
generate the second character by using
7:38
any other
7:40
formula and in the same way we will
7:43
actually generate
7:45
uh six
7:48
characters in the same way that we
7:50
generated the first character so similar
7:53
way second character will be generated
7:55
then the third character fourth fifth
7:58
sixth so the sixth character will
8:00
comprise a single capture and now we
8:02
need to create that capture by simply
8:05
concatenating all these six characters
8:08
so we need to convert all these
8:09
characters to string by using two string
8:12
method like
8:17
this in this way you can convert
8:20
everything to corrector
8:40
so you can see we have converted all
8:42
these uh random captas generated
8:45
correctors to
8:47
string and now we can actually show that
8:51
U
8:53
capture so we can simply say Target that
8:57
uh element which have this ID and
9:01
manipulate the value parameter and just
9:03
equal to the generated capture like
9:09
this also the entered capture I will
9:14
reset that to nothing so that the user
9:17
can enter the
9:20
value like this so that's all that we
9:24
need to do and also we need to change
9:26
the inner text of the status so you
9:28
simply say status. inner text is equal
9:32
to capture
9:38
generator so now if you click that the
9:40
generate new button guys like this a new
9:43
capture will be generated every time so
9:45
a unique Randomness every time when we
9:48
click the generate new Option a random
9:50
capture has been generated right here so
9:54
also what we need to do when we load the
9:56
application we need to have a capture
9:58
already present
9:59
and for that we can actually bind a body
10:04
event handler so we can directly bind a
10:06
onload event handler to the body element
10:10
so when we load the application for the
10:12
very first time we do need to execute
10:14
this generate function
10:16
automatically so automatically when you
10:18
load the page you will see a capture
10:21
already present so thereby you don't
10:24
need to click the generate new button it
10:27
will still work when you click the gener
10:29
create new button but still if you load
10:31
the application for the very first time
10:32
you will see the capture already present
10:35
so that's why we added this property
10:38
of to directly to the body element which
10:41
is this onload event handler which is
10:44
actually calling this generate function
10:47
and now we need to write the second
10:49
function which actually triggers when we
10:52
click this the check button in order to
10:55
check the capture cross check whatever
10:57
the user has entered is correct or not
11:00
and now we need to Define this function
11:02
so check function is also a arrow
11:04
function so inside this
11:07
function we will actually compare the
11:09
values of both the captas so what the
11:12
user submits is present in
11:16
the reference of this which is entered
11:19
capture we given this ID we need to get
11:22
the value first of all so after we get
11:24
this value we will actually compare it
11:27
so if user value
11:30
matches the capture in this scenario you
11:34
will simply say
11:36
your you are correct and you'll simply
11:40
say
11:42
correct so if those values doesn't match
11:46
with each other in that case the status
11:49
will say that it's
11:52
incorrect try again
11:59
like this and uh you also need to
12:03
reset the entered capture in
12:06
this to the
12:17
value to nothing like this so This is
12:21
actually the function guys and if you
12:24
now
12:25
refresh if you just type your
12:30
incorrect capture click on this button
12:32
you will actually see try again the
12:34
capture is incorrect so if I once again
12:38
write the correct capture
12:42
z65
12:45
og7 so click on this check capture now
12:47
you will see correct your capture
12:50
entered is correct so in this way guys
12:52
you can actually make a random
12:55
capture generator inside HTML CSS and
12:58
JavaScript all the source code that I
13:00
use in this video is given in the
13:02
description so please hit that like
13:04
button subscribe the channel and do
13:06
check out my website free mediat
13:07
tools.com which is a random tools
13:10
website that I developed which contains
13:12
thousands of free tools related to audio
13:14
video and image so do check out this
13:16
website and I will be seeing you in the
13:19
next video