odin-calculator/script.js

const viewDiv = document.querySelector("#view");
const signGui = viewDiv.querySelector("#sign");
const valueGui = viewDiv.querySelector("#value");

function add(a, b) {
    return a + b;
}

function substract(a, b) {
    return a - b;
}

function multiply(a, b) {
    return a * b;
}

function divide(a, b) {
    return a / b;
}

function operate(equals) {
    switch(equals.operator) {
        case "+":
            return add(+equals.a, +equals.b);
        case "-":
            return substract(+equals.a, +equals.b);
        case "*":
            return multiply(+equals.a, +equals.b);
        case "/":
            return divide(+equals.a, +equals.b);
    }
}

function execute(operation) {
    if (operation.readyForEquasion) {
        const result = operate(operation);
        operation.addToA = !operation.addToA;
        operation.readyForEquasion = false;
        operation.operator = "";
        if (operation.addToA) {
            operation.a = `${result}`;
            operation.b = "";
            operation.outputOfEquasion = true;
            valueGui.textContent = `${operation.a}`;
        }
        console.table(operation);
        console.log(`Result: ${result}`);
    }
}

const operationInitial = {
    a: "0",
    operator: "",
    b: "",
    addToA: true,
    readyForEquasion: false,
    outputOfEquasion: false,
}

let operation = {};
Object.assign(operation, operationInitial);

let readyForEquasion = "";

function clearDisplay() {
    signGui.textContent = "";
    valueGui.textContent = `0`;
}

function clear() {
    clearDisplay();
    Object.assign(operation, operationInitial); 
}

function populateDisplay(operation) {
    signGui.textContent = `${operation.operator}`;
    if (operation.addToA) {
        valueGui.textContent = `${operation.a}`;
    } else {
        valueGui.textContent = `${operation.b}`;
    }
}

function click(value) {
    if (!isNaN(+value)) {
        if (operation.outputOfEquasion) {
            operation.a = value;
            operation.outputOfEquasion = false;
            populateDisplay(operation);
            operation.addToA = true;
        } else {
            if (operation.addToA) {
                if (operation.a == "0") {
                    operation.a = "";
                }
                operation.a += value;
                populateDisplay(operation);
            } else {
                if (operation.b == "0") {
                    operation.b = "";
                }
                operation.b += value;
                operation.readyForEquasion = true;
                populateDisplay(operation);
            }
        }
    } else if (value == "=") {
        execute(operation);
        populateDisplay(operation);
    } else {
        if (operation.operator == "") {
            operation.addToA = !operation.addToA;
            operation.operator = value;
            populateDisplay(operation);
        }
        if (operation.addToA) {
            operation.operator = value;
        }
        operation.outputOfEquasion = false;
    }
    console.table(operation);
}

function generateGui() {

    const allButtons = [
        [
            { id: "C", width: 1, height: 1, display: "C", },
            { id: "X", width: 1, height: 1, display: "X", },
            { id: "+", width: 1, height: 1, display: "+", },
            { id: "-", width: 1, height: 1, display: "-", },
        ],
        [
            { id: "7", width: 1, height: 1, display: "7", },
            { id: "8", width: 1, height: 1, display: "8", },
            { id: "9", width: 1, height: 1, display: "9", },
            { id: "*", width: 1, height: 1, display: "*", },
        ],
        [
            { id: "4", width: 1, height: 1, display: "4", },
            { id: "5", width: 1, height: 1, display: "5", },
            { id: "6", width: 1, height: 1, display: "6", },
            { id: "/", width: 1, height: 1, display: "/", },
        ],
        [
            { id: "1", width: 1, height: 1, display: "1", },
            { id: "2", width: 1, height: 1, display: "2", },
            { id: "3", width: 1, height: 1, display: "3", },
            { id: "=", width: 1, height: 2, display: "=", },
        ],
        [
            { id: "0", width: 2, height: 1, display: "0", },
            { id: ".", width: 1, height: 1, display: ".", },
        ],
    ];

    const buttonsDiv = document.querySelector("#buttons");

    const table = document.createElement("table");
    table.id = "table";

    allButtons.forEach(row => {
        const tableRow = document.createElement("tr");
        row.forEach(buttonProperties => {
            const button = document.createElement("td");
            button.setAttribute("value", buttonProperties.id);
            button.setAttribute("colspan", buttonProperties.width);
            button.setAttribute("rowspan", buttonProperties.height);
            button.textContent = buttonProperties.display;
            button.addEventListener("click", (event) => {
                click(event.target.getAttribute("value"));
            });
            tableRow.append(button);
        });
        table.append(tableRow);
    });
    buttonsDiv.append(table);
}

generateGui();

document.addEventListener("keydown", numbers);

function numbers(e) {
    e = e || window.event;
    let passLetter = e.key.toLowerCase();
    if (!isNaN(+passLetter)) {
        click(passLetter);
    } else if (passLetter == "escape") {
        clear();
    } else if (passLetter == "backspace") {
        if (!operation.outputOfEquasion) {
            if (operation.addToA) {
                operation.a = operation.a.substring(0, operation.a.length - 1);
                if (operation.a.length < 1) {
                    operation.a = "0";
                }
            } else {
                operation.b = operation.b.substring(0, operation.b.length - 1);
                if (operation.b.length < 1) {
                    operation.b = "0";
                }
            }
            populateDisplay(operation);
        } else {
            clear();
        }
    } else if (passLetter == "+"
            || passLetter == "-"
            || passLetter == "*"
            || passLetter == "/"
            || passLetter == "=") {
        click(passLetter);
    } else if (passLetter == "enter") {
        click("=");
    } else {
        console.log(passLetter);
    }
}