Build A Speed Typing Game With JavaScript – Tutorial

Learning web development can be tough and boring, but it doesn’t have to be. In this video we take a look at creating a simple JavaScript speed typing game. This is a great project for anyone just getting started with JavaScript/CSS or anyone that wants to create a fun project since it covers important concepts of creating timers, calling APIs, and hooking up DOM events. On top of that this video covers best practices in JavaScript and CSS so you can learn the best way to write code.

📚 Materials/References:

GitHub Code:
CodePen Code:
Async Vs Defer Tutorial:
Fetch API Tutorial:
Promises Tutorial:
Async/Await Tutorial:

🧠 Concepts Covered:

– How to use fetch to query an API
– How to efficiently load JavaScript
– How to handle asynchronous JavaScript
– How to bind click and input events in JavaScript

🌎 Find Me Here:

My Blog:
My Courses:

#JavaScriptTypingGame #WDS #JavaScript


Xem thêm bài viết khác:

37 thoughts on “Build A Speed Typing Game With JavaScript – Tutorial

  1. Wow this was amazing. Not only did it help me build a cool game, it taught me the basic concepts of JS which I can apply to other projects and use to expand this project! I don't know anyone else on YouTube who is this chilled, smart, and can dumb down concepts to new programmers to get them excited and teach them at the same time! Thank you.

  2. super well made video that explains a good beginner project! easily able to advance it with a level keeper, WPM, # of mistakes displayed

  3. Great Tutorial, I liked the way you made it,
    but actually there's one thing, and that is you just gonna make another setInterval, so after like 30 sentences your game will start to get stucked until you'll refresh the page, so you want to make sure that you don't gonna run setInterval twice.

    I think you can say if startTime == undefined then run setInterval, so you gonna run this only one time.

  4. thank you so much for this ! this is a great example of how to use for loops and gives you a good understanding of how one would use it in a real world scenario instead of those boring for loop tutorials !

  5. This is a really great tutorial, only problem is that is no longer available. This breaks the whole thing and I do not know how to replace the const with a string or source from a txt file or something and fix the fetch code to work with the change.

  6. Your homework to improve on this great tutorial is to: 1) don't start the timer until you start typing, 2) after successfully typing the quote, add the results to a list at the bottom showing the quote, elapsed time, and calculate the wpm. Awesomeness!!!!

  7. I love your videos and they inspired me to create my own, they may not be as good as yours but I am getting there! Keep it up!

  8. whenever I see @UCFbNIlppjAuEX4znoulh0Cw notification in my phone. I feel happy and enthusiastic because I get to know that I going to learn something new and it will be so easy as well. efforts that you take for us is really helpful. Love and support sir.

  9. Can you please do a full crash course on Javascript with examples of things you are most likely to do at workplace?

  10. That API seems to be down? I just get this error in the console when trying to log out the fetched quote (as you do around the 12:45 mark of the video) -> "GET net::ERR_NAME_NOT_RESOLVED"

  11. Hi Kyle. This mini-project seems pretty fun. I myself wanted to learn fast typing, so I think I could take advantage of it. I will improve the game into more interactive and realistic. Thank you for helping to start up. At this time I could not progress forward because the API you are using is not working from my machine. It says that it can't be found. Do you think the API is down now?

  12. Hey thanks for everything. I wanna ask you if you can make a video about API's, not about how they work like you alredy did but how to actually find free API's, and use them inside code, I am still confused about this because on the web there is a lot of API's and i dont know how to find it and implement it etc, like, where does ip key go inside of the code, what if we get an error 403 or smth like that how to fix it and get access to data. I hope you understand, thanks and take care!

Leave a Reply

Your email address will not be published. Required fields are marked *