Vanilla JavaScript Hangman Game Tutorial - No Frameworks

Поделиться
HTML-код
  • Опубликовано: 6 июн 2024
  • Github source code - github.com/simonjsuh/Vanilla-...

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

  • @brionyflello2612
    @brionyflello2612 3 года назад +1

    Thank you! This has made JavaScript make sense! I just finished the free code camp module and my brain ached a little, but now I've put it into a project, it's easier to understand! Thank you! :D

  • @lewisharris7185
    @lewisharris7185 4 года назад +4

    Really good tutorial, I liked the fact that you left in the mistakes and debugging process.

  • @blueserenity3234
    @blueserenity3234 3 года назад +1

    Hi, Thanks for your tutorial, I was wondering how it would be possible to add spaces to the wordStatus? at the moment if a space is added it renders as an underscore, how do you make it a space? for example 'star wars' shows 9 underscores, I would like it to have 4 underscores followed by a space, then another 4 underscores with the space automatically "guessed"

  • @Ellialoay
    @Ellialoay 3 года назад +1

    How can I add an alert on the page of the messages "you won or "you lost" with audio with losing and winning audio? using your tutorial?

  • @camiloayala7981
    @camiloayala7981 Год назад

    Thanks, i'm learning a lot

  • @jurgentreep
    @jurgentreep 4 года назад +3

    Hey found you through a comment on one of my videos. Good luck making programming tutorials. I would suggest updating your channel description since it's not really relevant.

  • @sashex3494
    @sashex3494 Год назад +1

    The function generateButtons doesn't work on my end. i get the uncaught typeerror document.getElementById (...) is null in the console

  • @DiveInsideTech
    @DiveInsideTech 3 года назад +1

    Hi wait @Simon Suh I know you won't see this, but please can you tell me how I can change the hangman images into heart lives. I have seen that you do a new image for each seperate wrong letter, yet I want to change them into hearts. I have these images, called:
    1 Life.png
    2 Lives.png
    3 Lives.png
    4 Lives.png
    5 Lives.png
    6 Lives.png
    At first, wherever I have got an 'images/0.jpg' I replaced it with 'images/6 Lives.png'. And after I did a search on VS for any other 'images/...' but I found nothing more. It shows my image normally, the one with 6 Lives, but as soon as I press the wrong letter, it disappears, rather than showing the 5 Lives image, and when I press the right letter, it stays there as it is.
    Any ideas on how I can solve this problem?

    • @DiveInsideTech
      @DiveInsideTech 3 года назад +1

      Oh Sorry Don't Worry I've solved my problem. I guess I should try a couple of times before I ask question - I got it now.

  • @khusbookumari2149
    @khusbookumari2149 3 года назад +1

    Great work. But didn't understand what's happening in function "guessed word()". Can someone help?

  • @layherrera8499
    @layherrera8499 4 года назад +1

    Simon, how would you add a "hint"" option here? is it too difficult?

    • @jjg4525
      @jjg4525 4 года назад +5

      I figured this out. You would create a function and create an array inside that function, this is what mine looks like:
      function giveHint () {
      var hints = [your hints go in here, separated by commas (make sure they're listed in the same order as the words in your words array)]
      var hintIndex = words.indexOf(answer);
      window.alert (hints [hintIndex]);
      I chose to display mine in an alert box but how you do it is up to you. Hope this helps!

  • @davidwilson-brown6972
    @davidwilson-brown6972 3 года назад +1

    This is a fantastic tutorial because of the step-by-step approach, along with the provided code (which is super clean). Thank you so much for creating this.
    (Referring to you code posted on Github)
    My questions are:
    Why do the letter buttons populate above the reset button in the DOM? How does that happen, even though the reset button was created first, and the JavaScript is loaded after the HTML because of its placement before the ending body tag?
    In line 25, why does omitting the "let" keyword before "answer" mess up the function? Isn't "answer" a variable?
    Finally, how do you get your images to reload?
    I added my own images, from a folder, named them the same, after the first guess the image disappears.
    Thanks again for a great video.

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

    How do I make this but with a prompt that ask for a person to enter a word? And we need to try to find this word?

  • @andrewgamarravaldiglesias2300
    @andrewgamarravaldiglesias2300 Год назад

    hi, how can I do if I can copy the code but I do not understand what I am writing?
    any suggestion=?

  • @Stasyan2112sli
    @Stasyan2112sli Год назад

    Thanks for video.

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

    thanks man!

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

    How download that first images

  • @linusj55
    @linusj55 10 месяцев назад

    With this many ads every couple of minutes, you should be paying us to watch this video!!

  • @juanpabloorellana1178
    @juanpabloorellana1178 4 года назад +1

    I dont understand why if you declared let wordStasus = null; and then you wrote: document.getElementById('wordSpotlight').innerHTML = wordStatus; still works?! It was a misspell wordStasus vs wordStatus at 19:10 and 21:02

    • @SimonSuh
      @SimonSuh  4 года назад +2

      You're right, I'm not sure why it's not popping up as an error immediately. But the variable wordStatus does get defined shortly after so I think code wise it should be fine.

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

      @@SimonSuh Thank you. Really nice work! It helped me a lot to understand JS

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

    Hi Simon, I followed your steps by detail but the word doesnt seem to be randomizing for some reason. Any ideas? would be really helpful

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

      Nvm Simon I got it to work, YOU THE BEST THO!!!!

    • @deppmomsen6225
      @deppmomsen6225 Год назад

      @@IROCKINSNIPING how did u fix the getElementbyId.setAttribute part plz ?

  • @sebastianong8053
    @sebastianong8053 3 года назад +3

    Hi Mr Simon may i request that you make a new version of this hangman javascript and send it to me personally i really need this for my school work

  •  3 года назад

    ^^

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

    its not vanilla js if theres html....

  • @ramin8794
    @ramin8794 3 года назад +1

    Youwas thinking a lot during the video and it is a very bad habit for your teaching !

  • @vishnucruz4529
    @vishnucruz4529 4 года назад +1

    How can I change this into a text-based program?

    • @SimonSuh
      @SimonSuh  4 года назад +3

      You could change the updateHangmanPicture() function to refer to a text based layout instead of a image based one.