JS Calc

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>JS Calc</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

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

  
</head>

<body>

  <h1>Clockulator</h1>
<div>
  <p class='screen' id='screen'></p>
</div>
<div class='wrapper'>
  <button class='zero circle' id='zero'>0</button>
</div>
<div class='wrapper'>
  <button class='twelve circle' id='twelve'>12</button>
</div>
<div class='wrapper'>
  <button class='six circle' id='six'>6</button>
</div>
<div class='wrapper'>
  <button class='three circle' id='three'>3</button>
</div>
<div class='wrapper'>
  <button class='nine circle' id='nine'>9</button>
</div>
<div class='wrapper'>
  <button class='one circle' id='one'>1</button>
</div>
<div class='wrapper'>
  <button class='two circle' id='two'>2</button>
</div>
<div class='wrapper'>
  <button class='eleven circle' id='eleven'>11</button>
</div>
<div class='wrapper'>
  <button class='ten circle' id='ten'>10</button>
</div>
<div class='wrapper'>
  <button class='four circle' id='four'>4</button>
</div>
<div class='wrapper'>
  <button class='five circle' id='five'>5</button>
</div>
<div class='wrapper'>
  <button class='seven circle' id='seven'>7</button>
</div>
<div class='wrapper'>
  <button class='eight circle' id='eight'>8</button>
</div>
<div class='wrapper'>
  <button class='equal circle' id='equal'>=</button>
</div>
<div class='wrapper'>
  <button class='plus circle' id='plus'>+</button>
</div>
<div class='wrapper'>
  <button class='minus circle' id='minus'>-</button>
</div>
<div class='wrapper'>
  <button class='multiply circle' id='multiply'>x</button>
</div>
<div class='wrapper'>
  <button class='divide circle' id='divide'>/</button>
</div>
<div class='wrapper'>
  <button class='clear circle' id='clear'>C</button>
</div>
<footer>Designed by Felix Savchenkov</footer>
  <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/f1e2l3i4x5/js-calc-MEqMvo */
h1 {
  text-align: center;
}

body {
    background-color: lightblue;
}

.screen {
  padding: 30px;
  margin: 50px;
  margin-bottom: 15px;
  background: white;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: grey;
  color: black;
  font-size: 2em;
  line-height: 0;
}

.circle {
  width: 45px;
  height: 45px;
  background: black;
  border-radius: 22.5px;
  border-style: solid;
  border-width: 2px;
  border-color: grey;
  color: white;
}

.button {
  position: absolute;
}

.wrapper {
  text-align: center;
}

.zero {
  margin-top: 20%;
}

.twelve {
  position: relative;
  top: -135px;
  background: #515151 !important;
}
.six {
  position: relative;
  background: #515151 !important;
}
.three {
  position: relative;
  left: 100px;
  top: -137px;
}
.nine {
  position: relative;
  right: 100px;
  top: -183px;
}
.one {
  position: relative;
  right: -46px;
  top: -305px;
}
.two {
  position: relative;
  right: -83px;
  top: -317px;
  background: #515151 !important;
}
.eleven {
  position: relative;
  right: 46px;
  top: -395px;
}
.ten {
  position: relative;
  right: 83px;
  top: -408px;
  background: #515151 !important;
}
.four {
  position: relative;
  right: -83px;
  top: -368px;
  background: #515151 !important;
}
.five {
  position: relative;
  right: -46px;
  top: -380px;
}
.seven {
  position: relative;
  right: 46px;
  top: -425px;
}
.eight {
  position: relative;
  right: 83px;
  top: -503px;
  background: #515151 !important;
}
.equal {
  position: relative;
  right: 0px;
  top: -546.5px;
  background: #f47321 !important;
}
.plus {
  position: relative;
  right: -41.5px;
  top: -663px;
  background: #367c2b !important;
}
.minus {
  position: relative;
  right: 41.5px;
  top: -708px;
  background: #e41b23 !important;
}
.multiply {
  position: relative;
  right: -43px;
  top: -708px;
  background: #004c91 !important;
}
.divide {
  position: relative;
  right: 43px;
  top: -753px;
  background: #ffc220 !important;
}
.clear {
  position: relative;
  right: 0px;
  top: -864px;
  background: white !important;
  color: black !important;
}
.dot-1 {
  position: relative;
  right: -90px;
  top: -955px;
  background: white !important;
  color: black !important;
}
.dot-2 {
  position: relative;
  right: 89px;
  top: -1000px;
  background: white !important;
  color: black !important;
}
.dot-3 {
  position: relative;
  right: -90px;
  top: -870px;
  background: white !important;
  color: black !important;
}
.dot-4 {
  position: relative;
  right: 90px;
  top: -915px;
  background: white !important;
  color: black !important;
}

/*Downloaded from https://www.codeseek.co/f1e2l3i4x5/js-calc-MEqMvo */
$(document).ready(function() {

var num = [];
var storage = [];

//output to console
function con (arr) {
  console.log(arr);
}   
//to show accum result of the input
function show (rh) {
$("#screen").text(rh.join(""));
}  
//to input complex number
function inputNum (arr, mem) {
$("#one").on("click", function(){
  arr.push("1");
  show(arr);
});
$("#two").on("click", function(){
  arr.push("2");
  show(arr);
});
$("#three").on("click", function(){
  arr.push("3");
  show(arr);
});
$("#four").on("click", function(){
  arr.push("4");
  show(arr);
});
$("#five").on("click", function(){
  arr.push("5");
  show(arr);
});
$("#six").on("click", function(){
  arr.push("6");
  show(arr);
});
$("#seven").on("click", function(){
  arr.push("7");
  show(arr);
});
$("#eight").on("click", function(){
  arr.push("8");
  show(arr);
});
$("#nine").on("click", function(){
  arr.push("9");
  show(arr);
});
$("#ten").on("click", function(){
  arr.push("10");
  show(arr);
});
$("#eleven").on("click", function(){
  arr.push("11");
  show(arr);
});
$("#twelve").on("click", function(){
  arr.push("12");
  show(arr);
});
$("#zero").on("click", function(){
  arr.push("0");
  show(arr);
});
$("#plus").on("click", function(){
  mem.push(arr.join("").slice(0));
  mem.push("+");
  arr = [];
  show(arr);
});
$("#minus").on("click", function(){
  mem.push(arr.join("").slice(0));
  mem.push("-");
  arr = [];
  show(arr);
});
$("#multiply").on("click", function(){
  mem.push(arr.join("").slice(0));
  mem.push("*");
  arr = [];
  show(arr);
});
$("#divide").on("click", function(){
  mem.push(arr.join("").slice(0));
  mem.push("/");
  arr = [];
  show(arr);
});
$("#equal").on("click", function(){ 
  mem.push(arr.join("").slice(0));
  arr = [];
  show(arr);
  show2(mem);
});
$("#clear").on("click", function(){
  mem = [];
  arr = [];
  show(arr);
}); 
}

inputNum(num, storage);   

function show2(mem) {
con(mem);
var move = parseInt(mem[0]);
  
  for (var i=1;i<mem.length;i=i+2) {
    if (mem[i]=="+") {
      move = move + parseInt(mem[i+1]);
    }
    if (mem[i]=="-") {
      move = move - parseInt(mem[i+1]);
    }
    if (mem[i]=="*") {
      move = move * parseInt(mem[i+1]);
    }
    if (mem[i]=="/") {
      move = move / parseInt(mem[i+1]);
    }
  }
$("#screen").text(move);
con(move);  
  
}     
  
});

Comments