Java : I'm trying to create a calculator

Hello guys, i’m trying to create a calculator in visual code with Java. It’s not a challenge of FCC, but i wanna complete this and adding in my portfolio.
I write the code when i click the numbers in the calculator it doesn’t work.

here is the 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">
    <title>Calculator</title>
    <link href="styles.css" rel="stylesheet">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="calculator-grid">
        <div class="output">
            <div data-previous-operand class="previous-operand"></div>
            <div data-current-operand class="current-operand"></div>
        </div>
        <button data-all-clear class="span-two">AC</button>
        <button data-delete>DEL</button>
        <button data-operation>÷</button>
        <button data-number >1</button>
        <button data-number >2</button>
        <button data-number >3</button>
        <button data-operation>*</button>
        <button data-number >4</button>
        <button data-number >5</button> 
        <button data-number >6</button>
        <button data-operation>+</button>
        <button data-number >7</button>
        <button data-number >8</button>
        <button data-number >9</button>
        <button data-operation>-</button>
        <button data-number >.</button>
        <button data-number >0</button>
        <button data-equals class="span-two">=</button>

    </div>
</body>
</html>

Here is the css

*, *::before, *::after {
    box-sizing: border-box;
    font-family: Gotham rounded, sans-serif;
    font-weight: normal;}
    
    body {
        padding: 0;
        margin: 0;
        background: linear-gradient(to right, #00AAFF, #00FF6C );
    }

    .calculator-grid {
        display: grid;
        justify-content: center;
        align-content:center; /*asi se arma la calculadora con css*/
        min-height: 100vh;
        grid-template-columns: repeat(4, 100px) ;
        grid-template-rows: minmax(120px, auto) repeat(5, 100px);

    }
    .calculator-grid > button {
        cursor:pointer;
        font-size: 2rem;
        border: 1px solid white;
        outline: none;
        background-color: rgba(255, 255, 255, .75);

    }

    .calculator-grid > button:hover {
        background-color: rgba(255, 255, 255, .9);
    }

    .span-two {
        grid-column: span 2;
    }
    .output {
        grid-column: 1/ -1;
        background-color: rgba(0 ,0 ,0, .75);
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        flex-direction: column;
        padding: 10px;
        word-wrap: break-word;
        word-break: break-all;
    }
    .output .previous-operand {
        color: rgba(255, 255, 255, .75);
        font-size: 1.5rem;
    }

   .output .current-operand {
        color: white;
        font-size: 2.5rem;
    }

here the java

class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement){
        this.previousOperandTextElement = previousOperandTextElement
        this.currentOperandTextElement = currentOperandTextElement
        this.clear()
    }

clear() {
this.currentOperand = ''
this.previousOperand = ''
this.operation = undefined
}
delete() {

}
appendNumber(number){
    if (number === '.' && this.currentOperand.includes('.')) return
this.currentOperand = this.currentOperand.toString() + number.toString()
}
chooseOperation(operation){

}
compute(){

}
updateDisplay() {
    this.currentOperandTextElement.innerText = this.currentOperand
}
}

const numberButtons = document.querySelectorAll('[data-number]')
const operationButtons = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelectorAll('[data-equals')
const deleteButton = document.querySelectorAll('[data-delete]')
const allClearButton =  document.querySelectorAll('[data-all-clear]')
const previousOperandTextElement = document.querySelectorAll('[data-previous-operand')
const currentOperandTextElement = document.querySelectorAll('[data-current-operand]')

const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)

numberButtons.forEach(button => { 
    button.addEventListener('click', () => {
        calculator.appendNumber(button.innerText)
        calculator.updateDisplay()
    })
})

it’s uncomplete and this is 2 try. Yo, it’s just harder don’t get frustating

Code is kinda hard to read here as you didn’t include it all inside quotes so all the HTML isn’t displayed and java isn’t formatted. Just glancing does seem you’re missing some closing brackets in places like this:

const previousOperandTextElement = document.querySelectorAll(‘[data-previous-operand’)

It would be better if you could put the code within a codepen pen and then share a link. Helps to troubleshoot if we can see the output and all the code.

1 Like

i didn’t know codepen thank you for . Althouth i correct that const it doesn’t work
https://codepen.io/spoonerboy/pen/eYKBQqr here my codepen

Seems you are using querySelectorAll to select a single item in several places. Remember, querySelectorAll returns a list. If you want to select a single HTML object, use querySelector instead (note: I’ve never tried to select objects just using a blank attribute, usually we would use either a class or id, so not sure that would work with querySelector). That’s why your display isn’t being selected in the constructor.

It can also be fixed by just selecting the first item in the list as below, but ideally if you know you’re trying to select a single html element, you shouldn’t use querySelectorAll.

const calculator = new Calculator(previousOperandTextElement[0], currentOperandTextElement[0])

1 Like

Thank you man, it was the main problem