Build a Typing Speed Test App in JavaScript | Live Web Dev Workshop Part - 1 - 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:00foreign

00:07so today's workshop is

00:10in the workshop we will learn

00:13complete

00:14first we will see

00:15what career is in the web development

00:18you will see

00:20HTML, CSS, JavaScript

00:23complete

00:24web app

00:25how to create

00:27the typing speed test

00:30we will use HTML, CSS

00:32and JavaScript

00:33we will create

00:35many projects

00:36if you have

00:37previous

00:38workshop

00:39you will see

00:40many projects

00:42we have made

00:44our code review

00:46project

00:47in the workshop

00:49and in the workshop

00:50we have made

00:52a quiz

00:54app

00:55in the workshop

00:57we will see

00:58typing speed

00:59test

01:00we will create

01:01this workshop

01:03complete

01:04certificate

01:05you will get

01:06certificate

01:07you will get

01:08here

01:09skill

01:10parent

01:11company

01:12BR

01:13soft tech

01:14certificate

01:15certificate

01:16how to get

01:17terms and conditions

01:18what criteria

01:19are

01:20all

01:21you will get

01:23complete

01:24workshop

01:25how to get

01:27certificate

01:28you will get

01:29you

01:30complete

01:31two

01:32hours

01:33you will get

01:34out

01:35that

01:36you will get

01:37out

01:38in this workshop

01:39we will see

01:40what

01:41we will see

01:42what

01:43will

01:44make

01:45what

01:46will

01:47play

01:48new

01:49desktop

01:50form

01:51your

01:52website

01:53will

01:54get

01:55what

01:56we

01:57send

01:58the

01:59form

02:00code

02:01I have been looking at the best 3 recorded classes, but the YouTube channel is banned.

02:18Now what do I do?

02:19I have been doing HTML, CSS and bootstrap.

02:22Look, there is a new batch in which I have been looking at the beginning.

02:27It's a complete web development.

02:32It's a batch.

02:34It's all about your classes.

02:37Let's go and tell your classes.

02:39You can have a new batch.

02:42You can enroll in that batch.

02:46You can continue to continue your classes.

02:50I am talking about September which is a little delay, when will it start?

03:02When will it start?

03:04Because if you all know what issues are coming, then the new batch will start.

03:13The new batch will start.

03:17Finally teach in English sir.

03:20No, the workshop is complete in Hindi.

03:24It is not English batch.

03:26The students will start using Hindi plus English.

03:35You will use English but only technical terms will be used.

03:42So you can't convert it.

03:44If you have English work shop, then you can join.

03:49Any update regarding YouTube channel?

03:55See, there is no update on YouTube channel.

03:58If you have any update on YouTube channel, then you can follow.

04:08You will get all updates.

04:11जाएंगे और यह आपके लिए अपडेट जो आने वाले वह आप �дेस्न आफिर यूट्यूब से भी वह वे बैस्ट हो एंगे वह

04:17खीने तो उसके ओपड़ सोलीशन चल रहा है मतलब उसके काम चल रहा है सोलीशन होने

04:21This is the solution that you can use for a little bit.

04:26It is because some things can be used to work in the process of working,

04:31so it is a solution that you can use free.

04:34If you have to use for free,

04:38then you can use it for a little bit.

04:42So, we should have to do this.

04:51I am going to show you the best way to do it.

05:21आदित्य करें कि सर एक और question है

05:27JavaScript का code VS code में कैसे run करते है

05:30I mean browser के बाहर अगर मैं run करना चाहूँ

05:34तो कैसे करूँ

05:35ठीक है इसका weapon अभी बताएंगे आपको

05:39सर classes week में कितने दिन होगा

05:43Classes week में अपनी Monday to Friday होती है

05:45Pinku कह रहे कि सर इसका code मिलेगा

05:49Yes, बिल्कुल आपको इसका code मिलेगा

05:52Code भी मिलेगा आपको इसका

05:55विकास करे कि सर शुरू कीजिए

05:58रादे रादे का नाम लेकर

06:00ठीक है चलो पन अपनी workshop स्टार्ट करते है

06:02रादे रादे नाम लेकर

06:05आप बोल रहे हो तो

06:06अगर कोई new student देख रहे है

06:09तो देवानशु सर मस्त पढ़ाते है

06:11He is best

06:13ठीक है धन्यवाद

06:14इस चीच के लिए

06:16देखो जिन्होंने classes ली उनको पता है

06:18इस चीच के बारे में

06:19तो अगर आप कोई new student हो तो पहले

06:21अपनी workshop complete करो

06:22फिर उसके बाद जो नया batch आने वाले है

06:24इन future जो भी batches आएंगे

06:26उनमें आप enroll कर सकते हो

06:27तो चलो

06:29अपन अपनी workshop स्टार्ट करते है

06:32अब देखो

06:34सबसे पहले मैं आपको बताता हूँ

06:35कि आपको यहाँ पर जो company का

06:37जो certificate मिलेगा वो certificate आपको कैसे मिलेगा

06:40ठीक है

06:40उसके लिए आपको कुछ ही नहीं करना

06:42कुछ terms and condition है

06:44मतलब कुछ steps है जो आपको यहाँ पर follow करने

06:46वो steps आप follow करोगे तो आपको इस workshop का certificate मिल जाएगा

06:50ठीक है

06:51तो मैं आपको एक बार बता देता हूँ

06:53क्या steps है

06:53आपको यहाँ पर follow करने

06:55वोरक्शाप के certificate के लिए

06:56वो steps आपको follow करने

06:57तो आप यहाँ पर certificate के लिए eligible रहोंगे

07:00steps क्या है

07:01आपको review करना है

07:04इन प्लापफॉर्म के उपर

07:06जो मैंने आपको यहाँ पर बताए

07:07पहला google review आपको करना है

07:09which is a skill which is a Google review

07:12second, trust pilot

07:15which is a skill which is a review

07:18Facebook review

07:20Facebook account

07:22and YouTube

07:24which is a channel

07:26which is a channel

07:29which is a channel

07:31which is a screenshot

07:34which is a skill which is a number

07:37which is a channel

07:39which is a channel

07:41which is a social media account

07:43which is a follow-up

07:45which is a workshop

07:47which is a story

07:49which is a status

07:51which is a screenshot

07:53which is a share

07:55just so much

07:57that you will get a certificate

07:59which is a skill

08:01which is a contact number

08:03which is a share

08:05already did sir

08:07if you have done this

08:09then you can share it

08:11if you have reviewed it

08:13then you can share it

08:15there is no issue

08:17which is a story

08:19or status

08:21then you can share it

08:23if you have done it

08:25just like that

08:26your work shop

08:27it will be done

08:28that if you feel good

08:29it's not that

08:30your work shop

08:31it will not look good

08:32of you

08:33if you feel good

08:34then

08:35rest of you

08:36you can share it

08:37everything

08:39there is a task

08:40for you

08:41इसलिए आपको सिर्फ ये बाकी लोगों की है अगर उनको टैक पिल के अंदर अपना करियर बनाना है

09:05If you want to make a career, you can start your career

09:09So, you can do it free

09:11It is necessary to do it

09:13It is necessary to do it

09:14It is best

09:15Swarov Kumar said, I will have comments

09:18After that, we will continue our workshop

09:20I will have comments

09:21Swarov said, I was 26 years old in batch

09:26But my exams were closed

09:27Then my YouTube channel was closed

09:29Now I will have full stack web development

09:31New batch will start

09:34When you can get new batch, you will inform you

09:37If you can get new batch, you will get to start a new batch

09:42You will also get new batch

09:43In the same way, you will get a new batch

09:44If you have a community, you will get there

09:46If you can get the same capacity

09:48If you have a skill set, you will get a new batch

09:51You will get new batch

09:52Where do you get new batch

09:53Right there is a new batch

09:55Where are you going to get new batch?

09:58SSRN was something like you?

10:00Yes, absolutely

10:01the wall paper was not put on display

10:05change

10:07we will keep the wallpaper

10:11first of all, let's see what we are going to create today's workshop

10:17here I will give you an overview of the typing speed test

10:21the app is completely created

10:25what can I do here? I will set the level of difficulty

10:29we will set the level of difficulty

10:31medium, hard, easy

10:33this can be passed

10:35time here is 30 seconds

10:3730 seconds

10:39which we will have text

10:41we will type

10:43if it is wrong

10:45then we will tell you that it will be wrong

10:47highlight

10:49if it is wrong

10:51it will tell you

10:53words per second

10:55how many words per second

10:57it will tell you

10:59calculate

11:01and accuracy

11:03100% accuracy

11:05or 90%

11:07which will tell you

11:09you can change the theme

11:11so you can change your theme

11:13so you can change your theme

11:15and as you can change your name

11:17and you can change your theme

11:19now that you can change your time

11:21for your test

11:23so my left here

11:25then here

11:27I have typed

11:29this next

11:31you can write this

11:33least

11:34Then I wrote this, I wrote this, I wrote this, I wrote this.

11:39This is the accuracy.

11:41It is 80%.

11:42Word per second is 0.21.

11:45Time has remained remaining.

11:47If you have a level set, you can set hard.

11:50Then you can start a text.

11:52You can print the text in your complete text.

11:57You can type the text.

11:59How much you can type the text, you can write it.

12:02I wrote this.

12:04I wrote this.

12:06Here you can say, accuracy is 6%.

12:10Word per second is fast.

12:13But there is a lot of error.

12:15The toggle theme is changed.

12:17You can convert the dark theme.

12:19You can convert the normal light theme.

12:22This is complete.

12:24This is HTML, CSS and JavaScript.

12:28Only HTML, CSS and JavaScript.

12:30So, I will use it.

12:32I will use it.

12:33I will add small little logic.

12:34If you have HTML, CSS and JavaScript knowledge.

12:36For this, I will show you something.

12:38I will show you a little things.

12:40Then, I will start them.

12:42If there is a new student,

12:43then, I will not have all things.

12:45Now, I will show you the world.

12:48The web development is a small world.

12:51part of the MIH feature.

12:53It is a tiny object.

12:54This is a mini project that is called mini project.

12:57We have a mini project.

12:58We have my mini project.

13:00We have a mini project.

13:01This is a mini project.

13:02This is my master URL.

13:03css and javascript

13:06these three things use

13:08html basically what is happening

13:10structure to create

13:11work

13:12this display

13:13this display

13:16this display

13:17structure

13:18structure

13:20heading

13:21heading

13:22heading

13:24content

13:26content

13:27image

13:29image

13:30image

13:31image

13:32structure

13:33structure

13:34structure

13:35this

13:42structure

13:45css

13:46css

13:49css

13:50structure

13:51structure

13:52like

13:53this

13:55image

13:56image

13:57image

13:58set

14:00image

14:01this box is inside one box

14:03now this box in the three images

14:05how to arrange the images

14:07how to set the images

14:09so let's open the layout

14:11then we will open the CSS

14:13when you have to do the styling

14:15so that the heading of the website

14:17you have to keep the center

14:19or the right side

14:21or the color

14:23you have to keep the red color

14:25or blue color

14:27or you want to create the shadow

14:29you have to create

14:31here the content pass

14:35the width of the width

14:37the height of the height

14:39that you can do

14:41through the CSS

14:43the layouting or designing

14:45you can do

14:47CSS

14:49javascript

14:51this is the functionality

14:53if you want to use the website

14:55if you want to use the functionality

14:57here

14:59you have a button

15:01you have to click on it

15:03and you can click on it

15:05there are some changes in your website

15:07you have to click on it

15:09then it will change the theme

15:11this is what is happening

15:13this is what is happening

15:15this is the javascript

15:17basically we can understand

15:19that HTML structure is

15:21CSS layouting and designing

15:23this is the front end

15:25which is the user interface

15:27this is the HTML and CSS

15:29this is the base of the web development

15:31if you want to use the HTML

15:33and CSS

15:35and JavaScript

15:37then you can do it

15:39you can do it

15:41you can do it

15:43you can do it

15:45you can do it

15:47the HTML

15:49CSS

15:51and JavaScript

15:53this is the base of your web development

15:55if you want to use the HTML

15:57CSS and JavaScript

15:58then you can create a complete

15:59web development

16:01basic

16:03so you can select the web development

16:04you can do it

16:05this is the basic

16:07the HTML

16:09CSS

16:10and JavaScript

16:11I don't have to do it

16:13but the basic

16:15you can do it

16:17is the basic

16:19HTML

16:20CSS

16:21and JavaScript

16:23you can do it

16:26CSS

16:27here

16:29how to do it

16:30how to do it

16:31how to do it

16:32how to change the

16:33background

16:34how to change the

16:35JavaScript

16:36functions

16:37how to create

16:38events

16:39which

16:40can do it

16:41as well

16:42so we can get a new website

16:44so you will know about this

16:46so the basics will be very easy

16:50if you don't know

16:52then I will probably tell you about all the things

16:54so you can create this project

16:56if you can complete the workshop

16:58if you have done it

17:00and if you have done it

17:02you can go to it

17:04so I will go to it

17:06so I will try that

17:08you can create a new BGM

17:10new bgmi करें कि hi sir good evening late तो नहीं हुआ नहीं अभी लेट नहीं हुए अभी तो workshop सिर्फ स्टार्ट हुई है अभी तो बहुत टाइम है कोई लेट नहीं हुए आप tension वाली बात नहीं है

17:22ठीक है अब देखो यहां पर अपन complete अपना HTML, CSS और JavaScript यूज़ करने वाले है बिल्कुल basic से चलने वाले है तो चलो अपन यहां पर इसको create करते हैं सबसे पहले अपन बनाएंगे इसका structure और structure बनाने के बाद अपन यहां पर इसकी लिखेंगे CSS मतलब इसको design करेंगे यह दो काम

17:52के basis पर आपका यह complete code यहां पर run होने वाला है मतलब अगर आपको knowledge है तो आपको बहुत अच्छे से समझ में आएगा नहीं है तो आपको पता चलेगा कि यह web development की एक दुनिया है और इस दुनिया में आप enter हो सकते हो बड़े easy तरीके से लेकिन अगर आप बिल्कुल सही direction में

18:22और एक नया folder में यहां पर बना लेता हूं जिसको मैं यहां पर कहता हूं type typing app करके अपन यहां पर एक अपना folder बना लेते हैं इस folder के उपर मैं आ जाता हूं और यहां पर सबसे पहले अपना structure create कर लेते हैं मतलब क्या structure रखते हैं अपन एक तो अपन यहां पर बनाएंगे अ

18:52ml

18:53which is

18:54also

18:55javascript

18:56file

18:57but

18:58now

18:59we will

19:00create

19:01internal

19:02javascript

19:03and

19:04convert

19:05here

19:06we will

19:07create

19:08CSS file

19:09and

19:11not

19:12we will

19:14create

19:15HTML

19:16and

19:17CSS

19:18and

19:20convert

19:21we will

19:23convert

19:24here

19:25we will

19:26generate

19:27and

19:28generate

19:30now

19:31basically

19:32first

19:33we will

19:34create

19:35and

19:36then

19:37we will

19:38create

19:39and

19:41create

19:42and

19:43create

19:44and

19:45create

19:46and

19:47create

19:48and

19:49create

19:50a

19:51class

19:52because

19:53we will

19:54target

19:55here

19:56here

19:57we will

19:58create

20:00We will use a tag for one for check

20:02and remember, it means typing speed test.

20:12Typing Someone

20:12For a penоньker is speed test

20:17Typing speed test

20:19is a peninquency

20:21and whereas there is a emoji

20:21which you create, which you have favorite.

20:27I will run.

20:28taho यह नहीं है यहाँ पर को सरच करना जिसके तुर्फ विए स्कोर के अंदर आगे चलते हैं यहाँ पर एक ले ले ले ले ले लिए ले ले ले ले लिए और इस लेवल के अंदर अपने

20:53select options

20:55I have to select

20:57and select options

20:59which are here

21:01I have to pass

21:03first option

21:05third option

21:07easy, medium and hard

21:09easy

21:11first option

21:13medium

21:15and third option

21:17hard

21:19I have to pass

21:21I have to select

21:23easy, medium and hard

21:25I have to select

21:27next

21:29and I have to

21:31label

21:33I have to

21:35label

21:37the option

21:39I have to pass

21:43difficulty

21:45I have to pass

21:47label

21:49this

21:51basic structure

21:53this

21:55show

21:57here

21:59okay

22:09here

22:11here

22:13here

22:15I have to

22:17say

22:19yes sir

22:21then

22:23we will move

22:25then we will move

22:27next

22:29one

22:31one

22:33one

22:35one

22:37one

22:39one

22:41one

22:43one

22:47one

22:49one

22:51one

22:53one

22:55one

22:57one

22:59two

23:01one

23:03Here is easy, yes sir clear

23:08Yes sir clear

23:10Okay, go ahead

23:11Just so much response

23:13This is a response

23:15We'll see here

23:16Okay, so here I have a label

23:18And this label I have a

23:20All of this

23:21Now I have a div

23:22And this div

23:23And this div

23:24Which is the text

23:26Which is the text

23:28That is the display

23:29So here I have a display

23:31You can see here

23:31I have a blank

23:32foreign

23:45foreign

23:48foreign

23:50foreign

24:00foreign

24:02start typing

24:05and we have mentioned

24:07that it will show us

24:09so here we have start typing

24:10and this text

24:12here we have a text display

24:14which means this div

24:16is blank because

24:18here we have a text display

24:19this text area

24:21then here we have an echo div

24:25and this div

24:26here we have a three

24:30here we have a text

24:46here we have three boxes

24:48so here we have three boxes

24:52and we have a class

24:54we have a class

24:56and we have a class

24:58the ability और यहां पर अपन क्वास रखते, जिससे press折 करके देता हूँ,

25:19बॉक्स क्वास करते हैं

25:28time and accuracy

25:33.

25:38.

25:39.

25:44.

25:45.

25:46.

25:47.

25:48.

25:49.

25:50.

25:51.

25:52.

25:53.

25:54.

25:55.

25:56to add a complete CSS to the UI will be good

26:02and then I will put a button on which we will call the button

26:06which we will call start test

26:09so here I will call start test

26:13start test

26:15and then I will call this button on which we will call toggle theme

26:22we will call toggle theme

26:32this will show you the front end

26:35start test, toggle theme

26:37this will only show you the HTML

26:40I will tell you how HTML is basic

26:42the whole content is on the left side

26:44now you want to align it

26:46box and convert it

26:49and then you will show you the CSS

26:53it is really important

26:55you will call the CSS

26:57and then you will call the CSS

26:59for a little bit

27:01I will show you the CSS

27:03the CSS

27:05you will be back in a few minutes

27:07I will show you the CSS

27:09I will be back in a few minutes, okay?

27:12Functionity, layout, there is no problem.

27:15There is no problem, but we will make a whole UI,

27:18and then you will have to understand things.

27:21I hope that you will know things,

27:23and I hope that you will know things,

27:24because all students are taking my class.

27:27Now, here we will make a UI.

27:30I will make a styling here,

27:32and I will target all classes.

27:34I will make a style.

27:36This is internal CSS.

27:40I will target the internal CSS.

27:43I will target the internal CSS.

27:45I will target the styling here.

27:48First of all,

27:50universal,

27:52and universal,

27:54margin zero,

27:56margin zero,

27:58margin zero,

28:00box sizing,

28:02border box,

28:04box sizing,

28:06border box,

28:07what's the width?

28:08The width of the padding and border,

28:10the border,

28:11it will include.

28:12That's why we can use it.

28:13And we can use it.

28:14And we can use it.

28:15The universal selector.

28:17Here,

28:18the body tag,

28:19I will target the target.

28:21I will target the display.

28:22And the display,

28:24the flags.

28:25You can use it.

28:27So,

28:28the changes you will not show.

28:29So,

28:30we can use it.

28:31We can use it.

28:32We can use it.

28:33As far as we can use it.

28:34ii content and its center

28:36yeah

28:38justify content center

28:40horizontally

28:41ii

28:42ii

28:46ii

28:48now

28:50vertically

28:52for

28:54ii

28:56ii

28:58ii

29:00ii

29:02here

29:05background color set

29:08this

29:11background color

29:12the background color

29:16this

29:17background color

29:21this

29:22next

29:24here

29:25here

29:26here

29:27here

29:29here

29:30here

29:31container उसको अपने यहां पर टार्गेट कर लिया अब यह जो container class है मतलब अपना यह जो container है इसके उपर अपनी CSS लगा देते ताकि यह भी layout अपना रेडी हो जाए

29:43है ठीक है तो इस container के उपर भी अपन क्या करते है अपनी CSS अपन अप्लाई कर देते अपनी container पर

29:48तो मैं यहांपार science कर देता हूँ अपनी विर्ट विर्ट मैंने यहांपार सैट कर देते हैं

29:52जैसे अपन इसको 700 pixel यहाँ पर इसकी विर्ट देते मैंने 700 pixel यहाँ पर इसकी विर्ट दी 700

30:00पिक्सल में कुछन कुछ changes हुआ है लेकिन अभी देखो अपन इसको और change करते हैं मैं maximum width भी यहाँ पर set करता हूँ वह मैं कहता हूँ 95% आप इसकी maximum width रखो तो यह maximum width अपने इसकी set करी है 95% और width मैंने करी है 700 pixel यह क्यों करी है क्योंकि अपन इसको responsive भी रखना चाते हैं इसलि

30:30है इसको मैं यहाँ पर padding देता हूँ all direction से 20 pixel की अब यह 20 pixel की padding है यह आपकी width में ही include होगी मतलब 700 pixel के अंदर ही include होगी आपका box ज्यादा बड़ा नहीं होने वाला यहाँ पर क्योंकि अपने box sizing border box इस पर लगाया है और एक border radius अपन यहाँ पर लगा देते border radius जैसे मैं यहाँ

31:000 pixel अपने horizontally रखी उसके अलावा 4 pixel vertically रखी और blur effect मैंने यहाँ पर 16 pixel का यहाँ पर पास कर दिया और color जो है वो अपन यहाँ पर black color में रख लेते हैं यहाँ पर अपन इसका RGB यह color रख लेते हैं और यह अपन इसका color रखते हैं और चेक करते हैं क्या बन रहा है अपने पास त

31:30licheya चाहिए और इसके बाद नेक्स अपन यहाँ पर अपने label और इनको बछी यहाँ पर टार्गेट यहाँ पर टार्गेट की

31:51Uh, what would you mean?

31:53You'd like to see what,

31:54what's good?

31:56It would be good.

31:58Okay, there's that.

32:00How many are we going to see what is the aubmit?

32:03So, you have to move.

32:05What do you mean by that?

32:07Would you like to see what is the coaxial?

32:09Well, if you have started you can use the color change.

32:16I must call it.

32:18we will pass the brown color to our h1 tag

32:22so we will show you

32:24then after this

32:26we will give it a margin

32:28so we will give it a space

32:3015 pixels

32:32we will give it a margin

32:34so we will give it a space

32:36next we will give it a more

32:38things

32:40if you can see

32:42if you can see

32:44the text

32:46we will give it

32:50with the text

32:52we will give it a bit

32:54so

32:56we will give it a bit

32:58so

33:00we will give it a bit

33:02so

33:04let

33:06this

33:08we can say

33:10here

33:12We have to call it text display here we have passed here and here we have to change our phone size

33:19here we have to call it 18 pixels because we do the size increase paragraph tag

33:27I will apply to it by default I will apply to this one

33:3212-pixel

33:33ठीक है उसके अलावा अपन इसके उपर लगा देते हैं अपनी बॉर्डर रेडियस मैंने बॉर्डर रेडियस इस पर अपलाई कर दी जैसे 12-pixel की अगर आप यहां पर आके चेक करोगे तो आपको यह जो टेक्स्ट है यह इस तरीके से दिखाई दे रहा होगा अब देखो �

34:03और यहां पर 15-pixel की लगाते चलेंगे तो यह यहां पर आपको आपका टेक्स्ट दिखाई देने वाला है अगर आप बॉर्डर बनाना चाहते हो तो बॉर्डर भी बना सकते हो ताकि आपको यह अलग से दिखे जैसे मैं यहां पर करता हूं कि आप एक बॉर्डर बनाओ

34:23जो से अहां पर यहां पर गशुक्र 2 लगया है इसको अपनी बॉर्डर लगा दी ताकि अपने को यहां पर अलग दिखाइटा है उसके अलाबा अपन यहां पर जो अपना इंपूट

34:44is

34:46it

34:48is

34:50it

34:52it

34:54it

34:56it

34:58it

35:00it

35:02it

35:04it

35:06it

35:08it

35:10it

35:12it

35:18it

35:20it

35:23it

35:26it

35:27it

35:32it

35:33it

35:35it

35:37I have a border and said that you can make a solid and a gray color.

35:44If you have a border, you can make a border.

35:48You can apply the border radius and border radius.

35:54You can apply the 8 pixels.

35:56How many are you?

35:5812 pixels.

35:59You can apply the 10 pixels.

36:01So you can apply the 10 pixels.

36:04We can apply the 10 pixels to the border radius.

36:09You will enable this text input.

36:11We can give it the margin bottom.

36:13Margin bottom of the room is 15 pixels.

36:17We can apply the same in the margin.

36:19This is the margin issue.

36:22You can choose to assign margin bottom.

36:26It is not the gap in the top,

36:29This container is also the Apologies.

36:33my margin top and top to 15 pixels

36:37I have passed

36:40so I can show you

36:43perfect

36:45now here next

36:48here next

36:49we have to target

36:53the state

36:54the states

36:55the state

36:57the state

36:59the state

37:01box or street go up and have a target target that's a good news school

37:04and I said that I'm not gonna say that I'm not going to state

37:08because I'm gonna have a class to get up and then I'm gonna display

37:12flex that's a good thing to do so many display flex

37:16like I'll go to a house and I'm gonna just find content or

37:21my house because I'm going to be in space between my house

37:23to be in space by the way that you can check it out

37:27Can you see this?

37:29Is this right?

37:31Spelling Mistake not to do this

37:34Spelling Mistake will be done

37:36I will paste it

37:38And here you can check it

37:40You can check it out

37:42Perfect

37:44Justify Content

37:46And this is the margin bottom

37:48I will apply it

37:5015 pixel

37:5115 pixel

37:52Margin bottom

37:53I will apply it

37:55Same as you can see

37:57Street box

37:58Inboxes

37:59I will target it

38:01So I will say

38:03Street box

38:04I will target it

38:06Street box

38:09Street box

38:11Background color

38:13Background color

38:15You will put grey type

38:17Just change it

38:19Grey

38:20You will see

38:22This is the light

38:24It will change the same way

38:26This way

38:27It is really true

38:28Issues

38:29As always

38:30Padding

38:32Padding

38:33I will apply it

38:34Padding

38:36This will apply it

38:37All directions

38:3910 pixels

38:40Padding

38:41Padding

38:42Padding

38:43Up to

38:44Upper

38:45Kadish

38:46Width

38:47I am going to pass 30% to total 100% to automatically hundred percent

38:48into 30% up here

38:55apply.

38:57I'm going to pass 30% up.

38:59Now on my left, in the left I am going to pass

39:02button to target

39:05right in left

39:06so button

39:07target

39:08then

39:08click

39:09select

39:12select

39:12target

39:17to target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target target

39:47foreign

39:53foreign

39:59foreign

40:05foreign

40:11foreign

40:15foreign

40:17foreign

40:19foreign

40:21foreign

40:23foreign

40:25foreign

40:27foreign

40:29foreign

40:31foreign

40:33foreign

40:35foreign

40:37foreign

40:39foreign

40:41foreign

40:43ཇའོ ས༈སྲངས ཥསྲ ཚીསྲ ཅོ m'han?

40:541

40:562

40:583

41:004

41:044

41:065

41:085

41:106

41:125

41:146

41:157

41:168

41:189

41:20We are now at the theme-btn, so here we are now at the theme-btn.

41:37Now we are the two buttons left, one is a idea, start-btn, and another is a theme-btn.

41:43We are now at the basis tagging, this one is what we are at the basis tagging,

41:50start btn

41:52so this button

41:54target

41:56background color

41:58background color

42:00blue

42:02color

42:04color

42:06color

42:08set

42:10what

42:12this select

42:14button

42:16same property

42:18select

42:20here

42:22how easy

42:24just change

42:26this

42:28this

42:30this

42:32theme

42:34theme

42:36theme

42:38theme

42:40btn

42:42time

42:44wps

42:46accuracy

42:48accuracy

42:50this

43:00color

43:02white

43:04color

43:06you can

43:08show

43:10accuracy

43:12this

43:14you can

43:16enhance

43:18this

43:20same

43:22thing

43:24you can

43:26see

43:28here

43:30you can

43:32see

43:34what

43:36you can

43:38see

43:40here

43:42you can

43:46see

43:48here

43:50you can

43:52see

43:54here

43:56you can

43:58see

44:00here

44:02you can

44:04see

44:06you can

44:08see

44:10you can

44:12see

44:14you can

44:16see

44:18you can

44:20see

44:22yes

44:24yes sir

44:26clear

44:28okay

44:30yes sir

44:32clear

44:34okay

44:36clear

44:38clear

44:40here

44:42okay

44:44okay

44:46so

44:48this

44:50is

44:52you can

44:54do

44:56it

44:58you can

45:00do

45:02this

45:04this

45:06this

45:08Toggle color change to your color

45:10Toggle theme change to your color

45:12Open to your color

45:14Now look what is your name

45:16What is your name

45:18I am here

45:20A script tag

45:22Script tag

45:24This is your user interface

45:26This is your user interface

45:28Which you can show

45:30Perfectly show

45:32What is your name

45:34If you click start test

45:36Time start

45:38Word per second

45:40Accuracy

45:42And the level

45:44You should show

45:46You should show

45:48The text

45:50Here is the text

45:52For this

45:54Array of object

45:56We can take it

45:58Because I have to create it

46:00Use it

46:02You will find it

46:04So here

46:06What is your name

46:08What is your name

46:10This data

46:12Object

46:14This data

46:16Which we can select

46:18Easy

46:20So

46:22I will pass

46:24Here

46:26I will pass

46:28This data

46:30This data

46:32You can use it

46:34You can use it

46:36Easy level

46:38Medium level

46:40Hard level

46:42Three text

46:44By the way

46:46We will use it

46:48And assign

46:50If you want to increase this

46:52You can change it

46:54You can change it

46:56You can change it

46:58This text

47:00You can change it

47:02If you want to change it

47:04You can change it

47:06Now, what do you need to do here?

47:16First, we will target each one.

47:20First, we will target each one.

47:23First, we will target each other.

47:25This display is the same.

47:27This text is the same.

47:31First, we will target each other.

47:41First, we will target each other.

47:45We will target each other.

47:50We will target each other.

48:02First, we will target each other.

48:08Early, we will target each other.

48:18Article, we will target each other.

48:21ID and ID is text display and we have to target it and we assign it to it.

48:28Const is text display and we assign it to a text display.

48:39This is the first one.

48:40The second one is the text input.

48:43This is the text input.

48:45way to do it again

48:49so

48:56go

49:00go

49:01go

49:03go

49:04go

49:06go

49:09go

49:13go

49:14go

49:15go

49:15which is that here is how to run, and you can run, time too we also target this one

49:23, so we have a particular idea and the idea of time we also have a particular idea

49:30we have a particular idea and this idea of time we have a particular idea

49:37and we have a particular idea of time with it

49:44Ok, but we can do better work, so i will find any information.

49:48We will confirm this work.

49:50We will show a time that we have a time that I will do this work.

49:54We will call of a column column.

49:56We will enter a span tag.

49:58I will do that.

50:01Now, we can keep 30 seconds, initially.

50:04But it changes.

50:06It changes.

50:08We can't change it.

50:10This timer will target.

50:13Start

50:31I will assign the timer name variable.

50:38I will assign the timer element.

50:44Next, the word per second and accuracy will show you.

50:50This will be the same work.

50:54I will call and call and call.

50:56This will be the same work.

51:15I will call and call and call.

51:19और इसको भी मैं यहाँ पर एक ID देता हूँ

51:21और ID में अपन यहाँ पर क्या लिख देता है अपना Accuracy

51:24Accuracy मैंने यहाँ पर इसको ID assign कर दी

51:29पहले वाले को अपने क्या दे दी

51:31WPS और इसको अपने क्या दे दी अपना Accuracy दे दिया

51:34और इनको लिख भी दो जैसे आप यहाँ पर लिख दो

51:37यहाँ पर कितना है जीरो अपन कह देते हैं

51:39इनिशिली जीरो आपको यहाँ पर शो होना चाहिए

51:41और यह जो spend tag है इसके अंदर अपन कह देते हैं

51:44जीरो ठीक है और percent में आपन यहाँ पर दिखा रहे हैं

51:47तो percent में यहाँ पर कह देता हूं

51:49तो यहाँ पर आप देखोगे तो accuracy 0% बता रहा है

51:52time 30, wps और accuracy इस तरीके से आपको यहाँ पर दिखा रहा है

51:56तीनों को target कर लो

51:58पहला wps के basis पर target कर लो

52:00और दूसरा accuracy के basis पर target कर लो

52:02तो आप यहाँ पर बोलोगे document

52:04फिर उसके बाद अपन कहते है

52:06dot get element by id

52:08चीक है

52:10id के basis पर मैं यहाँ पर target कर लेता हूं

52:12और id अपने क्या दे रखिए

52:14wps और इसको एक variable में assign कर दो

52:16आपने बोला const

52:17और मैं यहाँ पर इसको कहते हैं

52:19wps element चीक है

52:21यह कह दो फिर उसके बाद next अपन

52:24यहाँ पर target कर लेते हैं

52:25document.get element by id

52:28उसके बाद आपने यहाँ पर क्या दिये

52:30accuracy copy paste कर लो

52:31क्योंकि issue ना आए आगे तो इसलिए अपन copy paste ही कर लेते है

52:34issue आ सकता है

52:35तो अपन copy paste ही कर लेते हैं इसको

52:37तो yellow मैंने copy paste कर लिया

52:40और अपन यहाँ पर कह देते हैं const

52:41और मैं यहाँ पर इसको भी कह देता हूं

52:43अपना accuracy element

52:45पूरी spelling ना लिखे सिर्फ accuracy element

52:48मैं यहाँ पर इसको कह रहा हूं

52:49button को भी target कर लो

52:51एक तो आपके पास यहाँ पर toggle button है

52:53और एक आपके पास यहाँ पर आपका start button है

52:56तो start button को भी यहाँ पर target कर लो

52:57So we have item and so we have to say yes.

52:59So that we have to target somewhere.

53:01We can not let document .get element by ID,

53:05and what does it have to say?

53:07Start BTN so we can do a variable.

53:10Const should call me start BTN.

53:15Start BTN.

53:16It should just target and do not try to target.

53:17That's our right.

53:19Theme button.

53:21Theme button could also target.

53:23So we have to target the threem button.

53:26document.getElementById

53:29and here we have to target

53:31our theme button

53:32and we have to assign a variable

53:35to const

53:36and we have to assign a theme

53:39btn

53:40and we have to assign a theme

53:43and we have to target

53:45which we have to target

53:47which we have to select

53:48which we have to select

53:51easy, medium or hard

53:53which we have to select

53:54so we have to target

53:56so we have to select

53:57value

53:58so we have to select

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

Category

Transcript

Be the first to comment

Recommended