• Thursday , 2 April 2020

Build A Speed Typing Game With JavaScript – Tutorial

Code Canyon



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

3d Ocean

Related Posts

23 Comments

  1. lewasaur
    February 15, 2020 at 17:45

    How do you make the timer stop without reloading the page?

    great tutorial btw!

  2. Buffnerd
    February 15, 2020 at 17:45

    I simply love your channel, thank you so much!

  3. forgiveness denied
    February 15, 2020 at 17:45

    is there's a new standard in JS not to use semicolons in the end ?

  4. Sardar Chouhan
    February 15, 2020 at 17:45

    offline me nhi typing nhi ho rhi hai

  5. Aliaksandr Tarashkevich
    February 15, 2020 at 17:45

    Maaaan, that's the best tutorial i've seen on YT so far, thank you!

  6. Avadhut Thorat
    February 15, 2020 at 17:45

    Kyle bro, We need you on udemy

  7. juan mondragon
    February 15, 2020 at 17:45

    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 !

  8. Robi Parvez
    February 15, 2020 at 17:45

    why am i watching this at 3.42 am without sleeping?

  9. Arun Raj Moorthy
    February 15, 2020 at 17:45

    Fantastic 🤘😝🤘👍😻👍

  10. kubo so
    February 15, 2020 at 17:45

    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.

  11. 1flybyguy
    February 15, 2020 at 17:45

    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!!!!

  12. Pirlea Mateo
    February 15, 2020 at 17:45

    you make it look so easy:=0

  13. Minecraft Sketch Bros
    February 15, 2020 at 17:45

    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!

  14. Vishal Kumar
    February 15, 2020 at 17:45

    thanks
    wanna more videos like this

  15. Rohit Kudalkar
    February 15, 2020 at 17:45

    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.

  16. Giuseppe Cagnazzo
    February 15, 2020 at 17:45

    Sadly, the Api is down.

  17. michael dalip
    February 15, 2020 at 17:45

    Excellent video. Great pace

  18. BananaCoding
    February 15, 2020 at 17:45

    Cool idea, keep your work on!

  19. Shaz Baz
    February 15, 2020 at 17:45

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

  20. Vasil Stoyanov
    February 15, 2020 at 17:45

    Very nice man. Keep doing this!

  21. TECHtutorials
    February 15, 2020 at 17:45

    Why isn't this api working?

  22. Deepak Gupta
    February 15, 2020 at 17:45

    Please make on series redux tutorial

  23. Joe Blow
    February 15, 2020 at 17:45

    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"

Leave A Comment

You must be logged in to post a comment.