<div class="container">
  <div class="row header">
    <h1>Electronic Calculator</h1>
  </div>
  <div class="screen">
    <div class="row primary">
      <h2 class="results">0</h2>
    </div>
    <div class="row secondary">
      calculation
    </div>
  </div>
  <table class="table">
  <thead>
    <tr>
      <th>
        <button id="AC">AC</button>
      </th>
      <th>
        <button id="CE">CE</button>
      </th>
      <th>
        <button id="/">/</button>
      </th>
      <th>
         <button id="x">X</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        <button id="7">7</button>
      </th>
      <th>
        <button id="8">8</button>
      </th>
      <th>
        <button id="9">9</button>
      </th>
      <th>
        <button id="-">-</button>
      </th>
    </tr>
    <tr>
     <th scope="row">
        <button id="4">4</button>
      </th>
      <th>
        <button id="5">5</button>
      </th>
      <th>
        <button id="6">6</button>
      </th>
      <th>
        <button id="+">+</button>
      </th>
    </tr>
    <tr>
     <th scope="row">
        <button id="1">1</button>
      </th>
      <th>
        <button id="2">2</button>
      </th>
      <th>
        <button id="3">3</button>
      </th>
      <th rowspan="2">
        <button id="equal" class="row-expanded">=</button>
      </th>
    </tr>
     <tr>
      <th scope="row" colspan="2">
        <button id="0" class="col-expanded">0</button>
      </th>
      <th>
        <button id=".">.</button>
      </th>
    </tr>
  </tbody>
</table>
</div>

body {
  background-color:lightblue;
  font-family:'digital-clock-font';
}

button {
  height:50px;
  width:80px;
  border-radius: 10px;
  background-color: black;
  color: white;
}

th {
  border-radius: 50px;
  text-align: center;
}

td {
  text-align: center;
}

thread {
  margin-top: 20px;
}

.container {
  margin-top: 30px;
  background-color: beige;
  border-color:brown;
  border-style: solid;
  border-radius: 25px;
  width:30%;
}

.header {
  padding-left: 40px;
  text-align: center;
  padding-top: 20px;
  padding-bottom:10px;
}

.screen {
  background-color: lightgrey;
  border-radius:25px;
  margin-left: 20px;
  margin-right: 20px;
  border-color: darkblue;
  border-style: solid;
}

.primary {
  padding-top: 50px;
  padding-left:30px;
  padding-bottom:5px;
  text-align: right;
}

.secondary {
  padding-top:10px;
  padding-left:30px;
  padding-bottom:15px;
  text-align: center;
  
}

#AC {
  background-color:red;
  color: white;
}

#CE {
  background-color:red;
  color: white;
}

.row-expanded {
  height:125px;
}

.col-expanded {
  width: 200px;
}

function validate_new_calculation(str){
  str = str.trim();
  var re = new RegExp("^[-]*[0-9]+");
  truthy = re.test(str);
  var re = new RegExp("[+-/x]+[+-/x]+");
  fail = re.test(str);
  var re = new RegExp("[0-9]*[.]+[0-9]*[.]+");
  fail2 = re.test(str);
  if(truthy == true && fail == false && fail2 == false){
    truthy = 1;
  } else {
    truthy = 0;
  }
  return truthy ;
}

function evaluate_calc(str){
  operators=[];
  argus = [];
  args = ""
  str.split('').forEach(function(ele){
    if(ele == "x" || ele == "-" || ele == "+" || ele == "/") {
      operators.push(ele);
      argus.push(args);
      args="";
    } else {
      args = args + ele;
    }
  });
  argus.push(args);
  do_multi_calc();
  do_add_calc();
  $(".secondary").html(argus[0]);
  $(".primary").html("<h1>" + argus[0] + "</h1>");
  return 0;
}

function do_multi_calc(){
  used_ops = [];
  for (var i =0; i < operators.length;i++){
    if(operators[i]=="x"){
      argus[i+1] = multi(argus[i],argus[i+1]);
      used_ops.push(i);
    } 
    if (operators[i] == "/"){
      argus[i+1] = divide(argus[i],argus[i+1])
      used_ops.push(i);
    }
  }
  used_ops.forEach(function(op){
    delete argus[op];
    delete operators[op];
  });
  
  argus=argus.filter(function(ele){
    return ele !== null;
  });
  
  operators=operators.filter(function(ele){
    return ele !== null;
  });
  
  return 0;
}

function do_add_calc(){
  used_ops = [];
  for (var i =0; i < operators.length;i++){
    if(operators[i]=="+"){
      argus[i+1] = add(argus[i],argus[i+1]);
      used_ops.push(i);
    } 
    if (operators[i] == "-"){
      argus[i+1] = subtract(argus[i],argus[i+1])
      used_ops.push(i);
    }
  }
  used_ops.forEach(function(op){
    delete argus[op];
    delete operators[op];
  });
  
  argus=argus.filter(function(ele){
    return ele !== null;
  });
  
  operators=operators.filter(function(ele){
    return ele !== null;
  });
  
  return 0;
}

function multi(a,b){
  return Number(a) * Number(b);
}

function divide(a,b){
  var solution = Number(a) / Number(b);
  return solution;
}

function add(a,b){
  return Number(a) + Number(b);
}

function subtract(a,b){
  return Number(a) - Number(b);
}

function set_secondary(new_value){
  var curr_text = $(".secondary").text();
  curr_text=$.trim(curr_text);
  
  new_value=new_value.trim();
  if (new_value == "equal"){
    evaluate_calc(curr_text);
    return 0;
  }
  
  if (new_value == "AC" || new_value == "CE" ){
    new_value="";
    $(".secondary").html(new_value);
    $(".primary").html(new_value);
  } else if (curr_text == "calculation") {
    new_value=new_value;
  } else {
    new_value = $(".secondary").text() + new_value;
  }
  if(validate_new_calculation(new_value)){
    $(".secondary").html(new_value);
  };
  
}

$(document).ready(function() {
  $('button').click(function(e) {
    var fired_button = $(this).attr('id');
    set_secondary(fired_button);
  });
});