<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="calculator">
  <input type="text" id="myText" value=""></input>
  <div class="buttons">
    <div class="operators">
      <div id = "add">+</div>
      <div id="subtract">-</div>
      <div id="multiply">*</div>
      <div id="divide">/</div>
    </div>
    <div class="leftPanel">
      <div class="numbers">
        <div id = "number7">7</div>
        <div id = "number8">8</div>
        <div id = "number9">9</div>
      </div>
      <div class="numbers">
        <div id="number4">4</div>
        <div id="number5">5</div>
        <div id="number6">6</div>
      </div>
      <div class="numbers">
        <div id="number1">1</div>
        <div id="number2">2</div>
        <div id="number3">3</div>
      </div>
      <div class="numbers">
        <div id = "number0">0</div>
        <div id = "decimal">.</div>
        <div id="clear">C</div>
      </div>
    </div>
    <div class="equal" id="result">=</div>
  </div>
</div>
<script>
  var characters = [];
var string="";
var num;

document.getElementById('number0').onclick = function() {
   characters.push("0");
   string+="0";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number1').onclick = function() {
   characters.push("1");
  string+="1";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number2').onclick = function() {
   characters.push("2");
  string+="2";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number3').onclick = function() {
   characters.push("3");
  string+="3";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number4').onclick = function() {
   characters.push("4");
  string+="4";
  console.log(characters);
  document.getElementById("myText").value = string;
};

document.getElementById('number5').onclick = function() {
   characters.push("5");
  string+="5";
  console.log(characters);
  document.getElementById("myText").value = string;
};

document.getElementById('number6').onclick = function() {
   characters.push("6");
  string+="6";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number7').onclick = function() {
   characters.push("7");
  string+="7";
  console.log(string);
  document.getElementById("myText").value = string;
  //console.log(document.getElementById("myText").value);
};

document.getElementById('number8').onclick = function() {
  characters.push("8");
  string+="8";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number9').onclick = function() {
   characters.push("9");
  string+="9";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById('add').onclick = function() {
   characters.push("+");
  string+="+";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById('subtract').onclick = function() {
   characters.push("-");
  string+="-";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById('multiply').onclick = function() {
   characters.push("*");
  string+="*";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById('divide').onclick = function() {
   characters.push("/");
  string+="/";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById("clear").onclick = function () {
  document.getElementById("myText").value = "";
  characters=[];
  string="";
  num=0;
}
document.getElementById('decimal').onclick = function() {
   characters.push(".");
  string+=".";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById('result').onclick = function() {
   for (var i=0; i<characters.length; i++){
     if (characters[i]=="+"){
       x=parseFloat(string.slice(0,i));
       y=parseFloat(string.slice(i+1,characters.length+1));
       num= x+y;
     }
     else if (characters[i]=="-"){
              x=parseFloat(string.slice(0,i));
              y=parseFloat(string.slice(i+1,characters.length+1))
       num= x-y;
     }
     else if (characters[i]=="*"){
              x=parseFloat(string.slice(0,i));
              y=parseFloat(string.slice(i+1,characters.length+1))
       num= x*y;
     }
     else if (characters[i]=="/"){
              x=parseFloat(string.slice(0,i));
              y=parseFloat(string.slice(i+1,characters.length+1))
       num= x/y;
     }
   }
  document.getElementById("myText").value = num;
};
</script>
  </body>
</html>
body {
  width: 500px;
  margin: 4% auto;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 5px;
  font-size: 1.8rem;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.calculator {
  padding: 20px;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.input {
  border: 1px solid #ddd;
  border-radius: 1px;
  height: 60px;
  padding-right: 15px;
  padding-top: 10px;
  text-align: right;
  margin-right: 6px;
  font-size: 2.5rem;
  overflow-x: auto;
  transition: all .2s ease-in-out;
}

.input:hover {
  border: 1px solid #bbb;
  -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

.buttons {}

.operators {}

.operators div {
  display: inline-block;
  border: 1px solid #bbb;
  border-radius: 1px;
  width: 80px;
  text-align: center;
  padding: 10px;
  margin: 20px 4px 10px 0;
  cursor: pointer;
  background-color: #ddd;
  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

.operators div:hover {
  background-color: #ddd;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #aaa;
}

.operators div:active {
  font-weight: bold;
}

.leftPanel {
  display: inline-block;
}

.numbers div {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 1px;
  width: 80px;
  text-align: center;
  padding: 10px;
  margin: 10px 4px 10px 0;
  cursor: pointer;
  background-color: #f9f9f9;
  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

.numbers div:hover {
  background-color: #f1f1f1;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #bbb;
}

.numbers div:active {
  font-weight: bold;
}

div.equal {
  display: inline-block;
  border: 1px solid #3079ED;
  border-radius: 1px;
  width: 17%;
  text-align: center;
  padding: 127px 10px;
  margin: 10px 6px 10px 0;
  vertical-align: top;
  cursor: pointer;
  color: #FFF;
  background-color: #4d90fe;
  transition: all .2s ease-in-out;
}

div.equal:hover {
  background-color: #307CF9;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #1857BB;
}

div.equal:active {
  font-weight: bold;
}
var characters = [];
var string="";
var num;

document.getElementById('number0').onclick = function() {
  characters.push("0");
  string+="0";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number1').onclick = function() {
  characters.push("1");
  string+="1";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number2').onclick = function() {
  characters.push("2");
  string+="2";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number3').onclick = function() {
  characters.push("3");
  string+="3";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number4').onclick = function() {
  characters.push("4");
  string+="4";
  console.log(characters);
  document.getElementById("myText").value = string;
};

document.getElementById('number5').onclick = function() {
  characters.push("5");
  string+="5";
  console.log(characters);
  document.getElementById("myText").value = string;
};

document.getElementById('number6').onclick = function() {
  characters.push("6");
  string+="6";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number7').onclick = function() {
  characters.push("7");
  string+="7";
  console.log(string);
  document.getElementById("myText").value = string;
  //console.log(document.getElementById("myText").value);
};

document.getElementById('number8').onclick = function() {
  characters.push("8");
  string+="8";
  console.log(string);
  document.getElementById("myText").value = string;
};

document.getElementById('number9').onclick = function() {
  characters.push("9");
  string+="9";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById('add').onclick = function() {
  characters.push("+");
  string+="+";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById('subtract').onclick = function() {
  characters.push("-");
  string+="-";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById('multiply').onclick = function() {
  characters.push("*");
  string+="*";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById('divide').onclick = function() {
  characters.push("/");
  string+="/";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById("clear").onclick = function () {
  document.getElementById("myText").value = "";
  characters=[];
  string="";
  num=0;
}
document.getElementById('decimal').onclick = function() {
  characters.push(".");
  string+=".";
  console.log(string);
  document.getElementById("myText").value = string;
};
document.getElementById('result').onclick = function() {
  for (var i=0; i<characters.length; i++){
    if (characters[i]=="+"){
      x=parseFloat(string.slice(0,i));
      y=parseFloat(string.slice(i+1,characters.length+1));
      num= x+y;
    }
    else if (characters[i]=="-"){
      x=parseFloat(string.slice(0,i));
      y=parseFloat(string.slice(i+1,characters.length+1))
      num= x-y;
    }
    else if (characters[i]=="*"){
      x=parseFloat(string.slice(0,i));
      y=parseFloat(string.slice(i+1,characters.length+1))
      num= x*y;
    }
    else if (characters[i]=="/"){
      x=parseFloat(string.slice(0,i));
      y=parseFloat(string.slice(i+1,characters.length+1))
      num= x/y;
    }
  }
  document.getElementById("myText").value = num;
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.