+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <meta name="author" content="Permondes (see permondes.de)">
+ <meta name="date" content="2019-12-17">
+
+ <title>Permondes Pocket Calculator</title>
+
+ <!-- Taschenrechner, adopted from https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Taschenrechner
+ Usage
+ = | <enter>: Ergebnis berechnen
+ √ | "r": Wurzel
+ x²| "S": Quadrat
+ ln| "l": natürlicher Logarithmus
+ ANS|"a": answer, letztes Resultat
+ STO|"s": store in memory
+ RCL|"m": recall memory
+ ENG|"n": notation (exponential / norm)
+ ESC|"c": zurücksetzen auf Null
+ -->
+
+<!-- style ------------------------------------------------------------------------------------------------------------>
+<style>
+body {
+ background: #505050;
+ }
+
+/* form of calculator */
+#calc {
+ border: 1px solid dimgray;
+ border-radius: 0.2em;
+ box-shadow: inset 0 0 1px LightGray;
+ display: inline-block;
+ padding: 1em 0;
+ text-align: center;
+ width: 50em;
+}
+
+/* input and output area fieldset */
+.cl_IO {
+ border: inset;
+}
+
+#f_Eingabe, #f_Ergebnis, #f_Formel {
+ display: block;
+ height: 1em;
+ background: #cee7ce;
+ font-size: 300%;
+ padding: 0.2em 1em; /* top, bottom: 0; left, right: 1 */
+ text-align: left;
+}
+
+#f_Ergebnis {
+ background: #aec7ae;
+ text-align: right;
+}
+
+/* buttens fieldset */
+.cl_Buttons {
+ border: none;
+ margin: 0 auto;
+ padding-bottom: 0;
+}
+
+#calc button {
+ border: 2px #222222 outset;
+ background-image: linear-gradient(to bottom right, #222222, #585858);
+ font-weight: bold;
+ color: white;
+ cursor: pointer;
+ margin: 5px;
+ padding: 0px;
+ width: 4em;
+ height: 3em;
+ font-size: 200%;
+}
+
+</style>
+
+<!-- script ------------------------------------------------------------------------------------------------------------>
+<script>
+"use strict";
+
+var
+ v_Formel, v_Ergebnis, v_Eingabe,
+ ans = 0.0, mem = 0.0,
+ v_FormularOverwrite = true,
+ notation = "NORM";
+
+// convert a number to text taking into account the notation
+function convertNumToText(p_notation, p_number) {
+ var v_text;
+ if (p_notation == "ENG") {
+ v_text = p_number.toExponential();
+ } else {
+ v_text = p_number.toString();
+ }
+ return v_text;
+}
+
+function toggleNotation() {
+ switch (notation) {
+ case "NORM":
+ notation = "ENG";
+ break;
+ case "ENG":
+ notation = "NORM";
+ break;
+ }
+ v_Ergebnis.value = convertNumToText(notation, ans);
+}
+
+/* clear Formular field */
+function clear_Formular () {
+ v_Formel.value = "";
+}
+
+/* clear fields */
+function key_clear () {
+ v_Eingabe.value = "";
+ clear_Formular ();
+ v_Ergebnis.value = "";
+}
+
+/* delete last character */
+function deletechar () {
+ v_Eingabe.value = v_Eingabe.value.substr(0, v_Eingabe.value.length-1);
+}
+
+/* input of number, decimal point, e or () */
+function key_number (c) {
+ if (c == ",") {c="."}
+ v_Eingabe.value += c;
+}
+
+function getLastResult () {
+ v_Eingabe.value = convertNumToText(notation, ans);
+ }
+
+// Memory handling
+function memory_store () {
+ mem = ans;
+}
+
+function memory_recall () {
+ v_Eingabe.value = convertNumToText(notation, mem);
+}
+
+
+/* Basic arithmetics */
+function operator_function (c) {
+ if (v_FormularOverwrite) {
+ clear_Formular();
+ v_FormularOverwrite = false; }
+ v_Formel.value += " " + v_Eingabe.value + " " + c; // Operatoren sind durch Leerzeichen von den Zahlen getrennt
+ v_Eingabe.value = "";
+}
+
+/* In der Funktion extra() werden Math Berechnungen durchgeführt */
+function extra_function (type) {
+ switch (type) {
+ case "√":
+ v_Eingabe.value = Math.sqrt(v_Eingabe.value);
+ break;
+ case "x²":
+ v_Eingabe.value = Math.pow(v_Eingabe.value, 2);
+ break;
+ case "ln":
+ v_Eingabe.value = Math.log(v_Eingabe.value);
+ break;
+ }
+}
+
+// Bei einem Klick auf = (oder bei passender Benutzung der Tastatur) berechnet die Funktion result() das Ergebnis.
+// Mit einem RegEx werden nur Ziffern, der Dezimalpunkt und die vier Operatoren als gültige Zeichen für die Berechnung zugelassen (inklusive möglicher Leerzeichen). Dabei werden die üblichen Tastenbeschriftungen für Multiplikation und Division durch ihre JavaScript-Entsprechungen ersetzt. Das eigentliche Rechenergebnis wird mit der window-Methode eval berechnet.
+function result () {
+ operator_function("");
+ var
+ input = v_Formel.value,
+ r = 0
+ ;
+
+ // replace × with * and ÷ with / for eval()
+ input = input.replace(/×/g, "*").replace(/÷/g, "/");
+
+ // remove anything else that is not allowed here
+ input = input.replace(/[^0-9.e() +\-*\/]/g, "");
+
+ try {
+ r = eval(input);
+ } catch (e) {
+ r = 0;
+ }
+
+// v_Ergebnis.textContent = convertNumToText(notation, r);
+ v_Formel.value = v_Formel.value + "=";
+ v_Ergebnis.value = convertNumToText(notation, r);
+ v_FormularOverwrite = true;
+ ans = r;
+ }
+
+ /* Der Eventhandler DOMContentLoaded wird ausgelöst, wenn das DOM vollständig aufgebaut,
+ aber noch nicht alle externen Ressourcen wie z.B. Bilder geladen sind.. */
+document.addEventListener("DOMContentLoaded", function () {
+
+ v_Formel = document.getElementById("f_Formel");
+ v_Ergebnis = document.getElementById("f_Ergebnis");
+ v_Eingabe = document.getElementById("f_Eingabe");
+ key_clear();
+ var form = document.getElementById("calc");
+
+ /* click-handling für alle buttons in #calc erstellen */
+ document.querySelectorAll("#calc button").forEach(function (b) {
+ var c = b.textContent;
+
+ switch (c) {
+ case "9":
+ case "8":
+ case "7":
+ case "6":
+ case "5":
+ case "4":
+ case "3":
+ case "2":
+ case "1":
+ case "0":
+ case ".":
+ case "e":
+ case "(":
+ case ")":
+ b.addEventListener("click", function () { key_number(c); });
+ break;
+
+ case "ANS":
+ b.addEventListener("click", function () {getLastResult(); });
+ break;
+
+ case "STO":
+ b.addEventListener("click", function () { memory_store(); });
+ break;
+ case "RCL":
+ b.addEventListener("click", function () { memory_recall(); });
+ break;
+
+ case "+":
+ case "-":
+ case "×":
+ case "÷":
+ b.addEventListener("click", function () { operator_function(c); });
+ break;
+
+ case "√":
+ case "x²":
+ case "ln":
+ b.addEventListener("click", function () { extra_function(c); });
+ break;
+
+ case "DEL":
+ b.addEventListener("click", function () { deletechar() } );
+ break;
+
+ case "C":
+ b.addEventListener("click", function () {key_clear() });
+ break;
+
+ case "=":
+ b.addEventListener("click", function () {result() });
+ break;
+
+ case "ENG":
+ b.addEventListener("click", function () {toggleNotation();});
+ break;
+
+ }
+ });
+
+ /* reacting on keypress */
+ document.addEventListener("keyup", function (ev) {
+ var c = ev.key;
+
+ switch (c) {
+ case "9":
+ case "8":
+ case "7":
+ case "6":
+ case "5":
+ case "4":
+ case "3":
+ case "2":
+ case "1":
+ case "0":
+ case ".":
+ case ",":
+ case "e":
+ case "(":
+ case ")":
+ key_number(c);
+ break;
+ case "l":
+ extra_function("ln");
+ break;
+ case "r":
+ extra_function("√");
+ break;
+ case "S":
+ extra_function("x²");
+ break;
+ case "Escape": // <escape> to clear display
+ case "c":
+ key_clear();
+ break;
+ case "Backspace": // <backspace> to remove 1 char
+ deletechar();
+ break;
+ case "*":
+ case "/":
+ case "+":
+ case "-":
+ operator_function(c);
+ break;
+ case "Enter":
+ result();
+ break;
+ case "a":
+ getLastResult();
+ break;
+ case "m":
+ memory_recall();
+ break;
+ case "s":
+ memory_store();
+ break;
+ case "n":
+ toggleNotation();
+ break;
+ }
+ });
+
+ /* Da der Taschenrechner ein einzeiliges Formularfeld enthält,
+ kann dieses Formular jederzeit mit Betätigung der Eingabetaste abgesendet werden.
+ Ein Absenden ist im Zusammenhang mit dem Taschenrechner jedoch unerwünscht.
+ Deshalb wird mit addEventListener eine Funktion an das submit-Event des <form>-Elements gebunden, die verhindert,
+ dass der Browser das Standardverhalten beim Absenden eines Formulars ausführt: */
+ form.addEventListener("submit", function (ev) {
+ // prevent form submission and page reload
+ ev.preventDefault();
+ ev.stopPropagation();
+ return false;
+ });
+ form.addEventListener("dblclick", function (ev) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ return false;
+ });
+
+
+} )
+
+</script>
+
+</head>
+
+<!-- body -------------------------------------------------------------------------------------------------------------->
+<body>
+ <h1>Permondes <br/>Pocket Calculator</h1>
+ <main role="main">
+ <form id="calc">
+ <fieldset class="cl_IO">
+ <input id="f_Formel" readonly></input>
+ <input id="f_Ergebnis" readonly></input>
+ <input id="f_Eingabe" readonly></input>
+ </fieldset>
+ <fieldset class="cl_Buttons">
+ <button>√</button>
+ <button>x²</button>
+ <button>ln</button>
+ <button> </button>
+ <button> </button>
+
+ <button>STO</button>
+ <button>RCL</button>
+ <button>ENG</button>
+ <button>DEL</button>
+ <button>C</button>
+
+ <button>7</button>
+ <button>8</button>
+ <button>9</button>
+ <button>(</button>
+ <button>)</button>
+
+ <button>4</button>
+ <button>5</button>
+ <button>6</button>
+ <button>×</button>
+ <button>÷</button>
+
+ <button>1</button>
+ <button>2</button>
+ <button>3</button>
+ <button>+</button>
+ <button>-</button>
+
+ <button>0</button>
+ <button>.</button>
+ <button>e</button>
+ <button>ANS</button>
+ <button>=</button>
+ </fieldset>
+ </form>
+ </main>
+</body>
+
+</html>
projects / PocketCalculator.git / commitdiff