Build A Speed Typing Game In JavaScript

Поделиться
HTML-код
  • Опубликовано: 20 дек 2024

Комментарии • 191

  • @DavisNorde
    @DavisNorde 6 лет назад +90

    Every time I hear intro music for Brad's videos, my mind is like: "Sweet! Here comes knowledge!"

  • @sohammaity24
    @sohammaity24 6 лет назад +26

    you are really an awesome teacher. I recently finished your responsive portfolio series on youtube .its awesome.

  • @izhanyameen3047
    @izhanyameen3047 6 лет назад

    I am beginner, when I saw Brad's videos about Angular I became a die heart fan of him. Brad is the right guy for learning web development.

  • @tjtechi4448
    @tjtechi4448 6 лет назад +13

    Some haters won't stop thumbing down. Brad is the best. Period...

  • @hassibmoddasser537
    @hassibmoddasser537 6 лет назад +2

    You are the best man; I've learned a lot from you! HTML, CSS, CSS pre-compilers, different frameworks of CSS, Vanilla js, javascript frameworks, PHP and lots of other things. I want to thank you a lot. I'm a web developer in an ICT Solution company because of your lessons. You are my hero. Thanks a lot, Mr. Traversy

  • @NidaAslam-l2x
    @NidaAslam-l2x 11 месяцев назад

    First of all, I would like to thank you alot for your hard work and wonderful teaching method. All your tutorials have helped me a lot to learn JavaScript faster and further. Thank you again!!!!

  • @carmenlowe5263
    @carmenlowe5263 6 лет назад

    I'm not quite ready to try this project yet, but I was trying to think of a way to get better at typing all of the "weird" characters on the keyboard that are so important to coding, and now I think I have it! Thanks for just dropping this in my lap!

  • @klesar84
    @klesar84 6 лет назад +1

    Brad, you programming faster then I can watch all your tutorials :D BRAVO!!!

  • @MULTICODE
    @MULTICODE 6 лет назад +9

    I'm a beginner, I will follow along as you said. Thanks Brad love from cameroon

    • @TraversyMedia
      @TraversyMedia  6 лет назад +7

      awesome! Some people think I over explain things and talk too much about setup, etc but I try to make it so as many people can follow as possible

    • @MULTICODE
      @MULTICODE 6 лет назад +2

      Traversy Media I like the way you explain, you always mention what is necessary for us to understand. Even if somebody just get into your channel now, he will not be lost. Sorry my English language is a little Bad.

    • @MULTICODE
      @MULTICODE 6 лет назад

      In almost all of your video I heard the word Emmet and prettier. And thanks for this repetition , i installed it a week ago and is really pretty .

  • @iyadayman9188
    @iyadayman9188 6 лет назад

    i started learning programming just to make my own programs based on what i need and what i want a program to look like ,like a calendar that syncs with my GPS use,so recently i wanted to increase my typing speed and i wanted to create something like this and your video certainly helped me a lot

  • @Eudoffels
    @Eudoffels 6 лет назад

    Dude i watch your laravel vids, im just in this vid for now to say that you are so amazing bro and i don't think that you understand what huge impact you have on the future, thanks so much and keep up this beautiful elegant work you offer us

  • @Pogohontas.
    @Pogohontas. 6 лет назад +1

    Whoah, this was literally the next javascript project i planned on doing

  • @nmarez
    @nmarez 6 лет назад

    This is nice. Rewrote the whole code on iPhone app which took a while but it works!

  • @AceixSmart
    @AceixSmart 6 лет назад +17

    a game in vanilla now? cool!

  • @xundeadxempirex
    @xundeadxempirex 5 лет назад

    Subbed, and appreciated. This was a lot of fun, and very informational. As a complete beginner, I was able to completely follow you through every step. I especially like how you explain the "why" of what you're doing. A lot of tutes out there just tell you to "do this". Thank you !!

  • @TomkinsOkello
    @TomkinsOkello 6 лет назад +9

    Thank you Brad, I was looking into projects that can help me learn more JavaScript. Looking forward to your JavaScript course on Udemy.

    • @TraversyMedia
      @TraversyMedia  6 лет назад +6

      You're welcome..I may actually add this project with maybe some added features to Modern JS From The Beginning

    • @TomkinsOkello
      @TomkinsOkello 6 лет назад

      That will be great and very much appreciated.

    • @jagadeeshmanoharan9613
      @jagadeeshmanoharan9613 6 лет назад +1

      That will really help us Brad. Please go ahead.

    • @PHInfo
      @PHInfo 6 лет назад +1

      Brd has a very good JS course on UDEMY now. I am currently learning and all I can say is superb. I highly recommend you take his course because he has more awesome projects there.

    • @TomkinsOkello
      @TomkinsOkello 6 лет назад

      Looking forward to take his JS Course.

  • @taftanizaa.difinubun4548
    @taftanizaa.difinubun4548 3 года назад

    This is the best video so far damn, you explain so well. May God bless you

  • @OfficialChoiceTV
    @OfficialChoiceTV 6 лет назад

    I check this channel as part of my morning routine. It's always like Christmas morning :D

  • @eacarvalho
    @eacarvalho 6 лет назад

    Thank you so much, Brad. I have learnt so much from your videos. I bought your Modern Javascript course at Udemy and I can't wait to start it.

  • @agil-j4n
    @agil-j4n 6 лет назад +1

    I hope I was 15, I would work on this thing like a mad man and make something unique out of it. And now I'm 23, although I can guess how you did this little app, I still want to check to see if there is something different, still feels like I can learn from this. "But time is contagious And everybody's getting old"

    • @_danisson
      @_danisson 5 лет назад

      Well, you are still so young to do it. Cheers

  • @gopinathkrm58
    @gopinathkrm58 6 лет назад

    This is awesome and cool Brad.Please upload more like this.

  • @meow-iskander
    @meow-iskander 4 года назад

    You can use the set object and the spread operator to avoid repeating the words :)

  • @Redice1234
    @Redice1234 6 лет назад

    Liked it before even watching. Thanks Brad!

  • @Welcometomyjourney20
    @Welcometomyjourney20 6 лет назад

    Your style of teaching really great Brad. I learned a lot from u. I like ur udemy course on Modern js. Small hint: before building any js app, plan it in a functional scheme or blocks, putting comments initially on what u r going to do. Start focusing on logic first, later the design.

  • @SihaoCao
    @SihaoCao 4 года назад

    This is a nice tutorial Brad, thanks for sharing it with us!

  • @Stoney_Eagle
    @Stoney_Eagle 6 лет назад +2

    I think the timer should start as soon as you start typing so you don't get a game over when you visit the page.

  • @badmuskaybee5111
    @badmuskaybee5111 6 лет назад +1

    Its kind of cool learning game with JS before C# in unity. Thanks Mr Brad

    • @TraversyMedia
      @TraversyMedia  6 лет назад +1

      Yeah C# Unity is for MUCH more intensive games

  • @DailyTuition
    @DailyTuition 6 лет назад

    brand you are just the best in the world.

  • @thearmoredfatboy
    @thearmoredfatboy 6 лет назад

    Wow I usually just like to watch projects but I'm actually gonna go home and try this one. Looks interesting. Thanks for the video

    • @tweg5
      @tweg5 6 лет назад

      i think it is just max-width css properties and max-width media queries.

  • @tyrrelldavis9919
    @tyrrelldavis9919 5 лет назад

    function matchWords() {
    //I'm on mobile so not typing the whole thing and there may be errors but this is a neat trick
    // can do a className add for bootstrap class colors
    if(wordInput.value === currentWord.innerHTML) {
    message.innerHTML = "CORRECT!!!"
    *//remember to add a space because the class names are being appended*
    *message.className += " text-success";*
    return true;
    } else {
    message.className = " text-warning";
    message.innerHTML = "";
    return false;
    }

  • @CerealTuesday
    @CerealTuesday 6 лет назад

    Another awesome project, thanks again Brad, can't wait to try this 👍

  • @KylePrinsloo
    @KylePrinsloo 6 лет назад

    Thanks for sharing Brad. I love your teaching style and this is an awesome tool to create and learn from!

  • @stevenstevens2962
    @stevenstevens2962 6 лет назад

    Guys I know this isn't the right video to ask this question but it is the most recent. So, in 6:18 why did we put so many divs instead of putting only one with many classes in it. Does it have to do with divs being block elements or something? Sorry for this stupid question but I cannot understand this for many days.

  • @matepavic1118
    @matepavic1118 4 года назад

    Great for a beginner! Thank you!

  • @aamrits
    @aamrits 6 лет назад

    Nice video. Plz, make more tutorials on these type of small activities in JavaScript. It will be very useful as it helps me to figure out the logic and how to approach a certain problem.

  • @chunleizhang1891
    @chunleizhang1891 6 лет назад

    Keep following your great work!!! thanks a lot.

  • @kisali777
    @kisali777 6 лет назад +2

    Love from Tanzania 🇹🇿🇹🇿🇹🇿🇹🇿

  • @chrissbenitez
    @chrissbenitez 5 лет назад

    Amazing!! more projects like this one please!

  • @dancehalllyrics1303
    @dancehalllyrics1303 6 лет назад

    When I see a video by the user "Traversy Media", I know that it is IMPOSSIBLE to not have learnt anything from it when the video is done, no matter how much you try not to learn something.

  • @senfumaabdul5806
    @senfumaabdul5806 6 лет назад

    Thank you brad for these helpful videos

  • @arunkaiser
    @arunkaiser 6 лет назад

    All ur JS tutorials are Awesome bro 😘

  • @realaliarain
    @realaliarain 6 лет назад

    Great RUclips Channel Ever!

  • @relatakera5249
    @relatakera5249 6 лет назад

    Really nice project idea, i enjoyed building it and playing. It's also easier to build with React.

  • @emmasam36
    @emmasam36 6 лет назад

    Thanks Brad, I will learn this too

  • @ehayrapetyan1082
    @ehayrapetyan1082 6 лет назад +2

    I begin understand JS and love it with Brad, ))dont know how can say thanks...

  • @richiexp2
    @richiexp2 6 лет назад

    Beautiful! can you please make a video on how to plan/design a project before coding it?

  • @apostolosgaroufos9941
    @apostolosgaroufos9941 3 года назад

    You are the best man! Thanks

  • @dezhens
    @dezhens 6 лет назад

    Wow this is amazing...keep on keeping on👍🏿

  • @objectObject212
    @objectObject212 6 лет назад

    Great teaching skills 👍

  • @_____1641
    @_____1641 6 лет назад +3

    Its awesome brad!

  • @abhishektripathi2028
    @abhishektripathi2028 6 лет назад

    You are really awesome...
    Your videos halp me a lot..

  • @sarvarsharapov3004
    @sarvarsharapov3004 6 лет назад

    AWESOME video! Thank you so much :)

  • @carpfishprodcuts
    @carpfishprodcuts 6 лет назад +2

    i want to change the level if the score is
    esay score = 10
    medium score = 20
    hard score = 30
    i want it to change auto how do i make it occur ?
    thanks

  • @lioneerode119
    @lioneerode119 5 лет назад

    how can i add sound in it? x.play( ); doesnt seem to work.

  • @MegaLearningStuff
    @MegaLearningStuff 6 лет назад

    Was trying to get this thing to change color of currentWord as the text matches in wordInput, can't figure out how, any idea guys?
    like if the text in currentWord is dog and you type d the d in currentWord text gets green and so on.

  • @rufus9821
    @rufus9821 6 лет назад

    this is so damn awesome. more JS stuff please Brad!

  • @BangerW13
    @BangerW13 6 лет назад

    how would I install some sort of a dictionary for the game so I wouldnt have to make up words in an array?

  • @oksanaiukhymchuk752
    @oksanaiukhymchuk752 3 года назад

    Thanks for this great tutorial. Guys, could you please help me with the code for stopping typing after a certain number of words rather than messing up? Any ideas of which function it'll go under and what to do? Thanks

  • @PelFox
    @PelFox 6 лет назад

    I need to ask a question. I'm currently studying web development in school and my teacher don't want me to put stuff in the global scope.
    But most videos I watch like this one just puts all functions etc in the global scope, so what is it? Is it better practise to make a class of Game that holds all these functions and then in a different JS-file you init the Game instance with .init() ?

  • @JovanJoca94
    @JovanJoca94 6 лет назад +1

    Here's my, a bit different version. Check it out here:
    double-jay-z.github.io/typing-speed-test/

  • @SumitSharma-vc8ci
    @SumitSharma-vc8ci 6 лет назад

    Hey Brad.. I want to know from where u get these type of ideas for projects..is it comes with experience ? Really great idea man hatsoff

  • @argeelearner3978
    @argeelearner3978 6 лет назад +1

    So cool, can you make a tutorial of this same game just also useing a framework like Vue or React? Thanks

  • @officerdoofy6693
    @officerdoofy6693 6 лет назад

    Brad do you prefer Bootstrap now or just giving Materialize a rest for a bit?

  • @Ali-lm7uw
    @Ali-lm7uw 6 лет назад

    What does the isPlaying variable do? i did not understand.

  • @abdulazeezsule1922
    @abdulazeezsule1922 6 лет назад

    Great tutorial every time.

  • @ajazmiah
    @ajazmiah 6 лет назад

    Can we also generate the words from any Api.. rather than using our own?

  • @pixelmachine
    @pixelmachine 6 лет назад

    Hi Brad! I would just like to know if you could explain why the words array was passed into the parenthesis of the showWord function? The function seems to work just fine without the words array being passed in. I just wondered if there is something I am missing? Many thanks for the great content, yet again! Keep up the great work, Brad, you're the best!

  • @bouhannacheabdallah
    @bouhannacheabdallah 6 лет назад +1

    can you please do a crash course on the architecture of websites and their object oriented stuff etc.. please sir

  • @voiceofahamid
    @voiceofahamid 3 года назад

    How do I make the levels change every time the user earns 5 points? So it would start with level 1, then once 5 points earned, it moves to level 2 and so on...

  • @binodthakur6113
    @binodthakur6113 6 лет назад +1

    Biggest Fan from Nepal.Thank you so much as i was wondering how to make my own list of word to type as i struggle in some letters though i can write without looking to keypad.

  • @Joshua-dl3ns
    @Joshua-dl3ns 6 лет назад

    How would you make it show like WPM and not the number of words you got correct? I’m just asking

  • @ucheduk8186
    @ucheduk8186 6 лет назад

    Thanks so much Brad 👍

  • @evilgenius04
    @evilgenius04 6 лет назад

    Hi Brad, I'm trying to refactor this project using OOP / MVC principles and am running into issues. Specifically putting the countdown function into an object. It basically doesn't update the DOM with each second's decrement. Any ideas as to where I might have gone wrong? Thanks!

    • @PelFox
      @PelFox 6 лет назад

      Hard to know if you dont share code, what error message are you getting?

  • @somcourse3159
    @somcourse3159 6 лет назад +3

    good work
    thank you

  • @hamzaabde1595
    @hamzaabde1595 6 лет назад

    thank you man. you're the best

  • @soad2609
    @soad2609 6 лет назад

    Awesome, but you should increase the audio level.

  • @bobbybrown2023
    @bobbybrown2023 5 лет назад

    Need help creating a function for the top score!
    function setHighScore() {
    if(score===Math.max(score, highScore)) {
    highScore.innerHTML === score;
    }
    }
    I created the variable highScore and also a span with the id of #high-score

  • @brucelee7782
    @brucelee7782 5 лет назад

    Er guys I need some help here, I am having an existential crisis. Why does changing the variable of a stored DOM reference change the actual tags in html itself? For example when you stored #message into a const message, why does changing that const change the actual #message?

  • @ankushkumar-rw6in
    @ankushkumar-rw6in 6 лет назад

    Liked before watching 😍😍

  • @willmtr2917
    @willmtr2917 5 лет назад

    Hey is it possible if u can code that exact same on python, without tkinter. Please

  • @taylorgates7976
    @taylorgates7976 6 лет назад

    thank U for all ur great works but would u like to make tutorial about amp and wpa, please??

  • @Dwesk
    @Dwesk 6 лет назад

    Hey Brad, thanks for another great tutorial, have you seen the JS 30 thing by Wes Bos, it's also basically ~30 lectures/projects with vanilla JS in a similar vein as this is I assume? Would you recommend that?

    • @khamdamov
      @khamdamov 6 лет назад

      I highly recommend. Watch it if you want to feel the power of VanillaJS.

  • @CodingJourney
    @CodingJourney 6 лет назад +3

    Quality, as usual!

  • @seaviewpebbles3209
    @seaviewpebbles3209 6 лет назад

    Brad, please do a Firebase star rating system with JS and HTML that holds the value and push it back to the website in real time

  • @siyedyoussef3202
    @siyedyoussef3202 6 лет назад

    Can plz Mr Brad do a course about vue2/vuex i love the way you explain ans i would love to see a vue udemy course front to back ...PS i have already buy 3course ans i enjoy it

  • @poojapatel-ts9us
    @poojapatel-ts9us 6 лет назад

    Time left does not work and math function also not work .Someone please help me . Actually whole javascript code does not run ....

  • @Somsubhra_Das
    @Somsubhra_Das 6 лет назад

    Can't we use any API to get the words? That way it would be better and we would have more words.

    • @PelFox
      @PelFox 6 лет назад

      Ofc you can, just do it :)

  • @navjotsingh-id3ob
    @navjotsingh-id3ob 6 лет назад

    I am a lil new new to this, I wanna know about init() ,and .ready(). please let me know. thank you

  • @tweg5
    @tweg5 6 лет назад +1

    BRAD! I HOPE I NEVER EVER EVER MEET YOU! ... for 1 reason, because its been said 'never meet your hero'. love ya brad

  • @niccubagonoc2153
    @niccubagonoc2153 6 лет назад

    Cool! Hey Brad, can you convert the Learn the MERN Stack into MEAN Stack with NgRx? That would be really awesome. Lot of MEAN Crud tut's here in youtube, but they are not implementing NgRx.

  • @bookmark7769
    @bookmark7769 4 года назад

    Can i use this for my RUclips channel

  • @JonathanBigbarkBarclay
    @JonathanBigbarkBarclay 6 лет назад

    ill be honest i had an incredibly hard time with this project. i had to use the github a lot to figure out what was going on and had constant problems so this was pretty difficult.

  • @lonniebest4697
    @lonniebest4697 6 лет назад

    I bet something cool will become of this.

  • @muthuhari8875
    @muthuhari8875 6 лет назад

    Hi Brad please do some videos for apache/nginx

  • @lolismelolisme7546
    @lolismelolisme7546 6 лет назад

    Thanks Brad!

  • @perfectwebsolutions
    @perfectwebsolutions 6 лет назад

    I think we can use faker js for this to generate a random string types, github.com/marak/Faker.js/

  • @afshahusain6178
    @afshahusain6178 4 года назад

    Thank you so much sir

  • @bizzle98
    @bizzle98 6 лет назад

    Can u make a course on link shorteners like adfly?? pleaseee

  • @tommyperez6377
    @tommyperez6377 6 лет назад

    Has anyone bought the freelancing bundle? I want some feedback on it, I'm very interested in buying.
    Very helpful video by the way.

  • @JackSparrow-sw8jt
    @JackSparrow-sw8jt 6 лет назад

    love from India