Calculator

In this example below you will see how to do a Calculator with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 11abdullah11, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 11abdullah11 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="calc well text-center">
  <div>Electronic calculator</div>
  <div class="disp well text-right"><p>0</p></div>
  <div class="row">
    <div class="col-xs-3">
      <button class = "AC btn btn-block">AC
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "CE btn btn-block">CE
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "divide btn btn-block"> √∑
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "multi btn btn-block">X 
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      <button class = "seven btn btn-block">7
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "eight btn btn-block"> 8
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "nine btn btn-block"> 9
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "minus btn btn-block"> -
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      <button class = "four btn btn-block">4 
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "five btn btn-block"> 5
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "six btn btn-block"> 6
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "plus btn btn-block"> +
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      <button class = "one btn btn-block">1
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "two btn btn-block"> 2
      </button>
    </div>
    <div class="col-xs-3">
      <button class = "three btn btn-block"> 3
      </button>
    </div>
    <div class="col-xs-3">
      <button class="equal btn btn-block"> =
      </button>
    </div>
  </div>
  <div id="bottom-row" class="row">
    <div id="zero" class="col-xs-3">
      <button class="btn btn-block">0
      </button>
        
    </div>
    <div id="dot" class="col-xs-6">
      <button class="btn btn-block">.
      </button> 
    </div>
  </div>
  
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/11abdullah11/calculator-Gvpzgj */
body{
  background-color:#AABBCC;
}
.calc{
  color:#AAAAFF;
  font-size:25px;
  margin-top:13%;
  margin-left:33%;
  width:330px;
  background-color:#554455;
  padding:1%;
  border-radius:20px;
  box-shadow:2px 4px 8px 2px #221122;
}
p{
  margin-bottom:17%;
}
.disp{
  background-color:grey;
  color:#111111;
  margin:5%;
  width:272px;
  height:50px;
}
button{
  margin:5px 7px 10px 2px;
  background-color:#112233;
  box-shadow: 0 2px #445566;
}
button:active {
  box-shadow: 0 2px #445566;
  transform: translateY(2px);
}
.AC, .CE{
  background-color:#990000;
}

.equal{
  height:80px;
}
#dot{
  margin-left:84px;
  margin-top:-41px;
}
#zero{
  margin-top:-40px;
}

/*Downloaded from https://www.codeseek.co/11abdullah11/calculator-Gvpzgj */
var temp="";
var text="";
var characters={
  "plus":"+",
  "minus":"-",
  "multi":"*",
  "divide":"/"
}

$('.AC').click(function (){
  text="0";
  $(".disp").text(text);
  text="";
});
$('.CE').click(function (){
  text="0";
  $(".disp").text(text);
  text="";
});
$('.divide').click(function (){
  if (text[text.length-1]==="+" || text[text.length-1]==="-" || text[text.length-1]==="/" || text[text.length-1]==="*"){
    temp = text.slice(0,text.length-1);
    temp+="/";
    text = temp;
  }
  else{
    text+="/"
  }
  $(".disp").text(text);
});
$('.multi').click(function (){
  if (text[text.length-1]==="+" || text[text.length-1]==="-" || text[text.length-1]==="/" || text[text.length-1]==="*"){
    temp = text.slice(0,text.length-1);
    temp+="*";
    text = temp;
  }
  else{
    text+="*";
  }
  $(".disp").text(text);
});
$('.minus').click(function (){
if (text[text.length-1]==="+" || text[text.length-1]==="-" || text[text.length-1]==="/" || text[text.length-1]==="*"){
    temp = text.slice(0,text.length-1);
    temp+="-";
    text = temp;
  }
  else{
    text+="-";
  }
   $(".disp").text(text);
});
$('.plus').click(function (){
if (text[text.length-1]==="+" || text[text.length-1]==="-" || text[text.length-1]==="/" || text[text.length-1]==="*"){
    temp = text.slice(0,text.length-1);
    temp+="+";
    text = temp;
  }
  else{
    text+="+";
  }
   $(".disp").text(text);
});
$('.equal').click(function (){
  text = eval(text);
  $(".disp").text(text);
  text="";
});
//numbers
$(".one").click(function(){
  text+="1";
  $(".disp").text(text);
});

$(".two").click(function(){
  text+="2";
  $(".disp").text(text);
});
$(".three").click(function(){
  text+="3";
  $(".disp").text(text);
});
$(".four").click(function(){
  text+="4";
  $(".disp").text(text);
});
$(".five").click(function(){
  text+="5";
  $(".disp").text(text);
});
$(".six").click(function(){
  text+="6";
  $(".disp").text(text);
});
$(".seven").click(function(){
  text+="7";
  $(".disp").text(text);
});
$(".eight").click(function(){
  text+="8";
  $(".disp").text(text);
});
$(".nine").click(function(){
  text+="9";
  $(".disp").text(text);
});
$("#zero").click(function(){
  text+="0";
  $(".disp").text(text);
});
$("#dot").click(function(){
  text+=".";
  $(".disp").text(text);
});

Comments