js-calculator/main.js

/* our beloved variables */
let buffer = '';
let operator = '';
let workBuffer = '';
let oldBackgroundColor = '';
let buttonArray = [];
const container = document.querySelector("#container");

/* make header */
const header = document.createElement('h1');
header.textContent = "Calculator";
header.setAttribute('id', 'header');
container.appendChild(header);
/* make results div */
const results = document.createElement('div');
results.textContent = buffer;
results.setAttribute ('id', 'results');
container.appendChild(results);
/* eye candy for buttons */
function highlightCell() {
    oldBackgroundColor = this.style.backgroundColor;
    this.style.backgroundColor = 'darkgray';
}
function normalizeCell() {
    this.style.backgroundColor = oldBackgroundColor;
}
/* make grid */
const theGrid = document.createElement('div');
theGrid.setAttribute('id', 'theGrid');
for (i = 0; i < 20; i++) {
    const button = document.createElement('div');
    button.addEventListener('mouseenter', highlightCell);
    button.addEventListener('mouseleave', normalizeCell);
    button.setAttribute('id', 'button'+i);
    theGrid.appendChild(button);
    buttonArray.push(button);
}
container.appendChild(theGrid);

/* ez pz refresh function */
function refresh() {
    results.textContent = buffer;
}

/* cheater function for below */
function clear() {
    operator = '';
    workBuffer = '';
    refresh();
}
/* determine results */
function resolve() {
    switch(operator) {
        case "/" : 
            buffer = workBuffer / buffer;
            clear();
            break;
        case "*" :
            buffer = workBuffer * buffer;
            clear();
            break;
        case "+" :
            buffer = parseFloat(workBuffer) + parseFloat(buffer);
            clear();
            break;
        case "-" :
            buffer = workBuffer - buffer;
            clear();
            break;
        case "SQRT":
            buffer = Math.sqrt(parseFloat(buffer));
            clear();
            break;
    }
}

/* the actual calculator */
function operate(string) {
        switch(string) {
            case "." :
                if ((buffer.includes(string)) === false) {
                    buffer += string;
                    refresh();
                }
                break;
            case "*" :
            case "/" :
            case "+" :
            case "-" :
                if (operator === '') {
                    operator = string;
                    workBuffer = buffer;
                    buffer = '';
                }
                else {
                    resolve();
                    operator = string;
                    workBuffer = buffer;
                    buffer = '';
                }
                break;
            case "=" :
                resolve();
                break;
            case "DEL" :
                buffer = buffer.substring(0, buffer.length - 1);
                refresh();
                break;
            case "SQRT" :
                operator = string;
                resolve();
                break;
            case "CLR" :
                buffer = '';
                workBuffer = '';
                operator = '';
                refresh();
                break;
            case "NEG" :
                if (buffer.charAt(0) != "-") {
                    buffer = "-" + buffer;
                    refresh();
                }
                else {
                    buffer = buffer.substring(1, buffer.length);
                    refresh();
                }
                break;
            default :
                buffer += string;
                refresh();
                break;
        }
}

/* assign our buttons */
const button0 = document.querySelector("#button0");
button0.textContent = "SQRT";
const button1 = document.querySelector("#button1");
button1.textContent = "CLR";
const button2 = document.querySelector("#button2");
button2.textContent = "DEL";
const button3 = document.querySelector("#button3");
button3.textContent = "/";
const button4 = document.querySelector("#button4");
button4.textContent = "7";
const button5 = document.querySelector("#button5");
button5.textContent = "8";
const button6 = document.querySelector("#button6");
button6.textContent = "9";
const button7 = document.querySelector("#button7");
button7.textContent = "*";
const button8 = document.querySelector("#button8");
button8.textContent = "4";
const button9 = document.querySelector("#button9");
button9.textContent = "5";
const button10 = document.querySelector("#button10");
button10.textContent = "6";
const button11 = document.querySelector("#button11");
button11.textContent = "-";
const button12 = document.querySelector("#button12");
button12.textContent = "1";
const button13 = document.querySelector("#button13");
button13.textContent = "2";
const button14 = document.querySelector("#button14");
button14.textContent = "3";
const button15 = document.querySelector("#button15");
button15.textContent = "+";
const button16 = document.querySelector("#button16");
button16.textContent = "NEG";
const button17 = document.querySelector("#button17");
button17.textContent = "0";
const button18 = document.querySelector("#button18");
button18.textContent = ".";
const button19 = document.querySelector("#button19");
button19.textContent = "=";
/* assign listeners to buttons */
buttonArray.forEach (function (element) {
    element.addEventListener('click', function() {
        operate(element.textContent);
    })
});
/* same thing as above but for keypresses */
function keyboardEntry(key) {
    switch (key) {
        case "Enter" :
            operate("=");
            break;
        case "Backspace" :
            operate("DEL");
            break;
        case "Delete" :
            operate("CLR");
            break;
        case "1" :
        case "2" :
        case "3" :
        case "4" :
        case "5" :
        case "6" :
        case "7" :
        case "8" :
        case "9" :
        case "0" :
        case "+" :
        case "-" :
        case "/" :
        case "*" :
        case "." :
            operate(key);
            break;
    }
}
/* listen for keyboard presses */
document.addEventListener("keydown", function(event) { 
    event.preventDefault();
    keyboardEntry(event.key);  
});