// This source is copyrighted (c) 2017 by John Wells. // Given the amount of time spent coding it, use of // this code or parts of it require this notice to be // included in your source. You may limit this notice // to the parts or concepts used by your code. // https://code.sololearn.com/WAFrAL7FHPR2/?ref=app // This JavaScript functions provide the functions // required by the web page calculator that // performs math in base 2, 8, 10, and 16. Thanks // to Henry Kamulanje for his calculator, which I // looked at for ideas and tricks, located here: // https://code.sololearn.com/WA581w7B8GiA/?ref=app //******************** initialize ******************** // // This function is called on body load to initialize // the global data. Initialize debug so one there is // place to turn on or off the debugging output. // Lookup by id the display, on, and dot buttons // so it is only done once. Also, lookup the debug, // mode, and ops paragraphs, for same reason. Make // an array of all buttons. Make sure the calc is off. // // Arguments // Nothing. // // Returns // Nothing. function initialize() { debugOpt = false; display = document.getElementById("display"); onB = document.getElementById("on"); dotB = document.getElementById("dot"); debug = document.getElementById("debug"); mStat = document.getElementById("mode"); ops = document.getElementById("ops"); buttons = document.getElementsByTagName("button"); off(); } // initialize //******************** on ******************** // // This function is called, when the on button is // hit. Change the button label to clear, clear // the calc, and change mode paragraph color. // // Arguments // Nothing. // // Returns // Nothing. function on() { onB.innerHTML = "Clr"; clear(); mStat.style.color = "green"; } // on //******************** off ******************** // // This function is called, when the off button is // hit. Clear the memory & calc, disable all buttons // (except on), clear the display button contents, // change the on button label back to on, change the // mode paragraph contents to off in red. // // Arguments // Nothing. // // Returns // Nothing. function off() { memory = "0"; clear(); disable(); display.innerHTML = ""; onB.innerHTML = "On"; mStat.innerHTML = "Off"; mStat.style.color = "red"; } // off //******************** unary ******************** // // This function is called, when a unary operator // button is pressed to perform the required // processing. // // Arguments // f is the character specifying what operation // to perform. // // Returns // Nothing. function unary(f) { // Based on the requested operation, perform it. switch (f) { // When the bin, oct, dec, or hex button is hit, // update the mode. case "B": case "O": case "D": case "H": updateMode(f); break; // When the assignment button is hit, finish any // outstanding operation, clear the ops paragraph // contents, change the held operation to // assignment, mark the number as done, and // check for decimal point updating buttons as // needed. case "=": display.innerHTML = finishOp(); ops.innerHTML = ""; holdOp = "=" numDone = true; holding = "0"; setOps(); break; // When the bit not button is hit, finish any // outstanding operation, retrive the current // contents of the display button as a decimal // number, perform the not, put the number back // into the contents in the current base, clear // the ops paragraph contents, change the held // operation to assignment, and mark the number // as done. case "~": display.innerHTML = finishOp(); var r = ~eval(decimal(display.innerHTML)); display.innerHTML = r.toString(base); ops.innerHTML = ""; holdOp = "=" numDone = true; break; // When memory clear button hit, finish any // outstanding operation, zero the memory, // clear the ops paragraph contents, change // the held operation to assignment, mark the // number as done, and check for decimal point // updating buttons as needed. case "C": display.innerHTML = finishOp(); memory = "0"; ops.innerHTML = ""; holdOp = "=" numDone = true; setOps(); break; // When memory plus button hit, finish any // outstanding operation, add the current // display button content into the saved memory, // clear the ops paragraph contents, change // the held operation to assignment, mark the // number as done, and check for decimal point // updating buttons as needed. case "P": display.innerHTML = finishOp(); var r = eval(memory)+eval(display.innerHTML); if (dot) { memory = r.toString(); } else { memory = r.toString(base); } ops.innerHTML = ""; holdOp = "=" numDone = true; setOps(); break; // When memory recall button hit, copy the // memory to the display button contents, // clear the ops paragraph contents, change // the held operation to assignment, mark the // number as done, and check for decimal point // updating buttons as needed. case "r": if (dot) { display.innerHTML = memory.toString(); } else { display.innerHTML = memory.toString(base); } ops.innerHTML = ""; numDone = true; setOps(); break; // When delete button hit, look at the display // button contents and delete the last digit. case "d": // If the contents has only one character or // the number is done, set it to zero. var l = display.innerHTML.length; if (l == 1 || numDone) { display.innerHTML = "0"; // Else if the contents has multiple characters, // update it. } else if (l > 0) { // If we are deleting the last digit leaving // just the sign, change the contents to // zero. var c = display.innerHTML.charAt(l-1); if (display.innerHTML.charAt(0) == "-" && l == 2) { display.innerHTML = "0"; // Otherwise, remove the last character. } else { display.innerHTML = display.innerHTML.slice(0, l-1); } // if // If the deleted character is a decimal // point, setup the dot ops. if (c == ".") { setOps(); } // if } // if break; // When change sign button hit, add or remove the // negative sign as needed and don't allow "-0". case "S": if (display.innerHTML.charAt(0) == "-") { display.innerHTML = display.innerHTML.slice(1, display.innerHTML.length); } else if (display.innerHTML.charAt(0) == "0") { } else { display.innerHTML = "-"+display.innerHTML; } // if break; // When we got something not expected, display // an error in the ops paragraph. default: ops.innerHTML = "Unary Error "+f; } // switch } // unary //******************** binary ******************** // // This function is called, when a binary operator // button is pressed to perform the required // processing. // // Arguments // f is the character specifying what operation // to perform. // // Returns // Nothing. function binary(f) { // Based on the operation display it's name in the // ops paragraph contents. switch (f) { case "-": ops.innerHTML = "Subtraction"; break; case "*": ops.innerHTML = "Multiplication"; break; case "/": ops.innerHTML = "Division"; break; case "^": ops.innerHTML = "Bit Xor"; break; case "&": ops.innerHTML = "Bit And"; break; case "+": ops.innerHTML = "Addition"; break; case "<": ops.innerHTML = "Left Shift"; break; case ">": ops.innerHTML = "Right Shift"; break; case "|": ops.innerHTML = "Bit Or"; break; case "R": ops.innerHTML = "Right Signed Shift"; break; default: ops.innerHTML = "Binary Error "+f; } // switch // Finish any outstanding operation, hold it's // value as the first number, also display the // result, mark the number as done, and check // for decimal point updating buttons as needed. holding = finishOp(); display.innerHTML = holding; numDone = true; holdOp = f; setOps(); } // binary //******************** digit ******************** // // This function is called, when a digit button // is pressed to perform the required // processing. // // Arguments // dig is the digit to display. // // Returns // Nothing. function digit(dig) { // If an operation finished the number, this is // the first digit of the next number so reset // the flag, set the display button contents to // zero, and update buttons that can no longer // be used. if (numDone) { numDone = false; display.innerHTML = "0"; setOps(); } // If there is only one character being displayed, // process based on what the character is. if (display.innerHTML.length == 1) { switch (display.innerHTML) { // When the existing character is zero and the // new digit is a decimal point, add it to the // display button contents plus update buttons // that can no longer be used and, otherwise, // replace it. case "0": if (dig == ".") { display.innerHTML += dig; setOps(); } else { display.innerHTML = dig; } // if break; // When the existing character is 1-9 and the // new digit is a decimal point, update buttons // that can no longer be used and in either // case add the digit to the display buttton // contents. case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": display.innerHTML += dig; if (dig == ".") { setOps(); } // if break; // When the existing character is anything else // (a-f expected), add the digit to the display // button contents. default: display.innerHTML += dig; break; } // switch // Otherwise, if the digit is a decimal point, // update buttons that can no longer be used and // add the digit to the display buttton contents. } else if (dig == ".") { display.innerHTML += dig; setOps(); // Otherwise, add the digit to the display button // contents. } else { display.innerHTML += dig; } // if } // digit //******************** clear ******************** // // This function resets the calculator. Reset the // contents of ops & debug paragraphes and display // button contents. Initialize the held first // number, hold operation, current base, and number // done flag. Enable most of the buttons, make sure // everything is set for no decimal point, and // change the mode to decimal. If debugging, reset // the debug paragraph last. // // Arguments // Nothing. // // Returns // Nothing. function clear() { ops.innerHTML = ""; debug.innerHTML = "Calculator by John Wells"; display.innerHTML = "0"; holding = "0"; holdOp = "="; base = 10; numDone = false; enable(); setOps(); updateMode("D"); if (debugOpt) debug.innerHTML = "Calculator by John Wells"; } // clear //******************** enable ******************** // // This function enables all buttons except those // in the hex class. For each button, check to // make sure it doesn't belong to the hex class // before enabling it. Reset it's color so it // shows it is enabled. // // Arguments // Nothing. // // Returns // Nothing. function enable() { for (var x = 0; x < buttons.length; x++) { var c = buttons[x].getAttribute("class"); if (c != "hex") { buttons[x].disabled = false; if (c == "power") { buttons[x].style.color = "purple"; } else if (c == "dot") { buttons[x].style.color = "red"; } else if (c == "ops") { buttons[x].style.color = "red"; } else { buttons[x].style.color = "black"; } } else { buttons[x].style.color = "grey"; } } dotB.style.color = "black"; } // enable //******************** disable ******************** // // This function disables all buttons except the // on button. For each button, check to make sure // it isn't the on button before disabling it and // changing it's color to grey. // // Arguments // Nothing. // // Returns // Nothing. function disable() { for (var x = 0; x < buttons.length; x++) { if (buttons[x].id != "on") { buttons[x].disabled = true; buttons[x].style.color = "grey"; } } } // disable //******************** setOps ******************** // // This function enables or disables dot class // buttons and updates dot to reflect the state. // Check the holding, memory, and display numbers. // If any of them has a decimal point, disable the // dot class buttons making them grey, otherwise, // enable them and make them their normal color. If // the display number doesn't have a decimal point, // enable the dot button and make it the normal color. // Otherwise, disable it and make it grey. // // Arguments // Nothing. // // Returns // Nothing. function setOps() { var d = checkData(display.innerHTML); var f = d || checkData(holding) || checkData(memory); for (var x = 0; x < buttons.length; x++) { if (buttons[x].getAttribute("class") == "dot") { buttons[x].disabled = f; buttons[x].style.color = f?"grey":"red"; } //if } // for dotB.disabled = d; dotB.style.color = d?"grey":"black"; dot = f; } // setOps //******************** checkData ******************** // // This function checks the string for a decimal // point. // // Arguments // s is the data to check. // // Returns // true, when the string contains a decimal point. function checkData(s) { var r = false; for (var i = 0; i < s.length; i++) { if (s.charAt(i) == ".") { r = true; break; } // if } // for return r; } // checkData //******************** updateMode ******************** // // This function updates the mode by enabling the // digit buttons the mode uses and disabling the // digit buttons it doesn't. It also updates the // displayed mode. // // Arguments // m is the new mode (binary, octal, decimal, or // hexadecimal). // // Returns // Nothing. function updateMode(m) { // For each button, check the class and process // as needed. for (var x = 0; x < buttons.length; x++) { switch (buttons[x].getAttribute("class")) { // When the button is a member of the hex // class and we are changing to hex mode, // enable it, otherwise, disable it. case "hex": if (m == "H") { buttons[x].disabled = false; buttons[x].style.color = "blue"; } else { buttons[x].disabled = true; buttons[x].style.color = "grey"; } // if break; // When the button is a member of the dec // class and we are changing to either hex or // dec mode, enable it, otherwise, disable it. case "dec": if (m == "H" || m == "D") { buttons[x].disabled = false; buttons[x].style.color = "black"; } else { buttons[x].disabled = true; buttons[x].style.color = "grey"; } // if break; // When the button is a member of the oct // class and we are changing to bin mode, // disable it, otherwise, disable it. case "oct": if (m == "B") { buttons[x].disabled = true; buttons[x].style.color = "grey"; } else { buttons[x].disabled = false; buttons[x].style.color = "black"; } // if break; // When the button is a member of the dot // class and it's the dot button, it is // enabled for dec mode and disabled for // any other mode. case "dot": if (buttons[x] == dotB) { if (m == "D") { buttons[x].disabled = false; buttons[x].style.color = "black"; } else { buttons[x].disabled = true; buttons[x].style.color = "grey"; } // if m } // if buttons break; } // switch } // for // Finish any outstanding operation and get the // display button contents, memory, and holding // first number as a number. display.innerHTML = finishOp(); var n = decimal(display.innerHTML); var s = decimal(memory); var h = decimal(holding); // Update the base to our new base and the mode // paragraph contents to reflect our base. switch (m) { case "B": base = 2; mStat.innerHTML = "Binary"; break; case "O": base = 8; mStat.innerHTML = "Octal"; break; case "D": base = 10; mStat.innerHTML = "Decimal"; break; case "H": base = 16; mStat.innerHTML = "Hexadecimal"; break; } // switch // Replace the display, memory, and holding in the // current base. display.innerHTML = n.toString(base); memory = s.toString(base); holding = h.toString(base); if (debugOpt) debug.innerHTML += "
Mode> display: "+n+"="+ display.innerHTML+" memory: "+s+"="+memory+ " holding: "+h+"="+holding; // Clear ops, hold operation, number done, and mode. ops.innerHTML = ""; holdOp = "="; numDone = true; mode = m; } // updateMode //******************** finishOp ******************** // // This function executes the binary operation, // when we have both numbers. // // Arguments // Nothing. // // Returns // The result of the calculation. function finishOp() { // Initialize result and process the held operation. var r = ""; switch (holdOp) { // When holding subtraction operation, subtract // the second number from the first. case "-": r = eval(decimal(holding))- eval(decimal(display.innerHTML)); break; // When holding multiplication operation, multiply // both numbers. case "*": r = eval(decimal(holding))* eval(decimal(display.innerHTML)); break; // When holding division operation, divide the // first number by the second. case "/": r = eval(decimal(holding))/ eval(decimal(display.innerHTML)); break; // When holding addition operation, add both // numbers. case "+": r = eval(decimal(holding))+ eval(decimal(display.innerHTML)); break; // When holding bit and operation, perform the // operation on both numbers. case "&": r = eval(decimal(holding))& eval(decimal(display.innerHTML)); break; // When holding bit or operation, perform the // operation on both numbers. case "|": r = eval(decimal(holding))| eval(decimal(display.innerHTML)); break; // When holding bit xor operation, perform the // operation on both numbers. case "^": r = eval(decimal(holding))^ eval(decimal(display.innerHTML)); break; // When holding left shift operation, perform the // shift on first number the second number bits. case "<": r = eval(decimal(holding))<< eval(decimal(display.innerHTML)); break; // When holding right shift operation, perform the // shift on first number the second number bits. case ">": r = eval(decimal(holding))>>> eval(decimal(display.innerHTML)); break; // When holding right signed shift operation, // perform the shift on first number the second // number bits. case "R": r = eval(decimal(holding))>> eval(decimal(display.innerHTML)); break; // When holding some unknown operation ("=" // expected), keep current display button contents // as the result. default: r = eval(decimal(display.innerHTML)); } // switch if (dot) { r = r.toString(); } else { r = r.toString(base); } // If debugging requested, display our result. // In either case, return the expression result. if (debugOpt) debug.innerHTML += "
Evalulate "+holding+ holdOp+display.innerHTML+"="+r; return r; } // finishOp //******************** decimal ******************** // // This function converts the argument from it's // current base into base 10 so it can be used // in an expression. If the base is 10, the data // is in decimal already, otherwise, get the // number in base 10. // // Arguments // s is the string in the current base. // // Returns // The value of s in base 10. function decimal(s) { var r; if (base == 10) { r = eval(s); } else { r = parseInt(s, base); } // if if (debugOpt) debug.innerHTML += "
Decimal: "+r+ " from ("+base+")"+s; return r; } // decimal

calculator mn