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: https://github.com/WebDevSimplified/JS-Speed-Typing-Game
CodePen Code: https://codepen.io/WebDevSimplified/pen/dyPvWoY
Async Vs Defer Tutorial: https://youtu.be/Kpn2ajSa92c
Fetch API Tutorial: https://youtu.be/cuEtnrL9-H0
Promises Tutorial: https://youtu.be/DHvZLI7Db8E
Async/Await Tutorial: https://youtu.be/V_Kr9OSfDeU
🧠 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: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#JavaScriptTypingGame #WDS #JavaScript
Original source
23 responses to “Build A Speed Typing Game With JavaScript – Tutorial”
How do you make the timer stop without reloading the page?
great tutorial btw!
I simply love your channel, thank you so much!
is there's a new standard in JS not to use semicolons in the end ?
offline me nhi typing nhi ho rhi hai
Maaaan, that's the best tutorial i've seen on YT so far, thank you!
Kyle bro, We need you on udemy
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 !
why am i watching this at 3.42 am without sleeping?
Fantastic 🤘😝🤘👍😻👍
This is a really great tutorial, only problem is that http://api.quotable.io/random 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.
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!!!!
you make it look so easy:=0
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!
thanks
wanna more videos like this
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.
Sadly, the Api is down.
Excellent video. Great pace
Cool idea, keep your work on!
Can you please do a full crash course on Javascript with examples of things you are most likely to do at workplace?
Very nice man. Keep doing this!
Why isn't this api working?
Please make on series redux tutorial
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 http://api.quotable.io/random net::ERR_NAME_NOT_RESOLVED"