Vue JS 3 Tutorial for Beginners #6 - Build a Reaction Timer Game

[@romko-romario]

Lots of thanks! A great course: so logical, complicated things are made very easy to understand, the projects are perfect to reinforce what is taught. Just a perfection in every detail!

[@learnsimple4592]

The first episode where you introduced the course after your long absence should have been called “The Net Ninja Episode VI The Return of The Ninja”, Shaun

[@NetNinja]

lol, I like it.

[@maankabe01]

the ninja real name for real ninja instructor , he explains like he is the creator , very confident , very smooth. the best vue course i would buy the full one . thanks shaun.

[@matthiaskolley1048]

I solved the reactionTime by using `startTime` and `endTime` and a computed `reactionTime`. This should have higher precision (not only in 10ms steps) if this is needed. Anyway: As always, very good explanations! Thank you.

[@BIGScream92]

I made the Reaction Timer before i watched how he made it. For me it was intuitive too, simply saving the startTime Date and compare it with the endTime Date, when user clicks. Should be a better performance too, because there is no Timer Running constantly

[@russdear]

I did the same, using Date.now(), and felt good because I had thought something out for myself, which I'm sure is Shaun's aim anyway. Thank you Shaun for great videos, and superb training. Cheers Russ

[@maxosall6972]

One of the best vue courses, hopefully I won't need another

[@xeon7879]

Decided to buy the udemy course. Thanks for uploading it to youtube aswell so i could take a look first :)

[@NetNinja]

Thank you, I hope you enjoy the full course :)

[@spyxd5245]

I recommend other people watching this use the date objects to calculate the reaction time. It is more precise than the 10 ms interval.

[@Lovatic1boy]

This exercise is amazing cause u figured out a fun way to teach how to pass data from child to parent and to teach about lifecycle hooks at the same time. Thats pretty creative.

[@paninii99]

I really like this course - for the timer, an extra exercise could be to prevent players from just spamclicking to get a good score.

[@mo-cj1zp]

لغتك الانجليزية سهلة وبطيئة يمكن فهمها بسهولة + شرحك بسيط وواضح + وجود نص انجليزى مكتوب = تحفة برمجية . شكرا

[@alisidali580]

thank you sir for this explanations, and i want to talk about lifecycle hooks even though i'm bit late (after two years) 1. i want to mention about the delay property and props, i think we need to sent the delay value after click event not before, so we have to change the value before it get mounted, in order to do that we need isPlaying property. 2. what i want to say also is the hook methods is used when there is no events, in other words how to fire a functions without events, here the hooks get handy. thank you

[@rilson08]

Thank you, Shaun, for the great job, as usual. Greetings from Brazil !

[@zainabziani1136]

The best one who has ever explained hooks!

[@StephenLoney]

Watching this through a couple of times really helped with understanding key concepts. Appreciated!

[@NetNinja]

Awesome to hear that, thanks Stephen :)

[@wolfOfBlackMountain]

Such a great course so far. I am enjoying it greatly. You are an amazing teacher. You gave me the idea to build upon the game with different levels :)

[@NetNinja]

Awesome :) glad you're enjoying it, thanks for watching!

[@julienj9163]

Thanks so much for this course, it's so clear and easy to understand :)

[@push2me936]

Thanks a lot Shaun! Let's give it a wow! This is teaching on Champions League level!

[@PiyushSingh-mt2tb]

Alright then Gang! This is the best series on Vue 3!

[@kefen_]

" I'm outputing a tank" LOL THAT KILLED ME 😂😂😂

[@MetallicManowar]

Awesome series mate, Im new here and happy to see you have a lot of valuable content. Would love to see you building a Django Vue app and learn more about the different ways to integrate those two and the best practices! Happy holidays, all the best to you and your fam!! :)

[@marsdwarf]

Love the challenge part!

[@nyzss]

I've been looking through the doc to learn about some stuff I didn't (I'm following the course and making a a basic project at the same time) and I think the best thing would be to first finish watching this course then start doing little projects because your explanations are really great, and I'm having a bit of a hard time with the docs lol (even though I'm sure it's just me being a beginner)

[@samduss4193]

what I do is each explanation chapiter i go to the doc see what it looks like, then project or exercice i see him doing so u catch .. and next day u try to do it yourself ... it works for me

[@GRANITE-EDUCATION]

I solved this using "Date.now()" at block render and again at user click event (on the block). I took the difference between the two and was able to get (what I think was) a very accurate result. Please let me know your thoughts on this solution! I've loved this series! :)

[@runehansen3105]

Ninja Fingers... I can't react that fast. I am impressed by The Net Ninja's course funnel. Very clever and effective indeed. Good course.

[@Foused87]

I wait for React tutorials like this!

[@ridl27]

you can also find great React playlists on this channel.

[@fredpourlesintimes]

It's very interesting to make the difference between the mounted state of the componant and its displaying. It's really relevant; thanks :)

[@lastrae8129]

For people following this tutorial now, I had probleme with the change() method, so I read the doc. It is now recommanded to use the watch() one instead.

[@heysalah]

Hey ninja, thanks for the video. And if you are seeing this comment please consider doing Nginx playlist, it would be really helpful specially that lot of people uses it as frontend server. And thanks brother

[@shawnbeans7389]

xD 41:43 that was super impressive i cant beat it! my pb is only 280 ms

[@sayemarg]

Your Learning Tutorial Is Very Good ❤ I Think In This Lesson Using Date Is Better Than setInterval For Reaction Time...

[@IkraamDev]

Did you know You created Vue?

[@chaitanyajharbadem-1740]

Evan hue created vue

[@spicemasterii6775]

Yes. But did you know that even You can create Vue?

[@MartinAlix]

@@spicemasterii6775 🥁

[@terandox9999]

Best Vue Tutorial out there. My best score was 290ms :D

[@samduss4193]

hahah the last moment u try to do ninja fingers... but your mouse went Crazy, careful not breaking your keyboard and screen to win this game lol... Thanks for the lesson :)

[@MrSMGun]

is it better to have an interval for the timer or just store the start time and then subtract from the current time. using Date.now()

[@eduardbi7568]

Also wanted to mention it

[@Wilhelm_LAS]

Man thats so genius

[@JamesMorgan2]

@40:07 You can spot an MMO gamer who typos rank and tank. Did exactly the same myself :D

[@jacobedler6435]

Thanks for the very easy and good-flowing Tutorial! Really good understandable. One thing: for disableing the button i just worked with an v-if-Statement on the button-element like so: Is this possible too?

[@irritator7582]

Please make Nuxt.js tutorial or Go tutorial

[@krishnapriyalekha4084]

This exercise was fantastic ! I want to dynamically position the Clickme box in the page than in a set position. How can I achieve that ? Thanks

[@k1i1d1u1s]

First of all go to Block.vue add :style="pose" in the block div tag then add "pose=null," in side the data returning function after that, inside the mounted function go to setTimeout and then add this below this.startTimer(): function range(start, end) { return[...Array(end + 1).keys()].filter(value => end >= value && start

[@MartinMarchev]

Great tutorial! Just a question - when calculating the reaction time, why don't you just subtract start time from the end time? It's much simpler and would effectively give you the same result :-) Nevertheless, thanks for the great series!

[@y_y6153]

same question, any chance to get an answer?

[@dergadget]

Well, for sure it is pretty sophisticated. But the deeper sense of it may be to demonstrate the concept of setTimeout(), setInterval() and clearInterval() just along the way, which both are way more useful than just a sole substraction.

[@oussamachahidi9201]

thank you so much this was very helpful !!!! God bless you

[@shubhang2877]

Thankyou Shaun

[@nicolascendron]

Man you are aewsome!

[@NetNinja]

Thanks for the support Nicolas :)

[@user-tf8rc7wp9r]

Are there any drawbacks if I used slots instead of props for above challenge. I am still able to achive the results

[@igorr4682]

U should show the component in random locations as well

[@ir7755]

i agreed, then we can make aim training game for fps games

[@insightinternet]

Hi was following along fine with this course until I hit the part where you use to display the Block component only when the isPlaying boolean is set to true by clicking the play button. This does not appear to work as clicking my play button does change the boolean to true but the component is not rendered. Is there a repo with a working solution for this so I can check what I am missing?

[@deejayerick]

Thanks thanks Shaun!...

[@ProviceUnity]

28:00 Just for interest: i have other way to do these actions in my mind - on startTimer write down first timestamp then on stopTimer get another timestamp and calculate difference. Is this way wrong or could be used as good solution?

[@kristoferkrus]

Awesome tutorial, I really enjoy following it! I have a question, though: at 8:54, how you you get that pop-up menu? That's not something I get in VS Code. Does it require some specific extension?

[@kristoferkrus]

I found it: It requires the Vetur extension, which I guess I didn't install since I already had "Vue Language Features (Volar)," which I think I deemed did approximately the same thing (but apparently it doesn't). Uninstalling Vue Language Features and installing Vetur instead solved it.

[@MartinAlix]

You could clear the interval in unmounted

[@azizrakhim5647]

at 11:01 when I want to show Block component when isPlaying true using v-if it is not working. There is the warning in console: [Vue warn]: Property "isPlaying" was accessed during render but is not defined on instance. at

[@reinoutko]

I've been able to keep up with the tutorial quite good, but I got really confused when making the functions at 19:40

[@lucianciubotaru3906]

Thank you for this amazing tutorial! There is a question/issue from me regarding the part from 20:12 . My code is exactly as yours (triple checked), but instead of getting the green block after delay, I get a warning message saying: _____ Property "showBlock" was accessed during render but is not defined on instance. at at ______ I'm still getting the 'component mounted' log and the 'delay' number. Please help!

[@johnhelmy4969]

really you are a ninja

[@00el04]

Do you have any more Vue.js tutorials? :)

[@Binuralka]

super cool teacher! :-)

[@maskman4821]

Chapter 5 ~ custom events with data if we want to send customed event from child component to parent component, we use this.$emit(event-name, data) within function or mounted hook. if parent component we receive this customed event using @event-name="function" to handle the received data. Chapter 6 ~ showing a result component we create a result component and pass props in parent component. In child component we receive props in props hook and use it in template to show the results.

[@raz0229]

40:00 Weird, I was getting this error: _Component template should contain exactly one root element_ until I nested in inside another div, but yours works fine without it

[@samuelosei729]

Maybe you are using a different version of Vue, thus Vue 2.

[@Wilhelm_LAS]

Just use v-if at app.vue in dude. if you use v-show it gives an error like that. Idk why tho

[@raz0229]

@@Wilhelm_LAS dam, from Vue 3 to SvelteKit within a year and love it so much that I lost my flow in Vue. Can't believe, time flies

[@carlos9574]

Good practice

[@ralphmanosca9078]

Hello just want to ask regarding the challenge, when I import the Results.vue component nothing functions and just loads an empty page PLEASE HELP THANKS!

[@ivan33776]

Hmmm, smth looks weird in IF statements, don't you think?) For example 200 ms will satisfy both 'ninja' and 'rapid' conditions and as a result you'll always see 'rapid'

[@alexrinehart5188]

Nah, there's an else if, guaranteeing that only one situation will be reached at a time. You can see this clearly at 40:23

[@neaguflorin3492]

Hello, Can you tell me which theme are you using in this tutorial please:)

[@nikolanajdov3841]

Nice tutorial, thank you very much! I was just wondering, is there a better way to write the if/elseif statements? A cleaner way?

[@JosePabloYuhigawa]

With SwitchCase statement probably.

[@p-lelouch]

hi thank you for your lessons. please i would like to make a music download system with vuejs. can you do a tutorial on how to download in js please.

[@Ezechielpitau]

You know what would be fantastic? A good Ionic + Vue tutorial seris. There's not really much out there...

[@majdibrahem1399]

thanks

[@NetNinja]

You're welcome Majd :)

[@girishparate6410]

Your voice is very good

[@matiascardone635]

Hi ! The git repo doesnt seem to be the right one as the files dont coincide with the lesson.... EDIT: Reaction Timer starts on lesson-30 on GIT .

[@reydelocon629]

18:36 HAHAHAHHA can't stop laughing broo 😂

[@squigglyspaghetti8690]

For anyone wanting a specific example of using Date. mounted() { setTimeout(() => { this.showBlock = true this.startTimer() }, this.delay) }, methods: { startTimer() { this.totalTime = null this.startTime = Date.now() }, stopTimer() { if (this.totalTime === null) { this.totalTime = Date.now() - this.startTime console.log(this.totalTime) } } }

[@Valkinsenn]

_Dude!_ Thank you! :D

[@chiebidoluchinaemerem5860]

I would like to know the vs code extension for Vue that you use?

[@danielwarzecha2007]

The old timey music makes the content less intimidating ty

[@linasgelezauskas4486]

Why can't we add setTimeout in Vue component? methods: { start() { this.delay = 2000 + Math.random() * 5000; setTimeout(() => { this.isPlaying = true; }, this.delay); } }

[@telmoferreira1831]

hi... Property 'rank' does not exist on type ...

[@m3hdim3hdi]

08:57 what extension you are using for those snippets?

[@MuhammadUsman-ix6jo]

Can you make same thing in react js

[@ridl27]

ty.

[@pisanghangus2]

nice

[@gwnbw]

should I memorize this

[@asibe_cheta]

Hahaha I got Ninja fingers 😇

[@Viralplace]

at 41:35 you broke the mouse to do a better time lol

[@xxxxxx-pb3oj]

Do you use VUEX in your udemy course?

[@NetNinja]

Not in the Udemy course, no, but I will be doing a free Vuex course on my channel soon.

[@xxxxxx-pb3oj]

@@NetNinja heck yea! ❤

[@betofc89]

2:08 I don't need Spotify anymore.

[@yesfishyy]

gg

[@junimeme5626]

Never output a tank!

[@sudhanwabokade1285]

12:50

[@gokhanunal71]

28:30

[@TheLuksas]

Like for Ninja, but i'm giving up..

[@NetNinja]

Don't give up :)

[@univeth]

23:24

[@ghostblackzero]

I can't beat 300ms

[@deki90to]

Ohhh must say, one of the worst tutorials so far. Hope next will be better

[@joellarsson9381]

What a fantastic series. To begin with, thank you for that. I've had issues however with when I start the game, click the block, this appears as an error in the console instead of showing the results of the reaction speed and the rank of your speed. [Vue warn]: Unhandled error during execution of native event handler at at

[@hossamibrahim7890]

thanks for u 🤍🤍🤍🤍🤍🤍