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 is
onkeyup is an event handler when user start typing it will then call a function. And the function is
get_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/:
Event handler is an action when any action happens it will then fires up provided function. Some useful event handlers are:
We provided another event handler on button input element which is
onclick="do_guess(). Whenever user clicks to the button element it fires up
do_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.
Inside the directory create a file called function.js and paste below code.
[crayon-5ba68834de5b9090635829/] Explanation given in the script itself.