Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a day ago

I am unsure of what is causing the issue with the calculator created using html, css, and js.

The calculator code is not always functioning correctly, and some of the operators, such as +, -, x, and ⁄, are not working. I followed a YouTube tutorial, and I've reviewed the code repeatedly and still can't identify the issue. The HTML and CSS seem to be alright, so I assume the problem stems from the JavaScript section. I've shared the complete code below; please have a look and let me know if you can spot any errors.

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">
Answers(1)
avatar
Tolerim
a day ago
Verified Answer
The issue might be with the flushOperation function, specifically with the division operation. When dividing by zero, the result will be NaN (Not a Number), which can cause issues with the calculator's functionality. To fix this, you can add a check to see if intBuffer (the number being used in the operation) is equal to 0 when the previous operator is division. If this is the case, you can set runningTotal to 'NaN' and return, effectively preventing the operation from being performed. Here's the updated flushOperation function with the fix: 
if(previousOperator === '+'){
        runningTotal += intBuffer;
    }else if(previousOperator === '−'){
        runningTotal -= intBuffer;
    }else if(previousOperator === '×'){
        runningTotal *= intBuffer;
    }else if(previousOperator === '÷'){
        if(intBuffer === 0){
            runningTotal = 'NaN';
            return;
        }
        runningTotal /= intBuffer;
    }
}
With this fix in place, the calculator's functionality should be more reliable.
;