How to make a calculator using HTML ,CSS and JavaScript

Make a Calculator Using HTML,Css And JavaScript


steps-

step-1
                   Add <div> to your html.... 

                  with having a class name.
   for example...

                                 <div class="calculator">

Step-2
           now add the input screen with having class name in html....
               

   

                              <input id="screen" class="screen" value="0"/>

STEP-3
       Now lets define buttons of the calculator with <div> and class of button to decorate with  CSS in html with tag name of <button>


      <div class="buttons">
    <button id="clear" value="">C</button>
    <button id="backspace" value="-">⬅</button>
    <button id="sign" value="-+">±</button>
    <button id="divide" value="/">÷</button>
    <button class="digit" value="7">7</button>
    <button class="digit" value="8">8</button>
    <button class="digit" value="9">9</button>
    <button id="multiply" value="*">×</button>
    <button class="digit" value="4">4</button>
    <button class="digit" value="5">5</button>
    <button class="digit" value="6">6</button>
    <button id="minus" value="-">-</button>
    <button class="digit" value="1">1</button>
    <button class="digit" value="2">2</button>
    <button class="digit" value="3">3</button>
    <button id="plus" value="+">+</button>
    <button class="digit" value="0">0</button>
    <button class="digit" value=".">.</button>
    <button id="equal" value="=">=</button>
    </div>


Now you are done with HTML part

STEP-4 
              Now lets add some CSS to modify your HTML


CSS-
Add gradient background with body property of CSS

body {
  background-image: -moz-radial-gradient(center, circle closest-corner, #353863 0%, #000 100%);
  background-image: -o-radial-gradient(center, circle closest-corner, #353863 0%, #000 100%);
  background-image: -webkit-radial-gradient(center, circle closest-corner, #353863 0%, #000 100%);

  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;

  }



STEP-5
Now modify the calculator width, height and other property

.calculator{
  width:240px;
  height:auto;
  margin:3% auto;
  background:#ccc;
  border-radius:20px;
  -moz-box-shadow:inset 0 0 12px #FFF,
  inset 0px 1px #E6E6E6, 0 1px 1px #323643,
  inset 0px 1px #7b839b, 0 2px 5px rgba(0,0,0,.5);
  -webkit-box-shadow:inset 0 0 12px #FFF,
  inset 0px 1px #E6E6E6, 0 1px 1px #323643,
  inset 0px 1px #7b839b, 0 2px 5px rgba(0,0,0,.5);
  box-shadow:inset 0 0 12px #FFF,
  inset 0px 1px #E6E6E6, 0 1px 1px #323643,
  inset 0px 1px #7b839b, 0 2px 5px rgba(0,0,0,.5);

  }

STEP-6
           Now add the screen style ....

.screen{

  width:86%;
  height:54px;
  margin:20px 0px 0px 12px;
  padding-right:9px;
  background:#858585;
  text-align:right;
  border-radius:6px;
  border:1px solid #6B6B6B;
  font-size:26px;
  font:"Trebuchet MS", Arial, Helvetica, sans-serif;
  -moz-box-shadow:inset 0 0 10px #333,
  inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;
  -webkit-box-shadow:inset 0 0 10px #333,
  inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;
  box-shadow:inset 0 0 10px #333,
  inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

  }

note- screen focus should be none

STEP-7
            now add the style for buttons..

.buttons{
  width:220px;
  margin:12px;
  }
  .buttons button{
  width:45px;
  height:45px;
  padding:0;
  margin:0px 0px 10px 5px;
  border:1px solid #333;
  border-radius:6px;
  color:#CCC;
  font:24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  line-height: 45px;
  -moz-box-shadow:inset 0 0 10px #666,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  -webkit-box-shadow:inset 0 0 10px #666,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  box-shadow:inset 0 0 10px #666,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  background:#333;
  }
  .buttons button:active {
  color:#FFF;
  border:1px solid #333;
  -moz-box-shadow:inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;
  -webkit-box-shadow:inset 0 1px 1px #000, 0px 1px #E6E6E6;
  box-shadow:inset 0 1px 1px #000, 0px 1px #E6E6E6;


  }


STEP-8
           Now give style to clear button and property of clear button.

 #clear{
  background-color:#d02200;
  border:1px solid #d02200;
  -moz-box-shadow:inset 0 0 10px #F63,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  -webkit-box-shadow:inset 0 0 10px #F63,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  box-shadow:inset 0 0 10px #F63,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;

  }
  #clear:active{
  border:1px solid #d02200;
  -moz-box-shadow:inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;
  -webkit-box-shadow:inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;
  box-shadow:inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

  }

note- don't forget that what you have define as a class or as an id 
if you define as an id then you should use in CSS as #id_name
or if you define as a class then you should use  as .class_name


STEP-9
             now style the equal button of this calculator

 #equal{
  width:100px;
  background-color: #036;
  border:1px solid #036;
  -moz-box-shadow:inset 0 0 10px #069,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  -webkit-box-shadow:inset 0 0 10px #069,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  box-shadow:inset 0 0 10px #069,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  }
  #equal:active{
  border:1px solid #039;
  -moz-box-shadow:inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;
  -webkit-box-shadow:inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;
  box-shadow:inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

  }

STEP-10
              Now add the active and other properties for signs of this caclculator

#minus, #plus, #divide, #multiply{
  background-color: #036;
  border:1px solid #036;
  -moz-box-shadow:inset 0 0 10px #069,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  -webkit-box-shadow:inset 0 0 10px #069,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  box-shadow:inset 0 0 10px #069,
  inset 0px 1px #BCD6FF, 0 1px 1px #323643;
  }
  #minus:active, #plus:active, #divide:active, #multiply:active{
  border:1px solid #039;
  -moz-box-shadow:inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;
  -webkit-box-shadow:inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;
  box-shadow:inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

  }

NOW YOU ARE DONE WITH CSS
NOW LET ME ADD SOME JavaScript TO CALCULATE YOUR CALCULATION


JavaScript-

var memory = 0;
    var memorycalc;
    var c = false;
    var flag = false;
    var screen = function(p) {
    if(p == '.' && flag == true){
    return;
    }
    if(c == true){
    $('#screen').val('');
    c = false;
    }
    var r = $('#screen').val() + p;
    if(p == '.'){
    flag = true;
    } else {
    r = r * 1;
    }
    $('#screen').val(r);
    }
    var calculate = function(p) {
    if(memory){
    result();
    }
    flag = false;
    c = true;
    memory = $('#screen').val();
    memorycalc = p;
    }
    $('#clear').click(function (){
    memory = 0;
    $('#screen').val("0");
    });
    $('#sign').click(function (){
    $('#screen').val($('#screen').val() * -1);
    });
    $('#backspace').click(function (){
    var len = $('#screen').val().length;
    $('#screen').val($('#screen').val().substring(0, len -1));
    if($('#screen').val().length == 0)
    $('#screen').val(0);
    });
    var result = function(){
    if(memory == 0)
    return;
    c = true;
    var r;
    switch(memorycalc){
    case '+':
    r = memory + $('#screen').val();
    break;
    case '-':
    r = memory - $('#screen').val();
    break;
    case '*':
    r = memory * $('#screen').val();
    break;
    case '/':
    r = memory / $('#screen').val();
    break;
    }
    screen(r);
    c = true;
    flag = false;
    memory = 0;
    };
    $('.digit').click(function(e) {
    screen(e.target.value);
    });
    $('#divide, #multiply, #minus, #plus').click(function(e) {
    calculate(e.target.value);
    });
    $('#equal').click(function() {
    result();

    });

CONGRATS NOW YOU ARE DONE ALL OF THAT...
ENJOY YOUR CALCULATION......

FOR MORE INFORMATION WATCH MY VIDEO TO HOW TO MAKE THIS CALCULATOR

HAPPY CODING