0:01
all right so as many of you have voted
0:10
I I am finally starting a new playlist
0:13
that will be about interview questions
0:16
in reactjs for machine round code yeah
0:21
and uh this is going to be the second
0:23
video on this channel about interview
0:24
questions because there is a playlist
0:27
already let me show you that
0:31
um here if we go to the
0:34
playlist you can find there are two
0:37
videos mainly this one is for interview
0:41
questions so the star rating is also
0:43
asked in interviews you can you can
0:45
check that out as well and this is the
0:48
new video is also going to be in this
0:50
same playlist as well so
0:55
this this is going to be about stopwatch
0:58
so in interviews there will ask you to
1:02
create a stopwatch a basic functionality
1:04
of a stopwatch using reactjs and you
1:06
have to build that for that I have
1:08
already initiated a react project and I
1:11
have created a component called
1:13
stopwatch inside the source folder right
1:16
so we will go inside and what we will do
1:19
is let's say this one we can
1:23
do um let me change the name as in
1:30
okay and also if we just import this
1:33
over here so stopwatch is
1:50
here so we have this stopwatch right now
1:54
what we will do is we will initiate at
1:57
first let's create the UI and then we
1:59
will add functions into
2:01
it so what do we have inside a stopwatch
2:06
we will just need a timer right in
2:08
interviews they will not like mostly
2:10
they don't ask you to create for hours
2:13
minutes seconds Etc because there is no
2:16
time for that so what you can do is you
2:19
can just show the second that will be
2:21
the final task like that will be the
2:22
only task for this what we can do is uh
2:27
for the design let's say we have a
2:35
seconds and we can have a
2:42
start and there will be another button
2:46
that can say reset so that can be
2:49
the normal or basic UI for this uh the
2:54
stopwatch right so what do we need here
2:57
let's talk about that at first we need a
2:59
timer because this is a timer 0 seconds
3:02
this will be 1 2 3 and so on so we need
3:05
a timer for that so let's say we call
3:10
it um time and then then there can be
3:14
set time and for now the value will be
3:18
zero so we have initiated the the time
3:22
we will check it here let's say we just
3:24
use time over here and let's do the
3:27
value to 10 right so you can see 10
3:29
seconds is printed over here now what we
3:32
will do is we will also need to check if
3:35
the stopwatch is running or not why
3:38
because there is a button and this
3:40
button will ensure if the stopwatch is
3:43
running or not so we will
3:46
say is running and there can be set is
3:52
running using same use
3:54
state it the value will be false by
4:01
yes so we can use use effect for
4:06
this and it will run using is running so
4:11
whenever there is a the value of is
4:13
running is changing use effect will be
4:19
will create a variable called timer and
4:23
then set the timer using set
4:26
interval uh set interval so set inter
4:29
interval will call a function
4:33
repeatedly uh using a time frame right
4:36
so let's say we are defining 2 seconds
4:38
so the function will be running every 2
4:41
seconds so that is what set interval
4:43
does and there is also set time out that
4:46
will call a function or do whatever you
4:48
you tell it to do after some DeLay So
4:51
set time out is for delaying and set
4:54
interval will be for repeating a task so
4:56
this is also an interview question that
5:00
so at first we will Define the
5:03
function like this oops like
5:07
this and also the interval so interval
5:10
can be th000 th000 means th000
5:13
milliseconds will be here this is in
5:14
milliseconds so 1,000 milliseconds is
5:17
equal to 1 second what we are saying is
5:20
um every 1 second this set interval will
5:23
be running which function should be
5:25
called the function will do set
5:30
time two previous time will
5:34
be increased by one so this is what we
5:39
right we have it and then also what we
5:42
can do because um if we are running the
5:44
timer it's just like running right it it
5:47
will be it will kept running or
5:49
something like that so what we will
5:51
check using the E statement
5:56
if is running then we will be doing all
6:15
is not equal to zero then what we will
6:19
do is we will clear the interval which
6:21
interval we have already defined timer
6:24
right so we will say timer will will be
6:27
cleared and then also we return
6:33
interval um timer okay we have already
6:37
defined this I can see you can see this
6:41
right so what we will do
6:46
now is we will Define a function to
6:49
control this uh to be controlled by this
6:52
buttons start and reset so the first
7:04
then what it will do is it will set is
7:09
running to the opposite of this so if it
7:12
is running then it will be stopped and
7:15
then if it is not running then the value
7:16
will be changed so true false it will
7:19
be now let's try this at first so inside
7:23
the start stop button we will Define the
7:26
on click function to be handle start
7:29
stop and also the text here will be
7:34
um will be changed by the EAS running
7:42
say stop and if this is not running then
7:45
we will say start so let's
7:48
actually yeah so see this is saying
7:51
start now if we click it it say stop and
7:54
the timer is running here other thing
7:57
that we need is another function to
8:01
reset the timer how we can do
8:04
this is at first we will set the time to
8:08
zero that's important and
8:11
also uh we can say set is running to
8:15
again need to Define on
8:22
reset all right so this is working now
8:25
the start button is working start and
8:27
then if we stop the stop which will will
8:30
be stopped and then the reset button
8:32
also works so this is
8:34
the basic function or basic like
8:39
functioning stopwatch that you can build
8:41
during your interviews and
