Simple Web Development project using HTML, CSS and JS for beginners
Tittle : Guessing Game
It is a very basic project for the beginners using HTML, CSS and JavaScript
HTML - Hypertext Markup Language
CSS - Cascading Style Sheet
JS - Java Script
ABSTRACT
Guessing game is a project aims in developing a computerized system. This project is mainly developed for gaming purpose. to play this game the user have to enter a random number in the given specified number box of some range, The system selects a random number of its own and that should be matched with users guess, according to that until the number matches the user will get alert message saying that guessed number is too low or too high until user selects the right number.
I suggest you to use codepen because it is User friendly. Here is the Link 👉codepen .
Steps to be followed:
1.Open codepen (by clicking on the link given above or you can use any text editor like sublime text, notepad++ etc..) .
2.Copy and paste the code (given below👇) in respective fields.
3.Save the code and execute it.
#if you want to know how it executes watch the video.
HTML CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Great Demo on CodePen</title>
</head>
<body>
<h1>Guessing Game</h1>
<p>The number is between 1 to 10</p>
<input type="number" id="userinput">
<button onclick="check()">check</button>
</body>
</html>CSS Code:
body{
background:purple;
color:white;
font-size:xx-large;
text-align:center;
}
h1{
color:black;
}
p{
text-color:;
}
button{
background:Green;
color:red;
}
input,button{
font-size:x-large;
width:200px;
text-align:center;
}JavaScript Code:
//generating random number
var guessnumber=Math.round(Math.random()*10)
console.log(guessnumber)
function check(){
var userguess=document.getElementById("userinput").value
console.log(userguess)
if(userguess>guessnumber){
alert("guess is too high")
}
else if(userguess<guessnumber){
alert("guess is too low")
}
else
{
alert("WoW! You found it")
}
}<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1389870630580192"
crossorigin="anonymous"></script>
Good, it helped me in my sem project.thankyou 😀
ReplyDeleteIt's very good,it is very helpful to so many people_ nice idea__all the best😇😇
ReplyDeleteReally helpful! Could use this for gaining knowledge 👍
ReplyDeleteIt's really helpful!!...great work, good luck with your project!
ReplyDeleteTyss..... For the vedio 👏👏🙌
ReplyDeleteNice work!
ReplyDeleteIt's Really useful
Explore your knowledge with your upcoming vedios
All the best ����
wonderful👏This is exactly what I was looking for
ReplyDeleteGo ahead....all the best
It has a nice finishing......
ReplyDeleteKeep going...
All the best 👍
Good work 👍 keep it up
ReplyDeleteGood work 👏👏
ReplyDeleteGood luck for upcoming video's ...
All the best 👍👍
Nice...Good work 👏👏 All the best.Hope u do very big projects
ReplyDeleteGood start
ReplyDeleteGood one
ReplyDeleteGood work
ReplyDeleteAll the best👍👍
Really helpful!! 👏
ReplyDeleteAll the best🤝👍
Woww nice project... really it will be helpful to us for projects.good start!!👏👏
ReplyDeleteWoww nice project... really it will be helpful to us for projects.good start!!👏👏
ReplyDelete