You have to guess any one of those numbers. If your guess number is equal to the number guessed by the game then you will win.
Below is a demo that will help you get a preview of this number guessing game HTML. Here I have shared step-by-step tutorials and source code. Use the button below the article if you want to download the source code.
Has created a box on a web page as you can see above. In which a heading is used first then an input space. You will input the number you guessed in that input space.
Then there is a button that will submit the number you guessed. Then there is a display where you can see the results of this game. Below all is a heading that will help you to know if your input number is correct.
But if you are a beginner, there is no reason to worry. Here I have shared step-by-step tutorials and shown possible results with pictures after each step.
Step 1: Basic structure of Guessing Game
A basic structure of this project has been created using the following HTML and CSS codes. Basically, I made a box on the web page.
Here we have used blue as the background color of the webpage and white as the background color of the box. Box min-width: 350px, max-width: 400px used.
Step 2: Add a heading in the box
Blue color and text color white are used in the background. I used font-size: 23px to increase the text size a bit.
Now I have added another text. Which will basically help you to know how much input can be put in that box. As I said before in this input box you can input any number from 1 to 15.
Step 3: Input box to input the guessing number
Now I have created an input box using the input function. Depending on the width: 200px and height padding: 10px 0 in this box.
A blue border of 2 pixels is used around the input and font-size: 28px is used to increase the text size.
Step 4: Create a button for Number Guessing Game
Now I have created a button that will help you to submit the input number. Depending on the width: 160px and height padding: 15px 0 of this button. I used the background color blue and the text color white.
Step 5: Display to see the results of the game
Now I have made a small display in which various information related to your result can be found. This means that you can see here how many numbers you have inputted and how many times you have inputted the number. Min-width of the box is 300px and here shadows have been used to enhance the beauty.
Now we have created another heading that will help you to understand the performance of the input number.
Hopefully, you can learn from the above tutorial how to create a number guessing game project. If there is any problem you can let me know by commenting on Instagram.