Build a Typing Speed Test App in JavaScript | Live Web Dev Workshop Part - 2 - video Dailymotion

skillwaala

🚀 Join Our Live Workshop: Learn to build a fully functional Typing Speed Test App from scratch! In this workshop, you’ll learn:  ✅ How to create a real-time typing speed & accuracy app using HTML, CSS & JavaScript  ✅ Implement difficulty levels: Easy, Medium, Hard  ✅ Add a live timer, WPM (Words Per Minute) & Accuracy calculation  ✅ Add Dark/Light Mode toggle for a modern UI  ✅ Real-time text highlighting for correct & incorrect letters   Git Hub Url :- https://github.com/DevanshuSir/Workshop_TypingApp.git

Transcript

00:00:00foreign

00:00:02yes

00:00:06yes

00:00:08I

00:00:10I

00:00:12have

00:00:14I

00:00:16I

00:00:18I

00:00:20I

00:00:22I

00:00:24I

00:00:26I

00:00:28I

00:00:29I

00:00:32I

00:00:33I

00:00:35I

00:00:36I

00:00:38I

00:00:42I

00:00:49I

00:00:50I

00:00:51I

00:00:52I

00:00:53I

00:00:54I

00:00:57I work for the steps and I'm going to test out.

00:01:03So, I have called Em here.

00:01:06I'm going to test out all these elements.

00:01:12So, I'm going to test out all these elements.

00:01:18Now, we set out all these elements.

00:01:22So what's now doing?

00:01:25So, we will see what we have to do here.

00:01:27Logics are little things that we have to write.

00:01:29Now, let's see what we have to do here.

00:01:31First of all, I will create a timer for a variable

00:01:35which I will create a time limit.

00:01:37I will create a time limit.

00:01:39I will write let timer

00:01:43I will create a variable

00:01:46and I will create 30.

00:01:48Because I will decrease it.

00:01:50In this value, you will be decreased.

00:01:52So, if you have time, you will show it.

00:01:54If you can see it, you will see it.

00:01:56So, you will see the time.

00:01:58So, the value of the variable is decreased.

00:02:00So, the value of the variable is decreased.

00:02:02So, I will create a timer.

00:02:04And then, we will create two-three things.

00:02:08We will create a timer.

00:02:10We will create a variable.

00:02:12And then, we will create a variable.

00:02:16Let.

00:02:17And then, I will say current.

00:02:20current.

00:02:21And then, we can choose my text.

00:02:23Okay.

00:02:24Current text, I will create a blank.

00:02:26I will create a string.

00:02:28With this variable, I can use this.

00:02:30We can use this to do so.

00:02:32We can try and get this.

00:02:33And with this variable, I will create a variable.

00:02:34And now, let's say I will use this.

00:02:35I will create a variable.

00:02:36And then, here we will say it.

00:02:38we will call typed character

00:02:41we will call typed character

00:02:45type characters

00:02:49and type characters

00:02:50I will call 0

00:02:52that the let variable

00:02:54we will call it

00:02:55we will call it

00:02:58let const variables

00:02:59modern javascript

00:03:01we will call it

00:03:03we will call it

00:03:05correct character

00:03:07correct character

00:03:09correct character

00:03:10and here

00:03:11type character

00:03:13you will call it

00:03:15mention

00:03:160

00:03:17I will call it

00:03:19I will call it

00:03:21let

00:03:22let

00:03:23create

00:03:24type character

00:03:25correct character

00:03:26and

00:03:27current

00:03:28text

00:03:29mention

00:03:30I will call it

00:03:32here

00:03:33I will call it

00:03:35time

00:03:37interval

00:03:38time

00:03:41interval

00:03:42upon

00:03:43one

00:03:44one

00:03:45time

00:03:46interval

00:03:47upon

00:03:48one

00:03:49here

00:03:50I will call it

00:03:51I will call it

00:03:52i will call it

00:03:54here

00:03:55i will call it

00:03:57here

00:03:58i will call it

00:03:59here

00:04:00i will call it

00:04:01in a

00:04:02start

00:04:03test

00:04:04i will call it

00:04:05function is a start test and we have a function to create a function.

00:04:12Now, this function is the same as you can do.

00:04:15If you click on this button, you should start the test.

00:04:20This function is the same as you can do.

00:04:25If you click on this button, you will start the test,

00:04:31then you will start the test,

00:04:36then you will start the test and you will start the test.

00:04:41First, I will call this timer.

00:04:45I will call this timer.

00:04:48Then, the type character is the same as you can do.

00:04:52Now, the function will start the test.

00:04:56If you click on this button, you will select the test.

00:05:03Now, the function will start the test.

00:05:05Now, the function will start the test.

00:05:07Now, the function will start the test.

00:05:09which is 0

00:05:10this I have mentioned

00:05:12and we are making a job

00:05:15one thing that we have to do

00:05:17is time interval

00:05:18and this all

00:05:20this is a

00:05:21one thing that we have

00:05:23and this is

00:05:25what we have to do

00:05:26what we have to do

00:05:27is true

00:05:28or is running

00:05:29is running

00:05:32and this is

00:05:34running

00:05:34value

00:05:35initial

00:05:35which we have

00:05:37we have to do

00:05:37foreign

00:06:02foreign

00:06:03foreign

00:06:05We have to set the changes to our is running.

00:06:08We can set the time here.

00:06:10We will change the changes to our function.

00:06:13This is the function of the function here.

00:06:16I will not update the function here.

00:06:19I can't do this function in our functions.

00:06:22We will update the function here.

00:06:26If you have a difficulty element, you can select what value you have to select.

00:06:36If you have easy select or medium select or hard select,

00:06:41then you can select your difficulty.

00:06:46If you have easy select, if you have medium select,

00:06:54if you have a hard select,

00:07:02then you can select your hard.

00:07:06Step by step,

00:07:10if you have easy, medium or hard,

00:07:14then you can target.

00:07:16If you have a difficulty level,

00:07:26then you can select your difficulty element.

00:07:30If you have a difficulty element,

00:07:32then you can select your difficulty element.

00:07:34If you have a difficulty element,

00:07:36I will go to your target.

00:07:38Now you have to assign it.

00:07:40If you have a variable,

00:07:42I will assign it to this variable.

00:07:44What is your client?

00:07:46This is the command to choose.

00:07:51If you can choose the command to choose the command and choose the command and choose the command.

00:07:56This command will be on the command so you can choose the command,

00:08:00you can take your text here, what do you do?

00:08:03You can take your text here and put your text in your object

00:08:09which is easy, medium and hard level

00:08:12as you can take your text here.

00:08:14So, I will pass the text here.

00:08:16You can take your text here.

00:08:19What do you do?

00:08:21You can take your text here.

00:08:23And then, what do you do?

00:08:27You can select one item on random number.

00:08:32You have 3, you have 3, you have to select one item on random number.

00:08:38So, I will select a math dot random.

00:08:41I will select one item on random number.

00:08:44I will select one item on random.

00:08:48And that is, what do you have to use?

00:08:51So it's my text I'm gonna use this

00:08:55I'm gonna use this

00:08:59It's not good

00:09:03I'm gonna use it

00:09:07I wanna use it

00:09:11It's not good

00:09:13It's not good

00:09:15It's not good

00:09:17It's not good

00:09:19to be here

00:09:210 1 2

00:09:23index

00:09:25length

00:09:273 elements

00:09:29here

00:09:31this

00:09:33math.floor

00:09:35this

00:09:37math.floor

00:09:39math.floor

00:09:41you can

00:09:43give

00:09:45math.floor

00:09:49this

00:09:51work.floor

00:09:53here

00:09:55you can

00:09:57write

00:09:59current

00:10:01text

00:10:03here

00:10:05you can

00:10:07assign

00:10:09this

00:10:11text

00:10:13variable

00:10:15this

00:10:17display

00:10:19you can

00:10:21do

00:10:23text

00:10:25display

00:10:27you can

00:10:29display

00:10:31this

00:10:33current

00:10:35text

00:10:37text

00:10:39content

00:10:41you can

00:10:43pass

00:10:45current

00:10:47text

00:10:49current

00:10:50text

00:10:51you can

00:10:53test

00:10:55this

00:10:57function

00:10:59run

00:11:00here

00:11:01check

00:11:02hello

00:11:03world

00:11:04medium

00:11:05select

00:11:06refresh

00:11:07here

00:11:08automatically

00:11:09text

00:11:10here

00:11:11but

00:11:12function

00:11:13directly

00:11:14run

00:11:15here

00:11:16level

00:11:17medium

00:11:18set

00:11:19and

00:11:20difficulty

00:11:21comment

00:11:22you can

00:11:24see

00:11:25this

00:11:26text

00:11:28in

00:11:29the

00:11:30text

00:11:31input

00:11:32here

00:11:33you can

00:11:34see

00:11:35in

00:11:36here

00:11:37you can

00:11:38see

00:11:39this

00:11:40text

00:11:41input

00:11:42here

00:11:43you can

00:11:44see

00:11:45text

00:11:46input

00:11:47here

00:11:48you can

00:11:49see

00:11:50which

00:11:51here

00:11:52value

00:11:53is

00:11:54initial

00:11:55blank

00:11:56here

00:11:57and

00:11:58here

00:11:59text

00:12:00input

00:12:01you can

00:12:02disable

00:12:04to

00:12:05disable

00:12:06and

00:12:08disable

00:12:09and

00:12:10which

00:12:11you can

00:12:12do

00:12:13false

00:12:14you can

00:12:15say

00:12:16that

00:12:17you can

00:12:18disable

00:12:19false

00:12:20here

00:12:21if

00:12:22you can

00:12:23run

00:12:24and

00:12:25check

00:12:26you can

00:12:27refresh

00:12:28here

00:12:29now

00:12:30disable

00:12:31not

00:12:32here

00:12:33text

00:12:34input

00:12:35and

00:12:36spelling

00:12:37you can

00:12:38write

00:12:39and

00:12:40you can

00:12:41disable

00:12:42you can

00:12:43false

00:12:44one

00:12:45one

00:12:46minute

00:12:47mistake

00:12:52this

00:12:53function

00:12:54directly

00:12:55run

00:12:56now

00:12:57here

00:12:58what

00:12:59you can

00:13:00do

00:13:01you can

00:13:02focus

00:13:03in

00:13:04text

00:13:05input

00:13:06and

00:13:07focus

00:13:08as

00:13:09you can

00:13:10select

00:13:11and

00:13:12start

00:13:13you can

00:13:14run

00:13:15the

00:13:16text

00:13:17area

00:13:18focus

00:13:19above

00:13:20what

00:13:21you can

00:13:22do

00:13:23this

00:13:24timer

00:13:25you can

00:13:26pass

00:13:27initially

00:13:28what

00:13:29you can

00:13:30pass

00:13:31but

00:13:32what

00:13:33you can

00:13:34pass

00:13:35this

00:13:36timer

00:13:37element

00:13:38and

00:13:39you can

00:13:40pass

00:13:41what

00:13:42you can

00:13:43pass

00:13:44what

00:13:45you can

00:13:46pass

00:13:47this

00:13:48timer

00:13:49because

00:13:50this

00:13:51change

00:13:52and

00:13:53update

00:13:54any time

00:13:55you can

00:13:56pass

00:13:57and

00:13:58then

00:13:59you can

00:14:00pass

00:14:01and

00:14:02then

00:14:04you can

00:14:05pass

00:14:06and

00:14:07pass

00:14:08the

00:14:09text

00:14:10content

00:14:11you can

00:14:12pass

00:14:13then

00:14:14you can

00:14:15change

00:14:16automatically

00:14:17you can

00:14:18pull

00:14:19you can

00:14:20do

00:14:21how

00:14:22you can

00:14:23here

00:14:25you can

00:14:26see

00:14:27what

00:14:28you can

00:14:29do

00:14:30this

00:14:31here

00:14:32you can

00:14:33do

00:14:34this

00:14:35here

00:14:36you can

00:14:37see

00:14:38what

00:14:39you can

00:14:40see

00:14:41what

00:14:42you can

00:14:43see

00:14:44here

00:14:45here

00:14:46automatically

00:14:47generate

00:14:480

00:14:490

00:14:500

00:14:510

00:14:52what

00:14:53I

00:14:54want

00:14:55to

00:14:56get

00:14:57what

00:14:58you can

00:14:59see

00:15:00where

00:15:01you can

00:15:02do

00:15:03this

00:15:04is

00:15:05here

00:15:06you can

00:15:07see

00:15:08do

00:15:09here

00:15:10you can

00:15:11see

00:15:12here

00:15:13you can

00:15:14see

00:15:15what

00:15:16do

00:15:17you can

01:01:18Bye.

Build a Typing Speed Test App in JavaScript | Live Web Dev Workshop Part - 2

Category

Transcript

Be the first to comment

Recommended