diff --git a/calculator.js b/calculator.js index dd4e670..3ad1464 100644 --- a/calculator.js +++ b/calculator.js @@ -7,7 +7,7 @@ var op = '+', result = 0, isShowResult = true; const KEY = 'keydown', CLICK = 'click', MAX_CHARS = 23; -const ZERO = '0', DOT = '.', NEG = '-'; +const ZERO = '0', DOT = '.', NEG = '-', EMPTY = ''; const calc = /** @type {HTMLDivElement} */ (document.getElementById('calculator')); @@ -32,7 +32,8 @@ calc.addEventListener(KEY, btnKeyEvent); * * @description Firstly it checks if backspace key was pressed. * If so, it invokes function deleteLastChar() to delete previous char entered. - * Secondly it checks if delete key was pressed and invokes btnClearEntryEvent() + * Secondly it checks if Insert key was pressed and invokes btnNegateEvent(). + * Thirdly it checks if delete key was pressed and invokes btnClearEntryEvent() * if that's the case, thus behaving the same as the CE's #ce `button`. * Then it checks if the event is not a 'repeat'. * If it's not a 'repeat', it iterates over each .key `button`. @@ -43,6 +44,8 @@ calc.addEventListener(KEY, btnKeyEvent); function btnKeyEvent({ key, keyCode, repeat }) { if (keyCode == 8) deleteLastChar(); // key: "Backspace" (ASCII 8) + else if (keyCode == 45) btnNegateEvent(); // key: "Insert" (ASCII 45) + else if (keyCode == 46) btnClearEntryEvent(); // key: "Delete" (ASCII 46) else if (!repeat) for (const btn of keyButtons) if (key == btn.textContent) { @@ -215,3 +218,59 @@ function btnNegateEvent() { } // ========================================================================== \\ + +document.getElementById('sqrt')?.addEventListener(CLICK, btnSqrtEvent); + +/** + * Handles the 'click' event of the #sqrt `button` element. + * Calculates square root of the current value on the #calculator's #display. + * + * @description This callback triggers when #sqrt `button` is clicked. + * If `isShowResult` is true, it calculates the square root of the result. + * Then it calculates and displays the square root of the current display value. + */ +function btnSqrtEvent() { + if (isShowResult) result = Math.sqrt(result) || 0; + display.textContent = (Math.sqrt(+display.innerText) || 0) + EMPTY; +} + +// ========================================================================== \\ + +document.getElementById('percent')?.addEventListener(CLICK, btnPercentEvent); + +/** + * Handles the 'click' event of the #percent `button` element. + * Calculates percentage of the current value on the #calculator's #display + * relative to the result. + * + * @description This callback triggers when #percent `button` is clicked. + * If `isShowResult` is true, it does nothing. + * Otherwise, it calculates and displays the percentage of the current display + * value relative to the result. + */ +function btnPercentEvent() { + if (isShowResult) return; + display.textContent = +display.innerText * result / 100 + EMPTY; +} + +// ========================================================================== \\ + +document.getElementById('reciprocal')?.addEventListener(CLICK, btnInverseEvent); + +/** + * Handles the 'click' event of the #reciprocal `button` element. + * Calculates reciprocal (1/x) of current value on the #calculator's #display. + * + * @description This callback triggers when #reciprocal `button` is clicked. + * If `isShowResult` is true, it calculates the reciprocal of the result. + * Then it calculates and displays the reciprocal of the current display value. + */ +function btnInverseEvent() { + var r; + + if (isShowResult) result = isFinite(r = 1 / result) ? r : 0; + + display.textContent = (isFinite(r = 1 / +display.innerText) ? r : 0) + EMPTY; +} + +// ========================================================================== \\