Javascript Guessing Game Tutorial

In this tutorial I am going to show you how to make an interesting guessing game with pure javascript. The more you enjoy playing with javascript the more effective knowledge you will gain. Let’s start by making our guessing game tutorial .

Step 1: Make an HTML file

Make a new directory in your local storage called guessing-game and create index.html inside the directory. You can place below html markup in your newly created html file,
[crayon-5ba68834de5a3519746630/] We added external stylesheet inside the head tag and after the title element. Also we added external script tag before the end body tag. We added header, main, footer semantic tag for html5. It is not required, but for the visual effect we made this. Inside the content class element we made two input element, one is a text input and another is button input element. You will see we made a div tag with userInputStatus id. When user start typing in text input element it will update user input. I made a label element to show the question to the user. If yo carefully read all attributes of that text input element you will notice that I gave two new attribute which need to be explained here. First one isonkeyup="get_input(this.value)". Well onkeyup is an event handler when user start typing it will then call a function. And the function isget_input(this.value). I provided this.value parameter in get_inputfunction as because whenever anything is typed in the text input element it stores the input value. When you reading this tutorial a question will appear in your mind What is event handler?

Here is a quote from www.webopedia.com/:

An event handler typically is a software routine that processes actions such as keystrokes and mouse movements. With Web sites, event handlers make Web content dynamic. JavaScript is a common method of scripting event handlers for Web content.

Event handler is an action when any action happens it will then fires up provided function. Some useful event handlers are:

  • onclick
  • onmouseover
  • oncopy
  • onblur
  • onfocus
  • onpaste
  • onkeyup
  • onkeydown
  • onmouseenter
  • onmousedown
  • onmouseleave
  • onmousewheel
  • onmousemove
  • onmouseout
  • onmouseover
Read Also:  Database Management System Companies Among Largest Investors in New Technologies

We provided another event handler on button input element which isonclick="do_guess(). Whenever user clicks to the button element it fires updo_guess function. After the button element we added a div element with status id attribute. It will give feedback to the user if the answer is not a number/answer is too large or small/congratulation message.

Step 2: Making a external styelesheet file for visual effect

Now make a style.css file inside the directory and paste below code in the file.
[crayon-5ba68834de5b2930003211/]

Step 3: Make a new javascript file for content behavior

Inside the directory create a file called function.js and paste below code.
[crayon-5ba68834de5b9090635829/] Explanation given in the script itself.

Leave a Reply

Your email address will not be published. Required fields are marked *