Calculator with html, css and js. I have no idea what's wrong

Followed a youtube tutorial, reviewed the code countless times and I don't know what's wrong. The calculator sometimes works, other times doesnt. Some buttons (+, -, x, ⁄) dont work. Here's the entire code cause I have no ideia where the problem might be. I started with html, css and then js, I think the problem must be in the js part

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let runningTotal = 0;
let buffer = 0;
let previousOperator;

const screen = document.querySelector('.screen');

function buttonClick(value){
    if (isNaN(value)){
        handleSymbol(value);       
    }else{
        handleNumber(value);
    }
    screen.innerText = buffer;
}

function handleSymbol(symbol){
    switch(symbol){
        case "C":
            buffer = '0';
            runningTotal = 0;
            break;
        case '=':
            if(previousOperator === null){
                return
            }
            flushOperation (parseInt(buffer));
            previousOperator = null;
            buffer = runningTotal;
            runningTotal = 0;
            break
        case '←':
            if(buffer.length === 1){
                buffer = '0';
            }else{
                buffer = buffer.substring(0, buffer.length - 1);
            }
            break;
        case '+':
        case '−':
        case '×':
        case '÷':
            handleMath(symbol);
            break;
    }
}

function handleMath(symbol){
    if(buffer === '0'){
        return;
    }

    const intBuffer = parseInt(buffer);

    if(runningTotal === '0'){
        runningTotal = intBuffer
    }else{
        flushOperation(intBuffer);
    }
    previousOperator = symbol;
    buffer = '0';
}

function flushOperation(intBuffer){
    if(previousOperator === '+'){
        runningTotal += intBuffer;
    }else if(previousOperator === '−'){
        runningTotal -= intBuffer;
    }else if(previousOperator === '×'){
        runningTotal *= intBuffer;
    }else if(previousOperator === '÷'){
        runningTotal /= intBuffer;
    }
}

function handleNumber(numberString){
    if(buffer === '0'){
        buffer = numberString;
    }else{
        buffer += numberString;
    }
}

function init(){
    document.querySelector('.calc-buttons').addEventListener('click', function(event){
        buttonClick(event.target.innerText);
 })
}

init();

<!-- language: lang-css -->

html{
    box-sizing: border-box;
    height: 100%;
}

*,
*::before,
*::after{
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
body{
    align-items: center;
    background: linear-gradient(320deg, #eb92be, #ffef78, #63c9b4);
    display: flex;
    font-family: 'Dosis', sans-serif;
    font-display: swap;
    height: inherit;
    justify-content: center;
}

.wrapper{
   backdrop-filter: blur(5.5px);
   -webkit-backdrop-filter: blur(55.5px);
   border-radius: 16px; 
   box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
   color: #232323;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   background: rgba(225, 225, 225, 0.30);
   border: 1px solid rgba(225, 225, 225, 0.34);
   flex-basis: 400px;
   height: 540px;
   padding: 20px 35px;
}
.screen{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background:rgba(225, 225, 225, 0.75);
    border: 1px solid rgba(225, 225, 225, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    font-size: 35px;
    overflow: auto;
    padding: 20px;
    text-align: right;
    width: 326px;
}  

.calc-button-row{
    display: flex;
    justify-content: space-between;
    margin: 5% 0;
}

.calc-button{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(225, 225, 225, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    flex-basis: 20%;
    font-family: inherit;
    font-size: 24px;
    height: 65px;
}

.calc-button:last-child{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(225, 225, 225, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #fff;
    background: #d72880;
}
.calc-button:last-child:hover{
    background-color: inherit;
    color: inherit;
}

.calc-button:hover{
    background-color: inherit;

}

.calc-button:active{
    background-color: #ffef78;
}

.double{
    flex-basis: 47%;
}

.triple{
    flex-basis: 73%;
}

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Calculator</title>
</head>
<body>

    <div class="wrapper">
      <section class="screen">
        0
      </section>

      <section class="calc-buttons">
        <div class="calc-button-row">
            <button class="calc-button double">
              C
            </button>
            <button class="calc-button">
              ←
            </button>
            <button class="calc-button">
              ÷
            </button>
        </div>
        <div class="calc-button-row">
            <button class="calc-button">
              7
            </button>
            <button class="calc-button">
              8
            </button>
            <button class="calc-button">
              9
            </button>
            <button class="calc-button">
              ×
            </button>
        </div>
        <div class="calc-button-row">
            <button class="calc-button">
              4
            </button>
            <button class="calc-button">
              5
            </button>
            <button class="calc-button">
              6
            </button>
            <button class="calc-button">
              −
            </button>
        </div>
        <div class="calc-button-row">
              <button class="calc-button">
                1
              </button>
              <button class="calc-button">
                2
              </button>
              <button class="calc-button">
                3
              </button>
              <button class="calc-button">
                +
              </button>
        </div>

        <div class="calc-button-row">
              <button class="calc-button triple">
                0
              </button>
              <button class="calc-button">
                =
              </button>
              
            </div>
      </section>
    </div>


  <script src="scrip.js"></script>
  
</body>
</html>

<!-- end snippet -->

I've reviewed the code word by word, can't find the problem

There are couple of issues I found:

1. Sometimes buffer is number, sometimes - string. So in line:

buffer = buffer.substring(0, buffer.length - 1);

you have an Uncaught TypeError, so try always convert it to a string:

buffer = buffer.toString().substring(0, buffer.length - 1);

2. You are trying to check that runningTotal equals string '0', but it is a number.

if (runningTotal === 0)

You need to carefully check the types of all variables because now it's a bit messy.