Hangman Game with HTML CSS and JavaScript | Beginner Tutorial

what's going on guys so today I'm going to be showing you how to create this really cool uh Hangman game in HTML CSS and JavaScript um just before we get into the video quick disclaimer this video this code was uh created by another YouTube channel uh I'm Gonna Leave the link in the description coding artist make sure you go and check them out very good Channel they create awesome little videos and you should definitely uh go over there and check them out if you have a spare minute um yeah so this is basically what the program looks like right now so uh as you can see we've got uh three options we've got fruits animals and countries and you need to select one of these options before you start so say we uh just start off here we'll um select animals and uh you can see the letters pop up and the spaces in which those letters will appear if you click them and guess them correctly so and Below as well you can see uh the little hangman diagram as you can see the head comes up there if you select a letter and it's wrong you click e and those two will appear there if it is in the word so uh yeah and again if you get a question wrong another body part will appear in the diagram of the hangman and so on and so on and I'm just going to show you a really quick example here what happens if you lose so it'll show what the word was and it'll say game over and then you've got this new game button here and it'll just reset everything you'll be able to go back select an option and start again so for this one I've selected countries and I'm just going to you know click a few letters here to see if we can get any correct and I not quite sure what this one is um I'm usually pretty good with countries but unfortunately I don't actually I think I might here Dominique okay so there you go so this is what happens when you win it shows you what the word is again and it shows you that you've won and then you've got the new game button back there and it'll just take you back to the start so yeah that's basically all this program really is guys if you want to uh Slow Down the video at any time you can but I think without further Ado we're just going to hop right into it as you can see we've got our index HTML file here ready to go in our little folder you can just make a folder and call it hangman or whatever you like and yeah make sure you uh yeah slow the video down if it's getting a bit too fast for you guys and without further Ado let's hop right into it foreign [Music] okay so that is our HTML done we're going to go over here to the browser now and just have a look what it looks like as you can see there's a whole lot of white space and just a button here that says new game if we click it obviously nothing is going to happen because we haven't implemented our JavaScript yet but that is for a little later we're going to hop right into the CSS now so what you're going to want to do is you're going to create a file and call it style.css and make sure it's in the same folder as your index.html file and uh yeah we're just going to hop right into the code now guys be sure to slow it down if you need and without further Ado let's do it foreign [Music] [Music] [Music] [Applause] [Music] [Applause] [Applause] [Music] foreign [Music] [Music] foreign [Music] okay guys this is our CSS done so as you can see we've got basically uh what our program is going to look like roughly obviously we're not going to have all the functions and availability of all the different buttons just yet so that is where our JavaScript is going to come in so what we're going to do now is we're going to create a file and call it script.js and make sure it is in the same folder as our other files and if you need to slow down the video make sure you do that because we're uh yeah we're just going to hop right into it [Music] so cruising [Music] foreign [Music] foreign [Music] foreign [Music] foreign [Music] foreign [Music] foreign guys that is our program done so everything is complete you don't have to worry about doing anything else this is the final product as you can see uh it is what we started off with I'll just zoom it in a little bit here so we can see it a bit better we've got our options and you can obviously yeah select your option and uh the Hangman game will appear in the purple border just below so yeah if you did like the video guys please make sure to like comment and subscribe it really helps me out a lot I hope you guys um have had a very merry Christmas and a happy New Year um please make sure to go and check out coding artist I'll leave the link for their profile in the description and I will also be uploading the source code to GitHub so you can go and check that out as well and uh yeah I hope you guys have a lovely day I'll see you in the next video

Channel: Devression

Views: 20,178

Keywords: javascript hangman game, javascript hangman project, javascript hangman tutorial, javascript, javascript tutorial for beginners, javascript projects for beginners, web development tutorial for beginners, html css javascript tutorial, html css game, javascript game development, javascript full tutorial, html, css, hangman, hangman game with html css javascript, hangman game javascript, build hangman with javascript, vanilla javascript project, vanilla javascript tutorial

Id: dRzhwwXy-Sk

Length: 10min 36sec (636 seconds)

Published: Sat Dec 24 2022