Build A Hangman Game in HTML CSS and JavaScript | Hangman Game in HTML CSS and JavaScript

Поделиться
HTML-код
  • Опубликовано: 16 май 2024
  • In this video tutorial, I've shown how to build a responsive Hangman game using HTML, CSS, and JavaScript. In this game, the user has to guess all the letters of a randomly generated word within a given number of tries. There is also a hangman illustration that will progressively appear on the gallows for each incorrect guess.
    Word List used on this Hangman Game
    drive.google.com/file/d/1V3qI...
    Download Only Images of this Hangman Game
    codingnepalweb.com/custom-pro...
    Live Demo of Download Code of this Hangman Game
    www.codingnepalweb.com/demos/...
    Hire me on Fiverr
    www.fiverr.com/prakashahi
    Follow me on Instagram
    / coding.np
    Visit my website for helpful coding projects with source code
    www.codingnepalweb.com
    Timestamps:
    0:00 - Hangman game demo
    2:28 - Starting with HTML & CSS
    16:06 - Getting into JavaScript
    16:45 - Creating interactive keyboard buttons
    18:35 - Displaying a random word and hint
    22:18 - Checking if clicked letter matches the word
    30:08 - Implementing the Game Over functionality
    35:48 - Resetting the game for play again
    #javascript #html #css #javascriptprojects #js #chatbot
    Music Credit:
    Ikson - We Are Free [Official]
    • #83 We Are Free (Offic...
    Ehrling - You And Me (Vlog No Copyright Music)
    • Ehrling - You And Me (...
    Miss You - LiQWYD
    • Miss You - LiQWYD (No ...
    Those Restless Nights - Artificial.Music
    • Those Restless Nights ...

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

  • @ashishpatel6078
    @ashishpatel6078 10 месяцев назад +13

    Im following you since 1.5 years and watched all of your channels videos and Im react developer still wait and watch your javascript videos . I can't express how much your videos have helped me to think in functional programming
    the way you split codes in functions
    Thank you so much sir❤❤❤

    • @CodingNepal
      @CodingNepal  10 месяцев назад +2

      Thanks for your kind words, brother. Keep going!

    • @minhazhalim2097
      @minhazhalim2097 9 месяцев назад +1

      Me too....

  • @Workinghard7
    @Workinghard7 8 месяцев назад

    Bhot sahi hai bhai nice work
    randomly found your channel and saving your playlist now haha
    thanks keep making

  • @addiesallow
    @addiesallow 14 часов назад

    Wow, what an amazing tutorial! Thanks to your fantastic guidance, I was able to successfully build my very first Hangman game. Thank you!! 🤗

    • @CodingNepal
      @CodingNepal  7 часов назад

      Great and you're welcome :)

  • @user-sg7dn9wz2r
    @user-sg7dn9wz2r 4 месяца назад

    Amazing, it helped a lot with my homework. Many thanks!

  • @YoxiiPlzz
    @YoxiiPlzz 2 месяца назад +1

    Followed the tutorial and made this in 5 hours. Awesome video!

    • @MixtoAll
      @MixtoAll 17 дней назад +2

      Can you plz share the code

    • @MixtoAll
      @MixtoAll 17 дней назад +2

      I need it urgently

  • @tasneemayham974
    @tasneemayham974 4 месяца назад

    AMAZINGGGG WORRKKK MANNN!! AMAZINGGG!!

  • @hanastudy
    @hanastudy 14 дней назад

    Thanks a lot. it's helped me with my current project

  • @sh9vch9nk0
    @sh9vch9nk0 4 месяца назад +1

    Brilliant explanation, easy to catch up and really useful! Thank you 😊😊❤❤

  • @yubiroaster6285
    @yubiroaster6285 10 месяцев назад +2

    Amazing video 👏

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

    Thank you, I love your videos.

  • @user-dj1od7hu4s
    @user-dj1od7hu4s 2 месяца назад

    how do you get the blue ring whenever you click?

  • @user-li4sq4qd6z
    @user-li4sq4qd6z 10 месяцев назад

    Sir pls make a video of check of Luhn Logarithm

  • @rmcastro99
    @rmcastro99 Месяц назад

    Do you have a playlist where you walk us through this?

  • @natanelgabay3673
    @natanelgabay3673 Месяц назад

    Hi! How come the 'victory GIF' won't appear whenever I get the correct word? The 'lost GIF works perfectly and I have the JS code written in order and precisely. I have followed each word and line of code step by step therefor there should'nt be any reason for it to not function properly ... I would appreciate the fast response

  • @effy8824
    @effy8824 Месяц назад

    will this help me to understand oop better in js?

  • @mariyahrashid6991
    @mariyahrashid6991 9 месяцев назад

    Hello, the where() line gives me errors- saying { expected- not sure where I’ve gone wrong😮

    • @mariyahrashid6991
      @mariyahrashid6991 9 месяцев назад

      Line 73 in your style.css. Even I copy your code into vscode it throws an error

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

    hi bro, how you are adding these code's in your website with black container and each color for each element with overflow with constant container fixed size and in future can you add copy code option for the code snippet like chatgpt as it has copy code option like that!!...... chatgpt said we have to use highlight.js library [please reply bro and do another video for how to add code like that effect ]

    • @XBprod
      @XBprod 4 месяца назад

      visual studio code

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

    Speaking of games, can we please make a high scores UI in the future? =)

    • @CodingNepal
      @CodingNepal  10 месяцев назад +2

      Yes, you can track the high score, store it in the browser's local storage, and show it in the game.

  • @morissmatias5110
    @morissmatias5110 5 месяцев назад

    What if the word is a two-word when guessing it?

  • @91221HelloWorld
    @91221HelloWorld 8 месяцев назад

    Please Create like and comment functionality using ajax and php.

  • @ghulammohiudin9782
    @ghulammohiudin9782 8 месяцев назад

    Hi sir,
    Can you tell me the secret to build these types of logic in JavaScript?

  • @rahatsaeed334
    @rahatsaeed334 8 месяцев назад

    the gameModal.querySelector("img").src = `images/${isVictory ? 'victory' : 'lost'}.gif` have error

  • @mikhaelamendoza3693
    @mikhaelamendoza3693 6 месяцев назад

    how can i fix the uncaught reference error with wordlist on console?

    • @viksa8444
      @viksa8444 4 месяца назад +1

      pay attention to order of script execution in html file, first execute the word list file than the script.js

  • @user-pp7yv7zn4v
    @user-pp7yv7zn4v 8 месяцев назад

    hi its very urgent so can u please tell me how to get hangam pics its urgent so if it is possible then tell me thanks

    • @not_stephen
      @not_stephen 27 дней назад

      draw some in paint dude..

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

    can you pls solve this issue - i'm not able to get clickedLetter like a,b,c etc instead iam getting '}'

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

      You may have made some mistakes on the code. Here is the code that you can check for reference: www.codingnepalweb.com/build-hangman-game-html-javascript/

  • @Raj-lb3qh
    @Raj-lb3qh 9 месяцев назад

    Bro app shirf javascript ka online paid class dino na jisme hme bhi yesha project bnene ke liye shikshao bro plz bhai plz plz 🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼

  • @rahatsaeed334
    @rahatsaeed334 8 месяцев назад +1

    The word and its hint where you are get please a replie

    • @CodingNepal
      @CodingNepal  8 месяцев назад +1

      Here is the game word list: drive.google.com/file/d/1V3qIVPEtiJSlGEAqF_dMTF2HRGt_eq2U/view?usp=sharing

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

    Can you build a project in Next.JS,TYPESCRIPT+ REACT & TAILWIND CSS.Please reply coding nepal.🤔🤔🙏🙏

  • @heartlessaln
    @heartlessaln 10 месяцев назад +8

    I am still learning JavaScript I'm very beginner I can't to do it for now😭🥺

    • @spreadItWide
      @spreadItWide 10 месяцев назад +4

      watch it again at ½ speed and code along

    • @clidlove
      @clidlove 9 месяцев назад

      me too😂 I just want to finish my homework and get a better score😂

    • @al-ft1ng
      @al-ft1ng 9 месяцев назад

      U can do it pal

  • @Schnecke-Schneck
    @Schnecke-Schneck 10 месяцев назад

    ICAN the code not find of you Webseite

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

      Here is the code link: www.codingnepalweb.com/build-hangman-game-html-javascript/

  • @forheuristiclifeksh7836
    @forheuristiclifeksh7836 14 дней назад

    1:00

  • @user-li4sq4qd6z
    @user-li4sq4qd6z 10 месяцев назад

    I am From Jharkhand India

  • @F8te_true
    @F8te_true 5 месяцев назад

    The responsitivity doesn't work for me. it just shrinks in size.

    • @tasneemayham974
      @tasneemayham974 4 месяца назад

      Check again. It works for me. Or you can share your code with us, maybe one of us can help.

  • @peterstone58
    @peterstone58 2 месяца назад

    *this video could have most views if you used voice for explanation*

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

    Please create a professional video editor.
    Please make a video about this.

  • @mdjannatuadonbhuiyan7157
    @mdjannatuadonbhuiyan7157 8 месяцев назад

    adf