Build A Speed Typing Game In JavaScript

[@DavisNorde]

Every time I hear intro music for Brad's videos, my mind is like: "Sweet! Here comes knowledge!"

[@sohammaity24]

you are really an awesome teacher. I recently finished your responsive portfolio series on youtube .its awesome.

[@TraversyMedia]

Thank you :) Glad you liked it

[@hassibmoddasser537]

You are the best man; I've learned a lot from you! HTML, CSS, CSS pre-compilers, different frameworks of CSS, Vanilla js, javascript frameworks, PHP and lots of other things. I want to thank you a lot. I'm a web developer in an ICT Solution company because of your lessons. You are my hero. Thanks a lot, Mr. Traversy

[@rishikeshmankar7695]

nice how much is urpackage broo and where is ur company

[@tjtechi4448]

Some haters won't stop thumbing down. Brad is the best. Period...

[@JonathanBigbarkBarclay]

its not haters this was just a hard project. i still cant get it to work.

[@mohinsandhi663]

codepen.io/MOHIN/pen/QVQpvj

[@izhanyameen3047]

I am beginner, when I saw Brad's videos about Angular I became a die heart fan of him. Brad is the right guy for learning web development.

[@klesar84]

Brad, you programming faster then I can watch all your tutorials :D BRAVO!!!

[@carmenlowe5263]

I'm not quite ready to try this project yet, but I was trying to think of a way to get better at typing all of the "weird" characters on the keyboard that are so important to coding, and now I think I have it! Thanks for just dropping this in my lap!

[@NidaAslam-l2x]

First of all, I would like to thank you alot for your hard work and wonderful teaching method. All your tutorials have helped me a lot to learn JavaScript faster and further. Thank you again!!!!

[@MULTICODE]

I'm a beginner, I will follow along as you said. Thanks Brad love from cameroon

[@TraversyMedia]

awesome! Some people think I over explain things and talk too much about setup, etc but I try to make it so as many people can follow as possible

[@MULTICODE]

Traversy Media I like the way you explain, you always mention what is necessary for us to understand. Even if somebody just get into your channel now, he will not be lost. Sorry my English language is a little Bad.

[@MULTICODE]

In almost all of your video I heard the word Emmet and prettier. And thanks for this repetition , i installed it a week ago and is really pretty .

[@xundeadxempirex]

Subbed, and appreciated. This was a lot of fun, and very informational. As a complete beginner, I was able to completely follow you through every step. I especially like how you explain the "why" of what you're doing. A lot of tutes out there just tell you to "do this". Thank you !!

[@iyadayman9188]

i started learning programming just to make my own programs based on what i need and what i want a program to look like ,like a calendar that syncs with my GPS use,so recently i wanted to increase my typing speed and i wanted to create something like this and your video certainly helped me a lot

[@Eudoffels]

Dude i watch your laravel vids, im just in this vid for now to say that you are so amazing bro and i don't think that you understand what huge impact you have on the future, thanks so much and keep up this beautiful elegant work you offer us

[@Pogohontas.]

Whoah, this was literally the next javascript project i planned on doing

[@AceixSmart]

a game in vanilla now? cool!

[@TomkinsOkello]

Thank you Brad, I was looking into projects that can help me learn more JavaScript. Looking forward to your JavaScript course on Udemy.

[@TraversyMedia]

You're welcome..I may actually add this project with maybe some added features to Modern JS From The Beginning

[@TomkinsOkello]

That will be great and very much appreciated.

[@jagadeeshmanoharan9613]

That will really help us Brad. Please go ahead.

[@PHInfo]

Brd has a very good JS course on UDEMY now. I am currently learning and all I can say is superb. I highly recommend you take his course because he has more awesome projects there.

[@TomkinsOkello]

Looking forward to take his JS Course.

[@OfficialChoiceTV]

I check this channel as part of my morning routine. It's always like Christmas morning :D

[@nmarez]

This is nice. Rewrote the whole code on iPhone app which took a while but it works!

[@eacarvalho]

Thank you so much, Brad. I have learnt so much from your videos. I bought your Modern Javascript course at Udemy and I can't wait to start it.

[@Welcometomyjourney20]

Your style of teaching really great Brad. I learned a lot from u. I like ur udemy course on Modern js. Small hint: before building any js app, plan it in a functional scheme or blocks, putting comments initially on what u r going to do. Start focusing on logic first, later the design.

[@taftanizaa.difinubun4548]

This is the best video so far damn, you explain so well. May God bless you

[@aamrits]

Nice video. Plz, make more tutorials on these type of small activities in JavaScript. It will be very useful as it helps me to figure out the logic and how to approach a certain problem.

[@Redice1234]

Liked it before even watching. Thanks Brad!

[@agil-j4n]

I hope I was 15, I would work on this thing like a mad man and make something unique out of it. And now I'm 23, although I can guess how you did this little app, I still want to check to see if there is something different, still feels like I can learn from this. "But time is contagious And everybody's getting old"

[@_danisson]

Well, you are still so young to do it. Cheers

[@CerealTuesday]

Another awesome project, thanks again Brad, can't wait to try this 👍

[@KylePrinsloo]

Thanks for sharing Brad. I love your teaching style and this is an awesome tool to create and learn from!

[@Stoney_Eagle]

I think the timer should start as soon as you start typing so you don't get a game over when you visit the page.

[@gopinathkrm58]

This is awesome and cool Brad.Please upload more like this.

[@meow-iskander]

You can use the set object and the spread operator to avoid repeating the words :)

[@thearmoredfatboy]

Wow I usually just like to watch projects but I'm actually gonna go home and try this one. Looks interesting. Thanks for the video

[@tweg5]

i think it is just max-width css properties and max-width media queries.

[@badmuskaybee5111]

Its kind of cool learning game with JS before C# in unity. Thanks Mr Brad

[@TraversyMedia]

Yeah C# Unity is for MUCH more intensive games

[@DailyTuition]

brand you are just the best in the world.

[@SihaoCao]

This is a nice tutorial Brad, thanks for sharing it with us!

[@dancehalllyrics1303]

When I see a video by the user "Traversy Media", I know that it is IMPOSSIBLE to not have learnt anything from it when the video is done, no matter how much you try not to learn something.

[@stevenstevens2962]

Guys I know this isn't the right video to ask this question but it is the most recent. So, in 6:18 why did we put so many divs instead of putting only one with many classes in it. Does it have to do with divs being block elements or something? Sorry for this stupid question but I cannot understand this for many days.

[@_____1641]

Its awesome brad!

[@ehayrapetyan1082]

I begin understand JS and love it with Brad, ))dont know how can say thanks...

[@matepavic1118]

Great for a beginner! Thank you!

[@kisali777]

Love from Tanzania 🇹🇿🇹🇿🇹🇿🇹🇿

[@relatakera5249]

Really nice project idea, i enjoyed building it and playing. It's also easier to build with React.

[@CodingJourney]

Quality, as usual!

[@senfumaabdul5806]

Thank you brad for these helpful videos

[@chunleizhang1891]

Keep following your great work!!! thanks a lot.

[@ankushkumar-rw6in]

Liked before watching 😍😍

[@richiexp2]

Beautiful! can you please make a video on how to plan/design a project before coding it?

[@realaliarain]

Great KZbin Channel Ever!

[@pixelmachine]

Hi Brad! I would just like to know if you could explain why the words array was passed into the parenthesis of the showWord function? The function seems to work just fine without the words array being passed in. I just wondered if there is something I am missing? Many thanks for the great content, yet again! Keep up the great work, Brad, you're the best!

[@chrissbenitez]

Amazing!! more projects like this one please!

[@apostolosgaroufos9941]

You are the best man! Thanks

[@arunkaiser]

All ur JS tutorials are Awesome bro 😘

[@carpfishprodcuts]

i want to change the level if the score is esay score = 10 medium score = 20 hard score = 30 i want it to change auto how do i make it occur ? thanks

[@officerdoofy6693]

Brad do you prefer Bootstrap now or just giving Materialize a rest for a bit?

[@emmasam36]

Thanks Brad, I will learn this too

[@oksanaiukhymchuk752]

Thanks for this great tutorial. Guys, could you please help me with the code for stopping typing after a certain number of words rather than messing up? Any ideas of which function it'll go under and what to do? Thanks

[@tyrrelldavis9919]

function matchWords() { //I'm on mobile so not typing the whole thing and there may be errors but this is a neat trick // can do a className add for bootstrap class colors if(wordInput.value === currentWord.innerHTML) { message.innerHTML = "CORRECT!!!" *//remember to add a space because the class names are being appended* *message.className += " text-success";* return true; } else { message.className = " text-warning"; message.innerHTML = ""; return false; }

[@sarvarsharapov3004]

AWESOME video! Thank you so much :)

[@dezhens]

Wow this is amazing...keep on keeping on👍🏿

[@ucheduk8186]

Thanks so much Brad 👍

[@hamzaabde1595]

thank you man. you're the best

[@objectObject212]

Great teaching skills 👍

[@abdulazeezsule1922]

Great tutorial every time.

[@ajazmiah]

Can we also generate the words from any Api.. rather than using our own?

[@abhishektripathi2028]

You are really awesome... Your videos halp me a lot..

[@PelFox]

I need to ask a question. I'm currently studying web development in school and my teacher don't want me to put stuff in the global scope. But most videos I watch like this one just puts all functions etc in the global scope, so what is it? Is it better practise to make a class of Game that holds all these functions and then in a different JS-file you init the Game instance with .init() ?

[@rufus9821]

this is so damn awesome. more JS stuff please Brad!

[@lioneerode119]

how can i add sound in it? x.play( ); doesnt seem to work.

[@BangerW13]

how would I install some sort of a dictionary for the game so I wouldnt have to make up words in an array?

[@Ali-lm7uw]

What does the isPlaying variable do? i did not understand.

[@argeelearner3978]

So cool, can you make a tutorial of this same game just also useing a framework like Vue or React? Thanks

[@MegaLearningStuff]

Was trying to get this thing to change color of currentWord as the text matches in wordInput, can't figure out how, any idea guys? like if the text in currentWord is dog and you type d the d in currentWord text gets green and so on.

[@Joshua-dl3ns]

How would you make it show like WPM and not the number of words you got correct? I’m just asking

[@SumitSharma-vc8ci]

Hey Brad.. I want to know from where u get these type of ideas for projects..is it comes with experience ? Really great idea man hatsoff

[@somcourse3159]

good work thank you

[@voiceofahamid]

How do I make the levels change every time the user earns 5 points? So it would start with level 1, then once 5 points earned, it moves to level 2 and so on...

[@Dwesk]

Hey Brad, thanks for another great tutorial, have you seen the JS 30 thing by Wes Bos, it's also basically ~30 lectures/projects with vanilla JS in a similar vein as this is I assume? Would you recommend that?

[@khamdamov]

I highly recommend. Watch it if you want to feel the power of VanillaJS.

[@lolismelolisme7546]

Thanks Brad!

[@binodthakur6113]

Biggest Fan from Nepal.Thank you so much as i was wondering how to make my own list of word to type as i struggle in some letters though i can write without looking to keypad.

[@bouhannacheabdallah]

can you please do a crash course on the architecture of websites and their object oriented stuff etc.. please sir

[@evilgenius04]

Hi Brad, I'm trying to refactor this project using OOP / MVC principles and am running into issues. Specifically putting the countdown function into an object. It basically doesn't update the DOM with each second's decrement. Any ideas as to where I might have gone wrong? Thanks!

[@PelFox]

Hard to know if you dont share code, what error message are you getting?

[@brucelee7782]

Er guys I need some help here, I am having an existential crisis. Why does changing the variable of a stored DOM reference change the actual tags in html itself? For example when you stored #message into a const message, why does changing that const change the actual #message?

[@bobbybrown2023]

Need help creating a function for the top score! function setHighScore() { if(score===Math.max(score, highScore)) { highScore.innerHTML === score; } } I created the variable highScore and also a span with the id of #high-score

[@willmtr2917]

Hey is it possible if u can code that exact same on python, without tkinter. Please

[@soad2609]

Awesome, but you should increase the audio level.

[@taylorgates7976]

thank U for all ur great works but would u like to make tutorial about amp and wpa, please??

[@poojapatel-ts9us]

Time left does not work and math function also not work .Someone please help me . Actually whole javascript code does not run ....

[@lattesu_]

thank you again!

[@navjotsingh-id3ob]

I am a lil new new to this, I wanna know about init() ,and .ready(). please let me know. thank you

[@seaviewpebbles3209]

Brad, please do a Firebase star rating system with JS and HTML that holds the value and push it back to the website in real time

[@niccubagonoc2153]

Cool! Hey Brad, can you convert the Learn the MERN Stack into MEAN Stack with NgRx? That would be really awesome. Lot of MEAN Crud tut's here in youtube, but they are not implementing NgRx.

[@tweg5]

BRAD! I HOPE I NEVER EVER EVER MEET YOU! ... for 1 reason, because its been said 'never meet your hero'. love ya brad

[@afshahusain6178]

Thank you so much sir

[@shibilibrju6439]

thank you brad

[@JovanJoca94]

Here's my, a bit different version. Check it out here: double-jay-z.github.io/typing-speed-test/

[@siyedyoussef3202]

Can plz Mr Brad do a course about vue2/vuex i love the way you explain ans i would love to see a vue udemy course front to back ...PS i have already buy 3course ans i enjoy it

[@JackSparrow-sw8jt]

love from India

[@Somsubhra_Das]

Can't we use any API to get the words? That way it would be better and we would have more words.

[@PelFox]

Ofc you can, just do it :)

[@bookmark7769]

Can i use this for my KZbin channel

[@lonniebest4697]

I bet something cool will become of this.

[@tommyperez6377]

Has anyone bought the freelancing bundle? I want some feedback on it, I'm very interested in buying. Very helpful video by the way.

[@muthuhari8875]

Hi Brad please do some videos for apache/nginx

[@JonathanBigbarkBarclay]

i also finished this project and it still didnt work at all im very confused on this one