Online_calculator_using_html,javascript_and_css(source code)

Online_calculator_using_html,javascript_and_css(source code)


The source code of online calculator using html,css and javascript is given below.


<!DOCTYPE html5>
<html>
  <head>
   <title>Online Calculator</title>
   <style>
     div{
       background-color:#edb;
   height:360px;
   width:305px;
   border:solid gray 2px;
   margin:auto;
  }
  .btn{
      cursor:pointer;
  margin:2px;
  width:67px;
  height:45px;
  background-color:gray;
  font-size:20px;

       
   }
   .btn:hover{
     font-size:23px;
    background-color:#ebb;
  }
  .clear{
    width:295px; font-size:20px; height:45px;margin:5px;cursor:pointer; background-color:gray;
  }

  .clear:hover{
    font-size:23px;
    background-color:#ebb;

  }
   </style>
 
 
   <script type="text/javascript">
    function displaynum(n1)
{
  calcform.txt1.value=calcform.txt1.value+n1;
}
   
   </script>
  </head>
    <body>
<div>
<form name=calcform  >
  <input type=text name=txt1 style="text-align:right ;width:295px; font-size:30px;padding:5px;height:67px;margin:5px;" ><br>
      <input class="btn" style="margin-left:5px;" type=button name=btn7 value=7 onclick="displaynum(btn7.value)" >
    <input class="btn" type=button name=btn8 value=8  onclick="displaynum(btn8.value)">
  <input class="btn" type=button name=btn9 value=9  onclick="displaynum(btn9.value)">
  <input class="btn" type=button name=addbtn value=+ onclick="displaynum(addbtn.value)">
  <br>
  <input class="btn" style="margin-left:5px;" type=button name=btn4 value=4 onclick="displaynum(btn4.value)">
  <input class="btn" type=button name=btn5 value=5 onclick="displaynum(btn5.value)">
    <input class="btn" type=button name=btn6 value=6 onclick="displaynum(btn6.value)">
  <input class="btn" type=button name=subbtn value=- onclick="displaynum(subbtn.value)">
  <br>
  <input class="btn" style="margin-left:5px;" type=button name=btn1 value=1 onclick="displaynum(btn1.value)">
  <input class="btn" type=button name=btn2 value=2 onclick="displaynum(btn2.value)">
   <input class="btn" type=button name=btn3 value=3 onclick="displaynum(btn3.value)">
   <input class="btn" type=button name=mulbtn value=* onclick="displaynum(mulbtn.value)">
   <br>
 

  <input class="btn"  style="margin-left:5px;" type=button name=dotbtn value=. onclick="displaynum(dotbtn.value)">
  <input class="btn" type=button name=btn0 value=0 onclick="displaynum(btn0.value)">
  <input class="btn" type=button name=eqlbtn value== onclick="calcform.txt1.value=eval(calcform.txt1.value)">
  <input class="btn" type=button name=divbtn  value=/ onclick="displaynum(divbtn.value)">
  <br>
   <input class="clear" type=button name=cls value=clear  onclick="calcform.txt1.value='' ">


</form>
</div>
</body>

</html>







When you open in browser it will look like--


Comments

Post a Comment

Popular posts from this blog

how to compile multiple file in java using single command

Some times we need to compile multiple files with a single command. Though most programmer use IDe but sometimes we have command lines only. If your case is like that then you can use any of the following methods- 1. Specify all the files manually javac File1.java File2.java File3.java 2. Compile all .java file in the directory javac *.java This will compile all the Java files in the current directory.
Read more

Ternary operator and Nested Ternary operator

Ternary operator  Ternary operator which is a conditional operator and, as the name suggests, it takes three operands (parts). Ternary operator is available in most languages, like, C, C++, Java, JavaScript, etc  Syntax:-  variable = condition ? expression1_if_true : expression2_if_false Explanation: condition: This is a boolean expression that evaluates to either true or false. expression1_if_true: This is the value or statement that is executed if the condition is true. expression2_if_false: This is the value or statement that is executed if the condition is false.  Ternary operator is nothing, just a concise way of writing an if-else statement, i.e. the same operation can be achieved using an if-else block as shown below.  if(condition){     variable = value_if_true  }else{     variable = value_if_false  } Example 1 :- C program find max number among two given numbers using ternary operator #include <stdio.h> int mai...
Read more

How to pass argument in main function of java program using command line argument

Image
How to pass argument in main function of java program using command line       argument  There are only one way to pass argument in main() function of java program and that is using command  line .Here is the step by step procedure of how to pass argument using command line. As main function have a formal parameter i.e., args[] which is array of String type and accepts number of arguments passed during the run time of program through command line. This is  illustration of program to calculate the sum of number passed by user as argument in main function. public class CommandLine {   public static void main(String []args)    { int sum=o;       for(int i=0;i<args.length;i++)     {sum=sum+Integer.parseInt(args[i]); /* Here the argument accepted from command line are added one by one.But there is problem as command line arguments are of String type ,Hence we need to convert them before adding wh...
Read more