<link href="https://fonts.cdnfonts.com/css/calculator" rel="stylesheet">                
<div id="app">
  <div id="calculator">
    <div id="screen">0</div>
          <button id="AC" class='button'>AC</button>
      <button id="b-division" class='button operation-button'>\</button>
      <button id="b-multiplication" class='button operation-button'>*</button>
      <button id="b-minus" class='button operation-button'>-</button>
      <button id="b-seven" class='number-button button'>7</button>
      <button id="b-eigth" class='number-button button'>8</button>
      <button id="b-nine" class='number-button button'>9</button>
      <button id="b-plus" class='button operation-button'>+</button>
      <button id="b-four" class='number-button button'>4</button>
      <button id="b-five" class='number-button button'>5</button>
      <button id="b-six" class='number-button button'>6</button>
      <button id="b-one" class='number-button button'>1</button>
      <button id="b-two" class='number-button button'>2</button>
      <button id="b-three" class='number-button button'>3</button>
      <button id="b-equal" class='button'>=</button>
      <button id="b-zero" class='number-button button'>0</button>
      <button id="b-point" class='number-button button'>.</button>
    <h1></h1>
  </div>
</div>

body{
  padding: none;
  margin: none;
  border: none;
  size: 100%;
  background: black
}

#app{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#calculator{
  width: 200px;
  height: 200px;
  padding: 10px;
  background-color: #05232F;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-auto-rows: 0;
  border-radius: 3px;
}

#screen{
  grid-column-start: span 4;
  background-color: white;
  text-align: end;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Calculator', sans-serif;                    
  overflow-x: hidden;
  border-radius: 3px;
}

#b-plus{
  
  grid-column: 4;
  grid-row: 3/5;
}

#b-equal{
  background-color: #096B8E;
  border-color: #096B8E;
  
  grid-row: span 2;
}

#b-equal:hover{
  background-color: #1693BF;
  border-color: #1693BF;
}

#b-zero{
  grid-column: 1/3;
}

.button{
  font-size: 15px;
  color: white;
}

.number-button{
  background-color: #09374A;
  border-color: #09374A;
}

.number-button:hover{
  background-color: #105775;
  border-color: #105775;
  color: white;
}

#AC{
  background-color: #6F040F;
  border-color: #6F040F;
}

#AC:hover{
  background-color: #960514;
  border-color: #960514;
}

.operation-button{
  background-color: #0C2A5A;
  border-color: #0C2A5A;
}

.operation-button:hover{
  background-color: #133C7D;
  border-color: #133C7D;
}

let operationString = "";

const screen = document.getElementById("screen");

const numberOperations = (array) => {
  let number = [0, 0, 0, 0];
  array.forEach((element) => {
    switch (element) {
      case "-":
        number[0]++;
        break;
      case "+":
        number[1]++;
        break;
      case "*":
        number[2]++;
        break;
      case "/":
        number[3]++;
        break;
    }
  });
  return number;
};

const fourOperations = (times, simbol, array) => {
  for (let i = 0; i < times; i++) {
    let simbolIndex = array.findIndex((item) => {
      return item === simbol;
    });
    if (simbolIndex) {
      switch (simbol) {
        case "-":
          array[simbolIndex] =
            parseFloat(array[simbolIndex - 1]) -
            parseFloat(array[simbolIndex + 1]);
          array.splice(simbolIndex + 1, 1);
          array.splice(simbolIndex - 1, 1);
          break;
        case "+":
          array[simbolIndex] =
            parseFloat(array[simbolIndex - 1]) +
            parseFloat(array[simbolIndex + 1]);
          array.splice(simbolIndex + 1, 1);
          array.splice(simbolIndex - 1, 1);
          break;
        case "*":
          array[simbolIndex] =
            parseFloat(array[simbolIndex - 1]) *
            parseFloat(array[simbolIndex + 1]);
          array.splice(simbolIndex + 1, 1);
          array.splice(simbolIndex - 1, 1);
          break;
        case "/":
          if(array[simbolIndex + 1]===0){
            operationString='Math Error'
            return 0;
          }
          array[simbolIndex] =
            parseFloat(array[simbolIndex - 1]) /
            parseFloat(array[simbolIndex + 1]);
          array.splice(simbolIndex + 1, 1);
          array.splice(simbolIndex - 1, 1);
          break;
      }
    }
  }
  return array;
};

const getResult = () => {
  let array = operationString.split(/([+|\-|*|/])/);
  if (array[array.length - 1].match("[0-9]")) {
    const number = numberOperations(array);
    array = fourOperations(number[0], "-", array);
    array = fourOperations(number[1], "+", array);
    array = fourOperations(number[2], "*", array);
    array = fourOperations(number[3], "/", array);

    //for(let i=0; i<number; i++){
    //let subtract = array.findIndex((item)=>{
    //return item === '-'
    //})
    //console.log(subtract)
    //if(subtract){
    //let result = parseFloat(array[subtract-1]) - parseFloat(array[subtract+1])
    //array[subtract] = result
    //console.log(array)
    //array.splice(subtract+1,1)
    //array.splice(subtract-1,1)
    //console.log(array)
    //}
    //}
    //console.log(parseFloat(insurance[insurance.length-1]))
  }
  screen.textContent = array[0];
  operationString = "";
};

const chekSimbol = (simbol) => {
  let operationArray = operationString.split("");
  if (operationArray.length !== 0) {
    if (operationArray[operationArray.length - 1].match("[0-9]")) {
      operationString += simbol;
      screen.textContent = operationString;
    }
  }
};

document.getElementById("b-one").addEventListener("click", (e) => {
  operationString += "1";
  screen.textContent = operationString;
});

document.getElementById("b-two").addEventListener("click", (e) => {
  operationString += "2";
  screen.textContent = operationString;
});

document.getElementById("b-three").addEventListener("click", (e) => {
  operationString += "3";
  screen.textContent = operationString;
});

document.getElementById("b-four").addEventListener("click", (e) => {
  operationString += "4";
  screen.textContent = operationString;
});

document.getElementById("b-five").addEventListener("click", (e) => {
  operationString += "5";
  screen.textContent = operationString;
});

document.getElementById("b-six").addEventListener("click", (e) => {
  operationString += "6";
  screen.textContent = operationString;
});

document.getElementById("b-seven").addEventListener("click", (e) => {
  operationString += "7";
  screen.textContent = operationString;
});

document.getElementById("b-eigth").addEventListener("click", (e) => {
  operationString += "8";
  screen.textContent = operationString;
});

document.getElementById("b-nine").addEventListener("click", (e) => {
  operationString += "9";
  screen.textContent = operationString;
});

document.getElementById("b-zero").addEventListener("click", (e) => {
  let operationArray = operationString.split("");
  if (operationArray.length !== 0) {
    if (operationArray[operationArray.length - 1].match("[0-9|.]")) {
      operationString += "0";
      screen.textContent = operationString;
    }
  }
});

document.getElementById("b-plus").addEventListener("click", (e) => {
  chekSimbol("+");
});

document.getElementById("b-division").addEventListener("click", (e) => {
  chekSimbol("/");
});

document.getElementById("b-multiplication").addEventListener("click", (e) => {
  chekSimbol("*");
});

document.getElementById("b-minus").addEventListener("click", (e) => {
  chekSimbol("-");
});

document.getElementById("b-point").addEventListener("click", (e) => {
  let array = operationString.split(/([+|\-|*|/])/);
  if (operationString === "") {
    operationString = "0.";
  } else {
    if (!array[array.length - 1].match("[0-9]+[.]+")) {
      operationString += ".";
      screen.textContent = operationString;
    }
  }
});

document.getElementById("AC").addEventListener("click", (e) => {
  operationString = "";
  screen.textContent = "0";
});

document.getElementById("b-equal").addEventListener("click", (e) => {
  let array = operationString.split('')
  if(operationString != '' && array[array.length-1].match('[0-9]')){
    getResult(); 
  }  
});