Can someone help me figure out why my calculator isn't working with HTML, CSS and JS?

Melissa
May 20, 2023
263 views
0 votes
2 Answers

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

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();

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%;
}

<!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">
              &larr;
            </button>
            <button class="calc-button">
              &divide;
            </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">
              &times;
            </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">
              &minus;
            </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">
                &plus;
              </button>
        </div>

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


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

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

Answers

Hola buenas el problema era el código de js que no lee bien los tres = seguidos

    let rnningTotal = 0let 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();

- Andrew
- May 20, 2023 at 7:53 pm
- 0 votes
0
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);
1. 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.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Can someone help me figure out why my calculator isn’t working with HTML, CSS and JS?

Answers