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}`);
    }
}

let operation = {
    a: "0",
    operator: "",
    b: "",
    addToA: true,
    readyForEquasion: false,
    outputOfEquasion: false,
}

let readyForEquasion = "";

function click(value) {
    if (!isNaN(+value)) {
        if (operation.outputOfEquasion) {
            operation.a = value;
            operation.outputOfEquasion = false;
            signGui.textContent = "";
            valueGui.textContent = `${operation.a}`;
            operation.addToA = true;
        } else {
            if (operation.addToA) {
                if (operation.a == "0") {
                    operation.a = "";
                }
                operation.a += value;
                valueGui.textContent = `${operation.a}`;
            } else {
                if (operation.b == "0") {
                    operation.b = "";
                }
                operation.b += value;
                operation.readyForEquasion = true;
                valueGui.textContent = `${operation.b}`;
            }
        }
    } else if (value == "=") {
        execute(operation);
        signGui.textContent = value;
    } else {
        if (operation.operator == "") {
            operation.addToA = !operation.addToA;
            operation.operator = value;
            signGui.textContent = value;
        }
        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 buttonsValues = [
    //     [7,8,9,"+"],
    //     [4,5,6,"-"],
    //     [1,2,3,"*"],
    //     [0,".","=","/"],
    // ];

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

    // for (let i = 0; i < 4; i++) {
    //     let button_row = document.createElement("div");
    //     button_row.classList.add("buttons-flex");
    //     for (let j = 0; j < 4; j++) {
    //         let button = document.createElement("div");
    //         button.classList.add("button");
    //         button.setAttribute("value", buttonsValues[i][j]);
    //         button.textContent = `${buttonsValues[i][j]}`;
    //         button.addEventListener("click", (event) => {
    //             click(event.target.getAttribute("value"));
    //         });
    //         button_row.append(button);
    //     }
    //     buttonsDiv.append(button_row);
    // }

    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);
        // let button_row = document.createElement("div");
        // button_row.classList.add("buttons-flex");
        // for (let j = 0; j < 4; j++) {
            // let button = document.createElement("div");
            // button.classList.add("button");
            // button.setAttribute("value", buttonsValues[i][j]);
//             // button.textContent = `${buttonsValues[i][j]}`;
//             button.addEventListener("click", (event) => {
//                 click(event.target.getAttribute("value"));
//             });
//             button_row.append(button);
//         }
//         buttonsDiv.append(button_row);
//     }
// }
}

generateGui();