javaScript Calculator.

-

javaScript Calculator.


calculator using HTML,CSS and javaScript.
Html code-

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style_calculater.css">
        <script src="script_src.js">
    </head>
    <body>
    <div class="container">
        <div class="dbox"><input type="text" id="display" placeholder="0"><br>
        <input type="text" id="display2" placeholder="0">
        <div id="box">
            <button class="key" value="7" onclick="dis('7')" > 7 </button>
             <button class="key" value="8" onclick="dis('8')"> 8 </button>
             <button class="key" value="9" onclick="dis('9')"> 9 </button>
            
             <button class="key" value="4" onclick="dis('4')"> 4 </button>
             <button class="key" value="5" onclick="dis('5')"> 5 </button>
            <button class="key" value="6" onclick="dis('6')"> 6 </button>
           
            <button class="key" value="1" onclick="dis('1')"> 1 </button>
            <button class="key" value="2" onclick="dis('2')"> 2 </button>
            <button class="key" value="3" onclick="dis('3')"> 3 </button>
        
            <button class="key" value="0" onclick="dis('0')"> 0 </button>
            <button class="key" value="0" onclick="diss('.')"> . </button>
            <button  class="key"onclick="solve()">=</button>
        
        
        </div>
            <div class="ope_box">
                <button class="ope" onclick="clea()"> C </button>
                <button class="ope" value="0" onclick="diss('+')"> + </button>
                <button class="ope" value="0" onclick="diss('-')"> - </button>
                <button class="ope" value="0" onclick="diss('*')"> * </button>
                <button class="ope" value="0" onclick="diss('/')"> / </button>
            </div>
        <audio id="audio" src="keys.mp3" ></audio>
        </div>
        </div>
 </body>
</html>





CSS code-

.container
{
    display: flex;

     height:90vh;
    width:300px;
    background: rgb(0,128,128,0.7);
    
}
@media only screen and (max-width:400px) 
    {
        .container
        {
          
    background: rgb(0,128,128,0.7);
    width:100%;
    height:100%;
        }
    }

 #display
{
    margin:30px;
    height:60px;
    width:235px;  
    outline: none;
    font-size:25px; 
    background: none;
    border:none;
    text-align: right;
    
}
#display2
{
    height:30px;
    position:relative;
    top:100px;
    right: 200px;
    text-align: right;
    background: none;
    outline: none;
    border:none;
}
.dbox
{
    display: flex;
    height: 150px;
    width:100%;
    background-color:white;
    box-shadow: 0 4px 8px  0 rgba(0,0,0,0.4);
}
#box
{
 position:absolute;
    top:220px;
    left:30px;
    height:250px;
    width: 180px;
     border-right: 1px solid 
}
.key
{

     margin:7px; 
    margin-top: 15px;
    height:40px;
    width:40px;
    background-color:rgb(47,79,79,0.2); 
    font-size:30px; 
    background: none;
    border: none;
    outline: none;
   
}
.key:active
{
    background:gray;
    border-radius: 20px;
}
button:nth-child(13)
{
    width:138px 
}
.ope_box
{
    position: relative;
    top:220px;
    right: 260px;

     height: 250px;
}
.ope
{

    margin-top:6px;
    height:40px;
    width:40px;

     font-size:30px; 
    background: none;
    border: none;
    outline: none;   
}


js code-
//display number in textbox
function dis(val)
{
  
    s=document.getElementById("audio")
    s.play()
    
    if(display.value.length>=20)
        {
            alert("noo nooooo");
        }
    else
        {
            vall=parseInt(val)  
            document.getElementById("display").value+=vall
        }
   
 }
//display operator in text box
function diss(vall)
{
  
    s=document.getElementById("audio")
    s.play()
    document.getElementById("display").value+=vall
    
 }
            //print current solution in display2 text box to set  interval for coll function
           function myFun()
            {
                setInterval(solve_prob,1000)
            }
            myFun();

 //clculate
function solve()
{
let x = document.getElementById("display").value
let y = eval(x)
document.getElementById("display").value = y
 document.getElementById("display2").value =""  
 s=document.getElementById("audio")
 s.play()
}
//clear text box            
function clea()
{
document.getElementById("display").value=""
 } 
   //show current solution state   
 function solve_prob()
 {
              
let x = document.getElementById("display").value
let y = eval(x)
document.getElementById("display2").value = y
}



     watch calculator video............
thanks........

Comments

Post a Comment

Popular posts from this blog

python pattern programming

-
Image
PYTHON PATTERN PROGRAMMING Python nested loop: Python allow programmer to use nested loops.Nested loop means when one loop is define into another loop is known as nested loop,in which one is called inner loop and another is called outer loop.In which when outer loop's condition is true than inner loop will be execute. we use the concept of nested loop in pattern programming etc. syntax: while (condition):      while (condition):         statement x     statement y   Some examples of nested loop. Nested loop program. Q. write  a program to print following pattern. P P Y P Y T P Y T H P Y T H O P Y T H O N str = "PYTHON" for  i  in   range ( 0 , 6 ):      print ()      for  j  in   range ( 0 ,i+ 1 ):          print (str[j],  end = ' ' ) Q. write  a program to print following pattern. *  * *  * * *  * * * *  * * * * * for  i  in   range ( 1 , 6 ):          print ()          for
Read more

Decision making statement in python

-
Image
Decision making statement in python In this statement we can take a decision for executing block of statement.if in this case condition is checked.if condition is true then the true part will execute,otherwise false part will execute.        There are four types of decision making statement. (1) simple if statement/single alternative if statement. (2) if-else statement/double alternative if statement. (3) if-else-if statement/else if ladder statement. (4) Nested if statement/compound if statement. (1)simple if statement/single alternative if statement  In this statement if condition is true then true part will execute otherwise no action will generate.  Syntax: if  test expression:     Statement 1     Statement 2     Statement 3    ---------------    ---------------     Statement n Statement x Examples: if  ( age>=18) :    print( "You are eligible for vote" ) (2) if-else statement/double alternative if statement In this statement if co
Read more

Looping statement in python

-
Image
Basic looping structure in python Python supports basic loop structures through iterative statements.iterative statements are decision control statements that are used to repeat the execution of a list of statements.python language supports two types of iterative statements - while loop and for loop. While loop: The while loop provides a mechanism to repeat one or more statements while a particular  condition is true. Syntax: statement x while  (condition):     block of statement statement y  A while loop is also referred to as a top-checking loop since control condition is places as the first line of the code. if the condition evaluates to false, then the statement enclosed in the loop are never executed ... now look following examples: Q. write a program in python to calculate the sum and average of first 10 number. i =  0 s =  0 while (i<= 10 ):      s = s+i      i=i+ 1 avg =  float (s)/ 10 print ( "the sum of first 10
Read more