hcodebr / curso-javascript-projeto-calculadora-clone

138 stars 212 forks source link

Erro na aula C09 #4

Closed felipeapellegrini closed 4 years ago

felipeapellegrini commented 4 years ago

Boa tarde a todos.

Qualquer click meu retorna "error". Eu já revisei o código algumas vezes e não encontrei o motivo. Podem me ajudar?

Abs e Feliz Natal!

class CalcController{

constructor(){

    this.operation = [];
    this._locale = 'pt-BR';
    this._displayCalcEl =  document.querySelector("#display");
    this._dateEl = document.querySelector("#data");
    this._timeEl = document.querySelector("#hora");
    this._currentDate;
    this.initialize();
    this.initButtonsEvents();

}

initialize(){

    this.setDisplayDateTime();

    setInterval(() => {
        this.setDisplayDateTime();

    }, 1000);
}

addEventListenerAll(element, events, fn){

    events.split(' ').forEach(event => {

        element.addEventListener(event, fn, false);
    });
}

clearAll(){

    this._operation = [];

}

clearEntry(){

    this._operation.pop();

}

addOperation(value){

    this._operation.push(value);
    console.log(this._operation);
}

setError(){
    this.displayCalc = "Error";
}

execBtn(value){

    switch (value) {
        case 'ac':

            break;
        case 'ce':

            break;
        case 'soma':

            break;

        case 'subtracao':

            break;

        case 'multiplicacao':

            break;

        case 'divisao':

            break;

        case 'porcento':

            break;

        case 'igual':

            break;

        case 'ponto':

        break;

        case '0':
        case '1':
        case '2':
        case '3':
        case '4':
        case '5':
        case '6':
        case '7':
        case '8':
        case '9':
            this.addOperation(parseInt(value));

            break;

        default:
            this.setError();
            break;
    }
}

initButtonsEvents(){

    let buttons = document.querySelectorAll("#buttons > g, #parts > g");

    buttons.forEach((btn, index)=>{

        this.addEventListenerAll(btn, "click drag", e=> {

            let textBtn = btn.className.baseVal.replace("btn-", "");

            this.execBtn();
        });

        this.addEventListenerAll(btn, "mouseover mouseup mousedown", e =>{

            btn.style.cursor = "pointer";
        });
    });

}

setDisplayDateTime(){

    this.displayDate = this.currentDate.toLocaleDateString(this._locale, {
        day: "2-digit",
        month: "short",
        year: "numeric"
    });
    this.displayTime = this.currentDate.toLocaleTimeString(this._locale);
}

get displayDate(){

    this._dateEl.innerHTML
}

set displayDate(value){

    return this._dateEl.innerHTML = value;
}

get displayTime(){

    this._timeEl.innerHTML
}

set displayTime(value){

    return this._timeEl.innerHTML = value;
}

get displayCalc(){

    return this._displayCalcEl.innerHTML;
}

set displayCalc(valor){
    this._displayCalcEl.innerHTML = valor;
}

get currentDate(){
    return new Date();
}

set currentDate(value){
    this._currentDate = value;
}

}

felipeapellegrini commented 4 years ago

Solucionei!

Ao encontrar o primeiro problema percebi que existia um outro problema também passando despercebido.. hehehe

initButtonsEvents(){

let buttons = document.querySelectorAll("#buttons > g, #parts > g");

buttons.forEach((btn, index)=>{

    this.addEventListenerAll(btn, "click drag", e=> {

        let textBtn = btn.className.baseVal.replace("btn-", "");

        this.execBtn(); //aqui faltou eu informar o textBtn
    });

    this.addEventListenerAll(btn, "mouseover mouseup mousedown", e =>{

        btn.style.cursor = "pointer";
    });
});   

}

E o problema #2 que eu encontrei tava na declaração do constructor:

constructor(){

    this.operation = []; //essa variavel deveria ser ._operation, por isso, na execucao do codigo o programa não conseguia rodar o addOperation
    this._locale = 'pt-BR';
    this._displayCalcEl =  document.querySelector("#display");
    this._dateEl = document.querySelector("#data");
    this._timeEl = document.querySelector("#hora");
    this._currentDate;
    this.initialize();
    this.initButtonsEvents();

}

Obrigado e feliz nata a todos!