Javascript Code : Guessing Game using Javascript CSS/HTML Styles , If Else and Switch case , Math.random




<html>
<head> Javascript Events</head>
<body>
<h2> Enter a guess number   </h2>
<input type="text" id="input1" onkeydown="keydownevent()"/> 
<p id="display">
<p id="display2">


<script>
<!--
function keydownevent()
{
document.getElementById("input1");
                n=document.getElementById("input1").value;
                document.getElementById("display").style.color="white";  
                x=Math.floor(Math.random()*5 +1);
                         
                switch(Number(n))
                 {
                    case 1: document.getElementById("display").style.background="pink";  
                    document.getElementById("display").innerHTML="pink"; 
               
                     break
                    case 2: document.getElementById("display").style.background="blue";
                              document.getElementById("display").innerHTML="blue"; 
                  
                     break;
                    case 3: document.getElementById("display").style.background="maroon";
                             document.getElementById("display").innerHTML="maroon"; 
                   
                    break
                    case 4:document.getElementById("display").style.background="green";
                       
                        document.getElementById("display").innerHTML="green"; 
                   
                     break;
                   default:  case 4:document.getElementById("display").style.background="orange";
                       c="orange";
                        document.getElementById("display").innerHTML="orange"; 
                     break;
 
                 
                 }

if(x==n)
        {
               document.getElementById("display2").style.color="yellow";
               document.getElementById("display2").style.background="purple";
               document.getElementById("display2").innerHTML="Congratulations , You  Guess it Right "; 
               
               
         }
                        else
           {
                          document.getElementById("display2").style.background="red";
                          document.getElementById("display2").innerHTML="Im sorry you are wrong, the Correct Answer is " +x; 
                        
                        
          
        
        }
        
}
//-->
</script>
</body>
</html>
Javascript Events

Enter a guess number

Comments

Post a Comment

Popular posts from this blog

Javascript Code using getElementById and If Else Statement

  <!DOCTYPE html> <html> <head> <title> Form Elements and Attributes </title> <style> //format and styles div { margin-bottom: 10px; } label { display: inline-block; width: 200px; } fieldset { background: #e1eff2; } legend { padding: 20px 0; font-size: 20px; } </style> <body> <body> <h1> Determine Age Group </h1> <p> Enter your details : </p> <fieldset> <label> Enter your name </label> <input type =" text " onfocus =" this.value='' " name =" fname " id =" fname " value ="" /> <br> <!-- create input text box for name --> <label> Enter your age </label> <input type =" number " onfocus =" this.value='' " name =" age " i...
Read more

Javascript Code Using If Else to Compute Discount based on Grades

<html>    <body>           <script type = "text/javascript">          <!-- var grade= prompt("Enter grade");  var tuition=prompt("Enter tuition fee");            if (grade>=99)              {                discount=tuition *1;                document.write("<b> COngrats You Deserved 100% Discount " );              }            else if(grade >=95)                  {                 discount=tuition *.50;                document.write("<b> COngrats You Deserved 50% Discount " );               }    ...
Read more