commit b28c3c3e332233c3751316b6248da899f8ca0438 Author: Benjamin Kraft Date: Sun Mar 19 09:50:19 2023 +0100 Init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..723ef36 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/project.json b/project.json new file mode 100644 index 0000000..8e5d19d --- /dev/null +++ b/project.json @@ -0,0 +1,6 @@ +{ + "display_name": "Calculator", + "info_text": "Working, but no perfect mathematical calculator.", + "visible": false, + "tags": ["Maths", "Tool"] +} \ No newline at end of file diff --git a/public/Rechner.css b/public/Rechner.css new file mode 100644 index 0000000..0822fd7 --- /dev/null +++ b/public/Rechner.css @@ -0,0 +1,221 @@ +/* ALLGEMEINE STYLES */ + +body{ + background-color:#333; +} +input{ + padding:0; + border-radius:5px; +} +canvas{ + cursor:pointer; +} + +/* STARTZUSTÄNDE */ + + +#Calculator { + background-color:#999; + width:400px; + height:500px; + padding:50px; + display:block; + position:absolute; + margin:auto; + top:0; + right:0; + bottom:0; + left:0; + border-radius:20px; + box-shadow:20px 20px 40px #000; +} + + +#Numbers_MainOperators{ + width:400px; + height:300px; + position:relative; + +} +#equals{ + background-color:#99FF99; + width:100%; + height:100%; + font-size:250%; + +} +#clear,#delete{ + background-color:#FF9900; +} +.notEquals{ + position:relative; + width:75px; + height:100%; + padding:0px; + border-top:0px; + font-size:250%; +} + +#SpecialOperators{ + width:400px; + height:200px; +} +#SpecialOperators input{ + background-color:#000; + color:#FFF; + width:93px; + height:60px; + border-top:0px; + font-size:150%; +} +#shift{ + background-color:#5555FF !important; +} + + + +/* HOCHZAHL AUSWAHl */ + +#inputForPowX{ + background-color:#AAA; + width:210px; + height:120px; + padding:10px; + position:absolute; + top:25%; + right:20%; + border-radius:10px; + box-shadow:5px 5px 20px #000; +} + +#inputForPowX table{ + width:210px; + height:100px; + position:absolute; + margin:auto; + right:0; + bottom:10px; + left:0; +} + +#inputForPowX input{ + background-color:#000; + color:#FFF; + width:100%; + height:100%; + font-size:28px; + box-shadow:2px 2px 5px #000; +} + +#hidePowX{ + position:absolute; + margin:auto; + right:0; + left:0; + border-radius:3px; +} + + +/* INPUT UND OUTPUT FLÄCHEN */ + +#input,#output{ + background-color:#FFF; + width:80%; + height:100px; + position:absolute; + margin:auto; + right:0; + left:0; + text-align:center; + font-size:80px; + overflow:hidden; + border-radius:50px; + box-shadow:10px 10px 20px #000; +} + +#input{ + top:50px; +} +#output{ + bottom:50px; +} + + + +/* INFO FLÄCHE RECHTS */ + +#rollInOut{ + background-color:#FFF; + height:480px; + position:absolute; + margin:auto; + top:0; + bottom:0; + right:0; + border-radius:15px 0 0 15px; + box-shadow:10px 10px 20px #000; +} + +#verticalP{ + position:absolute; + bottom:170px; + left:-140px; + margin:0; + font-size:40px; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +#infoList li{ + margin:15px 5px 15px 5px; + font-size:20px; +} + +#setCommas{ + position:absolute; + top:40px; + right:80px; + font-size:20px; +} + + + +/* ANIMATIONEN */ + +@keyframes rollOut{ + from {width:50px;} + to {width:500px;padding-right:30px;} +} + +@keyframes rollIn{ + from {width:500px;} + to {width:50px;padding-right:0px;} +} + +@keyframes hide{ + from {opacity:1.0;} + to {opacity:0.0;} +} + +@keyframes show{ + from {opacity:0.0;} + to {opacity:1.0;} +} + +@keyframes FlashingInput{ + to {background-color:#FF0000;} +} + +@keyframes FlashingOutput{ + to {background-color:#00FF00;} +} + +@keyframes showPowDiv{ + from {opacity:0.0;transform:translate(-300px,-50px) scale(0.1);} + to {opacity:1.0;transform:scale(1.0);} +} + +@keyframes hidePowDiv{ + to {opacity:0.0;transform:translate(-300px,-50px) scale(0.1);} +} \ No newline at end of file diff --git a/public/Rechner.js b/public/Rechner.js new file mode 100644 index 0000000..27a3498 --- /dev/null +++ b/public/Rechner.js @@ -0,0 +1,496 @@ +/// VARIABLEN DEFINIEREN + +var input = ""; +var output = ""; +var clearinput = false; +var R_O_C = document.getElementById("rollOutCanvas").getContext("2d"); +var R_I_C = document.getElementById("rollInCanvas").getContext("2d"); +var H_P_X = document.getElementById("hidePowX").getContext("2d"); +var shift = false; + + + +/// FUNKTIONEN BESTIMMEN + +// Maths + +function renderInput(){ + // INPUTFELD AKTUALISIEREN + document.getElementById("input").innerHTML = input; +} + +function renderOutput(){ + // OUTPUTFELD AKTUALISIEREN + document.getElementById("output").innerHTML = output; +} + +function clearInput(){ + // INPUT ENTFERNEN + if (clearinput == true){ + input = ""; + } + clearinput = false; +} + + +function number(num){ + // NUMMERNFELD + document.getElementById("num" + num).addEventListener("click", function(){ + clearInput(); + input += num; + renderInput(); + }); +} + +function pow(pow_x){ + // POTENZEN + document.getElementById("pow" + pow_x).addEventListener("click", function(){ + clearInput(); + switch(pow_x) { + case 2: + input += "²"; + break; + case 3: + input += "³"; + break; + case 4: + input += "⁴"; + document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease"; + window.setTimeout(hidePowDiv,250); + break; + case 5: + input += "⁵"; + document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease"; + window.setTimeout(hidePowDiv,250); + break; + case 6: + input += "⁶"; + document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease"; + window.setTimeout(hidePowDiv,250); + break; + case 7: + input += "⁷"; + document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease"; + window.setTimeout(hidePowDiv,250); + break; + case 8: + input += "⁸"; + document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease"; + window.setTimeout(hidePowDiv,250); + break; + case 9: + input += "⁹"; + document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease"; + window.setTimeout(hidePowDiv,250); + break; + } + renderInput(); + }); +} + +function trigonometry(tri_x){ + // TRIGONOMETRISCHE FUNKTIONEN + document.getElementById(tri_x).addEventListener("click", function(){ + clearInput(); + switch(tri_x) { + case "sine": + input += "sin("; + break; + case "cosine": + input += "cos("; + break; + case "tangent": + input += "tan("; + break; + case "arcsine": + input += "sin⁻¹("; + break; + case "arccosine": + input += "cos⁻¹("; + break; + case "arctangent": + input += "tan⁻¹("; + break; + } + renderInput(); + }); +} + +function root(sqrt_cbrt){ + // WURZELN + document.getElementById(sqrt_cbrt).addEventListener("click", function(){ + clearInput(); + if (sqrt_cbrt == "sqrt"){ + input += "√("; + }else if (sqrt_cbrt == "cbrt"){ + input += "∛("; + } + renderInput(); + }); +} + +// Graphics + +function hideArcTrigonometry(){ + // TRIGONOMISCHE UMKEHRUNGEN ZU BEGINN VERSTECKEN + document.getElementById("arcsine").style.display = "none"; + document.getElementById("arccosine").style.display = "none"; + document.getElementById("arctangent").style.display = "none"; +} + + +function drawRollOutCanvas(){ + // CANVAS NACH LINKS AUSRICHTEN + document.getElementById("rollInCanvas").style.display = "none"; + document.getElementById("rollOutCanvas").style.display = ""; + document.getElementById("infoList").style.display = "none"; + document.getElementById("setCommas").style.display = "none"; +} + +function drawRollInCanvas(){ + // CANVAS NACH RECHTS AUSRICHTEN + document.getElementById("rollInCanvas").style.display = ""; + document.getElementById("rollOutCanvas").style.display = "none"; + window.setTimeout(showList_Range,500); +} + +function showList_Range(){ + // ANMERKUNGEN SICHTBAR MACHEN + document.getElementById("infoList").style.display = ""; + document.getElementById("setCommas").style.display = ""; +} + + +function hidePowDiv(){ + document.getElementById("inputForPowX").style.display = "none"; + powxVisible = false; +} + +function deleteFlashing(){ + // BLINKEN STOPPEN + document.getElementById("input").style.animation = ""; + document.getElementById("output").style.animation = ""; +} + + +/// AUSFÜHREN BEIM LADEN DER SEITE + +document.getElementById("comma").addEventListener("click", function(){ + // KOMMA + clearInput(); + input += ","; + renderInput(); +}); + +document.getElementById("add").addEventListener("click", function(){ + // ADDIEREN + clearInput(); + input += "+"; + renderInput(); +}); + +document.getElementById("subtract").addEventListener("click", function(){ + // SUBTRAHIEREN + clearInput(); + input += "-"; + renderInput(); +}); + +document.getElementById("multiply").addEventListener("click", function(){ + // MULTIPLIZIEREN + clearInput(); + input += "×"; + renderInput(); +}); + +document.getElementById("divide").addEventListener("click", function(){ + // DIVIDIEREN + clearInput(); + input += "÷"; + renderInput(); +}); + +document.getElementById("In").addEventListener("click", function(){ + // LOGARITHMUS NATURALIS + clearInput(); + input += "ln("; + renderInput(); +}); + +document.getElementById("parantheseOpen").addEventListener("click", function(){ + // KLAMMER AUF + clearInput(); + input += "("; + renderInput(); +}); + +document.getElementById("parantheseClose").addEventListener("click", function(){ + // KLAMMER ZU + clearInput(); + input += ")"; + renderInput(); +}); + +document.getElementById("answer").addEventListener("click", function(){ + // ANTWORT BENUTZEN + clearInput(); + if (output != 0){ + var lastAnswer = output.toString(); + input = input + lastAnswer; + renderInput(); + } +}); + +document.getElementById("powX").addEventListener("click", function(){ + // HOCH VIER BIS NEUN ELEMENT + if (powxVisible == false){ + document.getElementById("inputForPowX").style.display = ""; + document.getElementById("inputForPowX").style.animation = "showPowDiv 500ms ease"; + powxVisible = true; + }else if(powxVisible == true){ + document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease"; + window.setTimeout(hidePowDiv,250); + } +}); + +document.getElementById("hidePowX").addEventListener("click", function(){ + // HOCH VIER BIS NEUN ELEMENT VERSTECKEN + document.getElementById("inputForPowX").style.animation = "hidePowDiv 500ms ease"; + window.setTimeout(hidePowDiv,250); +}); + +document.getElementById("equals").addEventListener("click", function(){ + // ERGEBNIS AUSRECHNEN + rawInput = input; + + //Sonderzeichen zu Math-Elementen umwandeln + rawInput = rawInput.replace(/,/g,"."); + rawInput = rawInput.replace(/×/g,"*"); + rawInput = rawInput.replace(/÷/g,"/"); + rawInput = rawInput.replace(/\(([^\(]*)\)²/g,"Math.pow($1, 2)"); + rawInput = rawInput.replace(/\(([^\(]*)\)³/g,"Math.pow($1, 3)"); + rawInput = rawInput.replace(/\(([^\(]*)\)⁴/g,"Math.pow($1, 4)"); + rawInput = rawInput.replace(/\(([^\(]*)\)⁵/g,"Math.pow($1, 5)"); + rawInput = rawInput.replace(/\(([^\(]*)\)⁶/g,"Math.pow($1, 6)"); + rawInput = rawInput.replace(/\(([^\(]*)\)⁷/g,"Math.pow($1, 7)"); + rawInput = rawInput.replace(/\(([^\(]*)\)⁸/g,"Math.pow($1, 8)"); + rawInput = rawInput.replace(/\(([^\(]*)\)⁹/g,"Math.pow($1, 9)"); + rawInput = rawInput.replace(/sin\(([^\(]*)\)/g,"Math.sin($1*(Math.PI/180))"); + rawInput = rawInput.replace(/cos\(([^\(]*)\)/g,"Math.cos($1*(Math.PI/180))"); + rawInput = rawInput.replace(/tan\(([^\(]*)\)/g,"Math.tan($1*(Math.PI/180))"); + rawInput = rawInput.replace(/sin⁻¹\(([^\(]*)\)/g,"(Math.asin($1)*(180/Math.PI))"); + rawInput = rawInput.replace(/cos⁻¹\(([^\(]*)\)/g,"(Math.acos($1)*(180/Math.PI))"); + rawInput = rawInput.replace(/tan⁻¹\(([^\(]*)\)/g,"(Math.atan($1)*(180/Math.PI))"); + rawInput = rawInput.replace(/ln\(([^\(]*)\)/g,"Math.log($1)"); + rawInput = rawInput.replace(/√\(([^\(]*)\)/g,"Math.sqrt($1)"); + rawInput = rawInput.replace(/∛\(([^\(]*)\)/g,"Math.cbrt($1)"); + + try{ + output = eval(rawInput); // Rechnen + clearinput = true; + if (output != null){ + document.getElementById("output").style.animation = "FlashingOutput 250ms steps(3,start) 1"; + window.setTimeout(deleteFlashing,250); + } + }catch(e){ + document.getElementById("input").style.animation = "FlashingInput 250ms steps(3,start) 1"; + window.setTimeout(deleteFlashing,250); + document.getElementById("verticalP").style.animation = "hide 0.5s ease-in"; + document.getElementById("rollInOut").style.animation = "rollOut 0.5s ease-out"; + document.getElementById("rollInOut").style.width = "500px"; + document.getElementById("rollInOut").style.paddingRight = "30px"; + document.getElementById("verticalP").style.opacity = "0.0"; + drawRollInCanvas(); + clearinput = false; + } + output = output.toString(); + var commas = document.getElementById("Commas").value; + if (output.search("\\.") != -1){ + P_comma = output.search("\\."); + afterComma = output.substr(P_comma+1, output.length-1); + afterComma = afterComma.toString(); + lengthAfterComma = afterComma.length; + if (lengthAfterComma > commas){ + output = parseFloat(output).toFixed(commas); + } + } + renderOutput(); +}); + +document.getElementById("clear").addEventListener("click", function(){ + // INPUT UND OUTPUT ENTFERNEN + input = ""; + output = 0; + renderInput(); + renderOutput(); +}); + +document.getElementById("delete").addEventListener("click", function(){ + // DELETE FUNKTION + if (input.substr(input.length-7, input.length-1) == "×" || input == "×"){ //Multiplikation + input = input.replace(/×/,""); + }else if (input.substr(input.length-8, input.length-1) == "÷" || input == "÷"){ //Division + input = input.replace(/÷/,""); + }else if (input.substr(input.length-6, input.length-1) == "²" || input == "²"){ //Potenz 2 + input = input.replace(/²/,""); + }else if (input.substr(input.length-6, input.length-1) == "³" || input == "³"){ //Potenz 3 + input = input.replace(/³/,""); + }else if (input.substr(input.length-7, input.length-1) == "⁴" || input == "⁴"){ //Potenz 4 + input = input.replace(/⁴/,""); + }else if (input.substr(input.length-7, input.length-1) == "⁵" || input == "⁵"){ //Potenz 5 + input = input.replace(/⁵/,""); + }else if (input.substr(input.length-7, input.length-1) == "⁶" || input == "⁶"){ //Potenz 6 + input = input.replace(/⁶/,""); + }else if (input.substr(input.length-7, input.length-1) == "⁷" || input == "⁷"){ //Potenz 7 + input = input.replace(/⁷/,""); + }else if (input.substr(input.length-7, input.length-1) == "⁸" || input == "⁸"){ //Potenz 8 + input = input.replace(/⁸/,""); + }else if (input.substr(input.length-7, input.length-1) == "⁹" || input == "⁹"){ //Potenz 9 + input = input.replace(/⁹/,""); + }else if (input.substr(input.length-4, input.length-1) == "sin(" || input == "sin("){ //Sinus + input = input.replace(/sin\(/,""); + }else if (input.substr(input.length-4, input.length-1) == "cos(" || input == "cos("){ //Cosinus + input = input.replace(/cos\(/,""); + }else if (input.substr(input.length-4, input.length-1) == "tan(" || input == "tan("){ //Tangens + input = input.replace(/tan\(/,""); + }else if (input.substr(input.length-17, input.length-1) == "sin⁻¹(" || input == "sin⁻¹("){ //Arcsinus + input = input.replace(/sin⁻¹\(/,""); + }else if (input.substr(input.length-17, input.length-1) == "cos⁻¹(" || input == "cos⁻¹("){ //Arccosinus + input = input.replace(/cos⁻¹\(/,""); + }else if (input.substr(input.length-17, input.length-1) == "tan⁻¹(" || input == "tan⁻¹("){ //Arctangens + input = input.replace(/tan⁻¹\(/,""); + }else if (input.substr(input.length-3, input.length-1) == "ln(" || input == "ln("){ //Logarithmus + input = input.replace(/ln\(/,""); + }else if (input.substr(input.length-8, input.length-1) == "√(" || input == "√("){ //Quadratwurzel + input = input.replace(/√\(/,""); + }else if (input.substr(input.length-8, input.length-1) == "∛(" || input == "∛("){ //Kubikwurzel + input = input.replace(/∛\(/,""); + }else{ + input = input.substr(0, input.length-1); + } + clearinput = false; + renderInput(); +}); + +document.getElementById("shift").addEventListener("click", function(){ + if (shift == false){ + shift = true; + }else if (shift == true){ + shift = false; + } + if (shift == true){ + document.getElementById("arcsine").style.display = ""; + document.getElementById("arccosine").style.display = ""; + document.getElementById("arctangent").style.display = ""; + document.getElementById("sine").style.display = "none"; + document.getElementById("cosine").style.display = "none"; + document.getElementById("tangent").style.display = "none"; + }else if (shift == false){ + hideArcTrigonometry(); + document.getElementById("sine").style.display = ""; + document.getElementById("cosine").style.display = ""; + document.getElementById("tangent").style.display = ""; + } +}); + + + + +// CANVAS PFEIL NACH LINKS AUSGERICHTET PLUS AKTIONEN +R_O_C.moveTo(25,10); +R_O_C.lineTo(10,50); +R_O_C.lineTo(25,90); +R_O_C.moveTo(40,10); +R_O_C.lineTo(25,50); +R_O_C.lineTo(40,90); +R_O_C.lineWidth = 3; +R_O_C.strokeStyle = "#666"; +R_O_C.stroke(); +document.getElementById("rollOutCanvas").addEventListener("mouseover", function(){ + R_O_C.strokeStyle = "#000"; + R_O_C.stroke(); +}); +document.getElementById("rollOutCanvas").addEventListener("mouseout", function(){ + R_O_C.strokeStyle = "#666"; + R_O_C.stroke(); +}); +document.getElementById("rollOutCanvas").addEventListener("click", function rollOut(){ + document.getElementById("verticalP").style.animation = "hide 0.5s ease-in"; + document.getElementById("rollInOut").style.animation = "rollOut 0.5s ease-out"; + document.getElementById("rollInOut").style.width = "500px"; + document.getElementById("rollInOut").style.paddingRight = "30px"; + document.getElementById("verticalP").style.opacity = "0.0"; + drawRollInCanvas(); +}); + +// CANVAS PFEIL NACH RECHTS AUSGERICHTET PLUS AKTIONEN +R_I_C.moveTo(25,10); +R_I_C.lineTo(40,50); +R_I_C.lineTo(25,90); +R_I_C.moveTo(10,10); +R_I_C.lineTo(25,50); +R_I_C.lineTo(10,90); +R_I_C.lineWidth = 3; +R_I_C.strokeStyle = "#666"; +R_I_C.stroke(); +document.getElementById("rollInCanvas").addEventListener("mouseover", function(){ + R_I_C.strokeStyle = "#000"; + R_I_C.stroke(); +}); +document.getElementById("rollInCanvas").addEventListener("mouseout", function(){ + R_I_C.strokeStyle = "#666"; + R_I_C.stroke(); +}); +document.getElementById("rollInCanvas").addEventListener("click", function(){ + document.getElementById("verticalP").style.animation = "show 0.5s ease-in"; + document.getElementById("rollInOut").style.animation = "rollIn 0.5s ease-out"; + document.getElementById("rollInOut").style.width = "50px"; + document.getElementById("rollInOut").style.paddingRight = "0px"; + document.getElementById("verticalP").style.opacity = "1.0"; + drawRollOutCanvas(); +}); + +H_P_X.moveTo(0,5); +H_P_X.lineTo(180,5); +H_P_X.lineTo(150,10); +H_P_X.lineTo(30,10); +H_P_X.lineTo(0,5); +H_P_X.lineWidth = 5; +H_P_X.strokeStyle = "#000"; +H_P_X.stroke(); + + + +/// FUNKTIONEN AURUFEN + +number("0"); +number("1"); +number("2"); +number("3"); +number("4"); +number("5"); +number("6"); +number("7"); +number("8"); +number("9"); +pow(2); +pow(3); +pow(4); +pow(5); +pow(6); +pow(7); +pow(8); +pow(9); +trigonometry("sine"); +trigonometry("cosine"); +trigonometry("tangent"); +trigonometry("arcsine"); +trigonometry("arccosine"); +trigonometry("arctangent"); +root("sqrt"); +root("cbrt"); +renderInput(); +renderOutput(); +drawRollOutCanvas(); +hideArcTrigonometry(); +hidePowDiv(); \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..fea4be3 --- /dev/null +++ b/public/index.html @@ -0,0 +1,111 @@ + + + + Rechner + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ + + + + + + + + + + + +
+
+
+ + +
+ Nachkommastellen: + + 2 +
+

INFORMATIONEN

+ +
+ + + \ No newline at end of file diff --git a/public/thumbnail.png b/public/thumbnail.png new file mode 100644 index 0000000..2cf62e2 Binary files /dev/null and b/public/thumbnail.png differ