Item: Calculator
Rating: 3.4
Author: 11abdullah11

0 Downloads
8 Views
Tweet
Download Now View Demo

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

More from 11abdullah11

Calculator

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

Technologies

Comments

More from 11abdullah11

A Pen by Abdullah Zafar

Recipe Box

Dr. Norman (Abdullah's version)

Calculator

You Might Also Like

VueJS: Search Parent Children Style Structures

TEST MY Less & Bootstrap

Twitch viewer, WIP

floating animation

[BROKEN] prettify `<input type=range>` #57

A Pen by Pinaki Nath Chowdhury

CSS Filters

Animated slider in pure angular