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!!!!
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 RUclips 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.
Amazing, I discovered your channel a short time ago, I subscribed, checked the bell and I enjoy watching every new video. I really love the way you code and the way you think about the solution. Thank you for such an amazing and rich content on your videos.
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.
You may find that increasing the frequency of the timer (down to maybe every 1/10 or 1/20 second) yields a more consistent visual update. Because the setInterval timing is not 100% reliable, imagine that it triggers 1 millisecond before some whole time value (e.g. the interval occurs at 9.999 seconds). The user watching the screen will expect a 10 to display, but it will still be showing a 9, and will only change to a 10 at the _next_ interval, which is about another second away.
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 !
Funny little game! One remark : the timer is never stopped, so a new timer is uselessly added at each new sentence. Also one nice trick you can use is the fact that x|0 converts x into an integer, avoiding Math.floor .
@13:49 kept getting "Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerText') at renderNewQuote (script.js:12:35)" that prevented the random quotes displaying in JS, wondering what exactly I did wrong cause the most I could find online was that my js should be put after the header
Great video! What I'm not sure to understand is that you say that we can't believe setInterval because it might not be accurate, but even though you're getting the right time delta that will be displayed, you are in fact updating to the correct/accurate value every inaccurate second. Am I right? In other words, let's say setInterval updates every 1.1 second, then it means you'll update the timer text to the accurate time value between two dates, but you update it every 1.1 second regardless, because the function to update it is called with that time interval, so how does it make it more accurate in the end? Thank you for all of your videos and tutorials. They've been very helpful, and you are great at explaining and detailing everything.
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!
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?
This piece is the exact example of what you would do at workplace: text editor plus a version control tool, a very important tool which should work correctly with all kind of characters. Challenge: add html formatting to text and compare 2 versions with formatting using the same highlighting.
we are still relay on seInterval to render timer...Does it mean that real time counter is not accurate but if we stored for example win time in a table somewhere it will be more accurate than in real time?
I started learning web dev 2 months ago. Without any effort, i see difference i made in 2 months. And i'm watching these videos at night before sleeping lmao 🤣
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.
Funny project. How timer.innerText = setTimerTime(); works? I thought it should be timerElement, but it works with timer variable too. How??? )) And yes, as mentioned in comments, interval should be cleared.
This should be timerElement, but I accidentally put timer. The reason this works is because in JS all the elements with ids have a variable automatically created for that element that has the same name as the id.
Do you have any project idea suggestions. I am open to anything. I also feel that even if something has been done before that I have my own twist I put on the project to make the learning experience enjoyable.
This is a really great tutorial, only problem is that 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.
Hi Kyle, first of all thank you for all your good stuff. I was wondering why I can't load the site "api.quotable.io/random". api.quotable.io’s server IP address could not be found.
he probabbly dont wanna mix scipts with other elements....What if he had multiple scripts and some of them wants to defer some of them not, so he than need to jump from top to bottom of the file.
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
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!!!!
How about preventing further text entry on an incorrect character entry?
@@nicklandreth2527 very easy, just change *let correct = true* to *const* and you're done
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 RUclips 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.
Lmao you sound like he payed you to write that
@@TheDenisTopG lmao
The game tutorials are insanely fun to watch. Keep up the great work!
WDS: makes speed typing game...
Me: This is h1
Me:
body {
background-color: black;
color: white;
}
Dark mode
I've no words to describe how much I'm learning from your videos, thank you very much 😊
I've been procrastinating on making something like that because I didn't know how. Thanks for the fantastic tutorial.
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!
are you there yet?
Amazing, I discovered your channel a short time ago, I subscribed, checked the bell and I enjoy watching every new video. I really love the way you code and the way you think about the solution. Thank you for such an amazing and rich content on your videos.
Thank you so much for the support!
Maaaan, that's the best tutorial i've seen on YT so far, thank you!
This is really easy to follow, especially for people that aren't good at computer science.
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.
You may find that increasing the frequency of the timer (down to maybe every 1/10 or 1/20 second) yields a more consistent visual update. Because the setInterval timing is not 100% reliable, imagine that it triggers 1 millisecond before some whole time value (e.g. the interval occurs at 9.999 seconds). The user watching the screen will expect a 10 to display, but it will still be showing a 9, and will only change to a 10 at the _next_ interval, which is about another second away.
how would you fix that
@@7heMech Check the code at 23:46. What function is being used to start the interval timer, and what value controls how frequent that interval is?
I know nothing about coding and I could actually follow along
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 !
Funny little game! One remark : the timer is never stopped, so a new timer is uselessly added at each new sentence. Also one nice trick you can use is the fact that x|0 converts x into an integer, avoiding Math.floor .
What
@13:49 kept getting "Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerText')
at renderNewQuote (script.js:12:35)"
that prevented the random quotes displaying in JS, wondering what exactly I did wrong cause the most I could find online was that my js should be put after the header
After starting watching your videos.. I've learned a lot from you. Thanks for inspiring others!
This was another great one Kyle thank you! :)
great videos! you're really helping me learn along side my bootcamp
Great tutorial, thanks a lot
Great video! What I'm not sure to understand is that you say that we can't believe setInterval because it might not be accurate, but even though you're getting the right time delta that will be displayed, you are in fact updating to the correct/accurate value every inaccurate second. Am I right? In other words, let's say setInterval updates every 1.1 second, then it means you'll update the timer text to the accurate time value between two dates, but you update it every 1.1 second regardless, because the function to update it is called with that time interval, so how does it make it more accurate in the end?
Thank you for all of your videos and tutorials. They've been very helpful, and you are great at explaining and detailing everything.
Very helpful stuff. Keep making vids on JavaScript
Very nice man. Keep doing this!
Excellent video. Great pace
Dude you're really awesome 👏
Nice explanation and amazing project brother
great work man. keep it up.
With that face and voice, you could be in Hollywood! Danm!
Fantastic lesson, thank you for putting this together!
nice lesson really learnt a lot
super well made video that explains a good beginner project! easily able to advance it with a level keeper, WPM, # of mistakes displayed
Good job mate. Unique idea for app.
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!
How do you make the timer stop without reloading the page?
great tutorial btw!
I simply love your channel, thank you so much!
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?
Me too
thanks
wanna more videos like this
Can you please do a full crash course on Javascript with examples of things you are most likely to do at workplace?
This piece is the exact example of what you would do at workplace: text editor plus a version control tool, a very important tool which should work correctly with all kind of characters. Challenge: add html formatting to text and compare 2 versions with formatting using the same highlighting.
is there a case where you won't use the Box-sizing: border Box by default ?
bootstrap also implemented border box for every element eith pseudo before and after
Cool idea, keep your work on!
Great channel! Thank you very much!
extremely helpful thank you
Nice! I didn't know that setInterval won't give you a exact second
Awesome! Any ideas on how could i make it print out a text of my choice instead of a random quote??
create a var array of strings instead of api or create a file, json with the text of your choice and point api to your file
you make it look so easy:=0
"Thank you very much and have a good day" ©
Fantastic 🤘😝🤘👍😻👍
Thank you 🙏🙏
Your videos are awesome bro & the way you explain is superbbbb please do video on jQuery Ajax & JavaScript all combination once please 😍😍😍
i think jquery is outdated...people are moving to virtual DOM like React and Vue
Not so fast :) Which is really outdated it’s your react and vue :) jQuery remains a very effective and quick tool. Virtual DOM is a total crap :)
THANK YOU SO MUCH
Thanks a ton!!! Really fun project. Leant loads from it.
Can you please tell me how to add the typing speed in WPM?
would it make a difference if I put the tag at the bottom of the body so I don't have to use defer?
we are still relay on seInterval to render timer...Does it mean that real time counter is not accurate but if we stored for example win time in a table somewhere it will be more accurate than in real time?
I started learning web dev 2 months ago.
Without any effort, i see difference i made in 2 months.
And i'm watching these videos at night before sleeping lmao 🤣
What now? Did u work somewhere or just programming as a hobby? Answer please
@@nephalem7812 i'm working as a software engineer now, its been 4 months into this job, got 4 offers though.
@@syedalimehdi-english wow, congrats!
Can you redo this with a recommended library (like ReactJS)!
I expected arrayValue[index] to give an out of bounds exception instead of null.
This is JavaScript
Also make an app that highlights searched text with regex and javascript
is there's a new standard in JS not to use semicolons in the end ?
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.
Thank you so much!
Please use semicolons, it hurts when I look at the code missing them...
using semicolons in js is subjective. for me personally, omitting semicolons make moving code around easier
I stop using semicolons as well it's optional.
i know how that can be painful XD
ya it reminds python lol
but his prefference..
Thank you sir
thank you!
why am i watching this at 3.42 am without sleeping?
Funny project.
How timer.innerText = setTimerTime(); works? I thought it should be timerElement, but it works with timer variable too. How??? ))
And yes, as mentioned in comments, interval should be cleared.
This should be timerElement, but I accidentally put timer. The reason this works is because in JS all the elements with ids have a variable automatically created for that element that has the same name as the id.
where did you find timer.innerHTML ?
Thanks bro...
Your last project ideas are already made by other youtubers few years ago. I'd like to see different projects.
Do you have any project idea suggestions. I am open to anything. I also feel that even if something has been done before that I have my own twist I put on the project to make the learning experience enjoyable.
@@WebDevSimplified the api no longer works...
@@WebDevSimplified Hey Kyle can you make a tutorial on product image zoomer like ecommerce website flipkart or snapdeal.
@@soltiscd Yes it does, try again or go to the API github page to see what you're doing wrong.
@@roydonk2878 Can you explain me? Because I see didn`t working API (
Why isn't this api working?
It works... check your typing. I was pulling my hair out until I found I didn't include the return in the fetch function.
nice work except i tried running the link there wasnt an option can you help?
why i'm pressed a whole quote but it doesn't change to the next quote? sorry for my bad english
This is a really great tutorial, only problem is that 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.
The API is working when I check it. It may have been down temporarily.
For me the API has also been down for the last 3 days.
@15:56 is how I react to my code every time I compile
Meu deus cade o ";" estou incrédulo ate o momento. 19:26
Thank you
Hi Kyle, first of all thank you for all your good stuff. I was wondering why I can't load the site "api.quotable.io/random". api.quotable.io’s server IP address could not be found.
Make sure you spell the URL correctly. It should be working when it is spelled correctly
@@Asty__ I don't think that the API exists anymore
Kyle bro, We need you on udemy
I am not a big fan of how Udemy is structured for instructors so I have my own course platform at courses.webdevsimplified.com
Please make on series redux tutorial
How can I set my own random words?
Hey kyle, kyle here. Wouldn't you just put the script tag at the bottom of the body rather than defering it in the head?
he probabbly dont wanna mix scipts with other elements....What if he had multiple scripts and some of them wants to defer some of them not, so he than need to jump from top to bottom of the file.
wow learned alot
i optimized the timer if you are iterested
"timer.innerText = getTimerTime()",
why not is
"timerElement.innterText = getTimerTime()"?
where is "timer"?
Sadly, the Api is down.
Hii.....i want to ask wuestion
My classmate submitted this project as his final. He got expelled lmaoo
for plagiarism?
@@ziaahmad8738 for simplicity
Cool!
currently building this in svelte like most of these tutorials...
i made a virtual keyboard that links to normal keyboard events, any events from the regular keyboard will have "isTrusted" set to true
Hello 👋
Great
Thank you very much😊, you can find source code here: github.com/MoussaGerges9/Typing-Speed-Test.git
The api you provided is not working bro
it is working
@@scrimsi202 not working now
nice
offline me nhi typing nhi ho rhi hai
: makes speed typing game... yes sir typing game offline me
Api is down right now.
Hello sir, How can I create random words by myself sir ?
you really didnt explain anything. you just stated the code you wrote. not terribly helpful as an instructional video unfortunately
You talk so fast dude, rapgod
it doesn't work
First
if anyone wants to generate random texts or words or special characters with additional functionalities checkout npm i typingspeedtext