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

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...
🖼️ Get Only Images of this Hangman Game
➤ codingnepalweb.com/custom-pro...
🗂️ Get Source Code of this Hangman Game
➤ buymeacoffee.com/codingnepal/...
🌐 Visit CodingNepal for helpful coding projects
➤ www.codingnepalweb.com
⭐ Hire me on Fiverr
➤ www.fiverr.com/prakashahi
📷 Follow me on Instagram
➤ / coding.np
🤝 Support my work with a coffee
➤ buymeacoffee.com/codingnepal
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 ...

Пікірлер: 68

  • @ashishpatel6078
    @ashishpatel6078 Жыл бұрын

    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

    Жыл бұрын

    Thanks for your kind words, brother. Keep going!

  • @minhazhalim2097

    @minhazhalim2097

    Жыл бұрын

    Me too....

  • @parvgugnani7
    @parvgugnani710 ай бұрын

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

  • @user-sg7dn9wz2r
    @user-sg7dn9wz2r6 ай бұрын

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

  • @YoxiiPlzz
    @YoxiiPlzz4 ай бұрын

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

  • @MixtoAll

    @MixtoAll

    2 ай бұрын

    Can you plz share the code

  • @MixtoAll

    @MixtoAll

    2 ай бұрын

    I need it urgently

  • @addiesallow
    @addiesallow2 ай бұрын

    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

    2 ай бұрын

    Great and you're welcome :)

  • @tasneemayham974
    @tasneemayham9746 ай бұрын

    AMAZINGGGG WORRKKK MANNN!! AMAZINGGG!!

  • @AllMyWorldd
    @AllMyWorldd2 ай бұрын

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

  • @CodingNepal

    @CodingNepal

    2 ай бұрын

    You're welcome.

  • @sh9vch9nk0
    @sh9vch9nk06 ай бұрын

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

  • @CodingNepal

    @CodingNepal

    Ай бұрын

    Glad it was helpful!

  • @yubiroaster6285
    @yubiroaster6285 Жыл бұрын

    Amazing video 👏

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks 😁

  • @natanelgabay3673
    @natanelgabay36734 ай бұрын

    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

  • @jonathanvera3911
    @jonathanvera3911 Жыл бұрын

    Thank you, I love your videos.

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Glad you like them!

  • @rmcastro99
    @rmcastro994 ай бұрын

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

  • @alixerkmir2097
    @alixerkmir209710 ай бұрын

    How did you make letters fast? 4:27

  • @thecoolnewsguy

    @thecoolnewsguy

    5 ай бұрын

    I think he removed the part where he changed all 'a' to the proper letter

  • @Zezemint
    @Zezemint Жыл бұрын

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

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

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

  • @heartlessaln
    @heartlessaln Жыл бұрын

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

  • @spreadItWide

    @spreadItWide

    Жыл бұрын

    watch it again at ½ speed and code along

  • @clidlove

    @clidlove

    Жыл бұрын

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

  • @al-ft1ng

    @al-ft1ng

    Жыл бұрын

    U can do it pal

  • @morissmatias5110
    @morissmatias51107 ай бұрын

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

  • @effy8824
    @effy88243 ай бұрын

    will this help me to understand oop better in js?

  • @peterstone58
    @peterstone585 ай бұрын

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

  • @rimurusensei7

    @rimurusensei7

    4 ай бұрын

    No need really

  • @VamsiDevendrakumar__
    @VamsiDevendrakumar__ Жыл бұрын

    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

    6 ай бұрын

    visual studio code

  • @mikhaelamendoza3693
    @mikhaelamendoza36938 ай бұрын

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

  • @viksa8444

    @viksa8444

    6 ай бұрын

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

  • @mariyahrashid6991
    @mariyahrashid699111 ай бұрын

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

  • @mariyahrashid6991

    @mariyahrashid6991

    11 ай бұрын

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

  • @stutisingh8960
    @stutisingh8960 Жыл бұрын

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

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    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 Жыл бұрын

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

  • @inshotapk-pro
    @inshotapk-pro10 ай бұрын

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

  • @CodingNepal

    @CodingNepal

    10 ай бұрын

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

  • @user-dj1od7hu4s
    @user-dj1od7hu4s4 ай бұрын

    how do you get the blue ring whenever you click?

  • @CodingNepal

    @CodingNepal

    Ай бұрын

    It's a screen recording feature.

  • @9-xyz-cba
    @9-xyz-cba11 ай бұрын

    Please Create like and comment functionality using ajax and php.

  • @inshotapk-pro
    @inshotapk-pro10 ай бұрын

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

  • @ghulammohiudin9782
    @ghulammohiudin978210 ай бұрын

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

  • @inshotapk-pro

    @inshotapk-pro

    10 ай бұрын

    It is logic

  • @rushikeshavachat4282
    @rushikeshavachat4282 Жыл бұрын

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

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Will try

  • @Schnecke-Schneck
    @Schnecke-Schneck Жыл бұрын

    ICAN the code not find of you Webseite

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

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

  • @F8te_true
    @F8te_true7 ай бұрын

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

  • @tasneemayham974

    @tasneemayham974

    6 ай бұрын

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

  • @user-pp7yv7zn4v
    @user-pp7yv7zn4v11 ай бұрын

    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

    3 ай бұрын

    draw some in paint dude..

  • @CodingNepal

    @CodingNepal

    Ай бұрын

    The download link for all the images used in this game can be found in the description.

  • @forheuristiclifeksh7836
    @forheuristiclifeksh78362 ай бұрын

    1:00

  • @mahin_2_23
    @mahin_2_23 Жыл бұрын

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

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    I'll try.

  • @mdjannatuadonbhuiyan7157
    @mdjannatuadonbhuiyan715711 ай бұрын

    adf

  • @alixerkmir2097
    @alixerkmir209710 ай бұрын

    // After 600ms of game complete.. showing modal with relevant details Why is it 600 and not 300 ms? 34:43

  • @tasneemayham974

    @tasneemayham974

    6 ай бұрын

    I think he meant 300.

  • @alixerkmir2097
    @alixerkmir209710 ай бұрын

    How did you get it to fill up so quickly? 14:38

  • @kumaraguru8566

    @kumaraguru8566

    7 ай бұрын

    alt+up

  • @alixerkmir2097

    @alixerkmir2097

    7 ай бұрын

    ok thanks@@kumaraguru8566