Bruchailromantik
Mai 3, 2021 - Lesezeit: 41 Minuten
So, hier jetzt also ein JavaScript für Bruchrechenaufgaben. Das ist diesmal etwas größer, um der Anzeige von Bruchzahlen auch gerecht zu werden und nicht irgendeine komische Schreibweise verwenden zu müssen.
//(
var myCalcer = (NumberToUse, targetElement) => {
// the brain -> calcing stuff
function Fraction(zahl) {
let numerator = 0;
let denominator = 0;
for (i = 1; true; i *= 10) {
if ((zahl * i) == Math.floor(zahl * i)) {
numerator = (zahl * i);
denominator = i;
break;
}
}
return ([numerator, denominator]);
}
function calc_ggt(a, b) {
let h = (a > b) ? b : a;
for (i = h; i > 1; i--) {
if ((a % i) == 0 && (b % i) == 0) {
return i;
}
}
return 1;
}
// the eye -> formatting output
function writeFraction(zaehler, nenner) {
let outSpan = document.createElement("SPAN");
outSpan.setAttribute('class', 'frac');
outSpan.setAttribute('style', 'padding-right:5px;');
outSpan.innerHTML = `<sup>${zaehler}</sup><span>/</span><sub>${nenner}</sub>`;
targetElement.appendChild(outSpan);
}
function writeOperatorOrLine(opToWrite) {
let outSpan = document.createElement("SPAN");
outSpan.setAttribute('style', 'vertical-align:14px;padding-right:5px;');
outSpan.innerText = opToWrite;
targetElement.appendChild(outSpan);
}
function addcss() {
let styleHelper = document.createElement("style");
styleHelper.id = 'styleHelper';
styleHelper.innerHTML = `span.frac {
display: inline-block;
text-align: center;
}
span.frac>sup {
display: block;
border-bottom: 1px solid;
font: inherit;
}
span.frac>span {
display: none;
}
span.frac>sub {
display: block;
font: inherit;
}`;
targetElement.appendChild(styleHelper);
}
// the hand -> doing things
let bruch = Fraction(NumberToUse);
let ggt = calc_ggt(bruch[0], bruch[1]);
addcss();
writeOperatorOrLine(NumberToUse);
writeOperatorOrLine("=");
writeFraction(bruch[0], bruch[1]);
writeOperatorOrLine(":");
writeOperatorOrLine(ggt);
writeOperatorOrLine("=");
writeFraction(bruch[0] / ggt, bruch[1] / ggt);
};
//)(0.45);
var inputElement = document.createElement("INPUT");
var buttonElement = document.createElement("BUTTON");
var targetOutElement = document.createElement("DIV");
buttonElement.innerHTML = "Calc";
buttonElement.onclick = () => {
/*
for(var mainCounter = 1; mainCounter < 100; mainCounter++ ) {
myCalcer(
mainCounter /
Math.pow(10, ("" + mainCounter).length),
targetElement
);
targetElement.appendChild(document.createElement("BR"));
targetElement.appendChild(document.createElement("BR"));
}
*/
targetOutElement.innerHTML = "";
let numberToUse = parseFloat(inputElement.value.replace(',', '.'));
myCalcer(numberToUse, targetOutElement);
};
targetOutElement.style.backgroundColor = "white";
targetOutElement.style.border = '1px solid black';
targetOutElement.style.borderRadius = '4px';
targetOutElement.style.padding = '10px';
targetOutElement.style.margin = 'auto';
targetOutElement.style.width = '200px';
targetOutElement.style.textAlign = 'center';
document.body.appendChild(inputElement);
document.body.appendChild(buttonElement);
document.body.appendChild(targetOutElement);
Hierbei teilt sich die Funktion myCalcer in 3 Teile. Der erste Teil sind die Berechnungsfunktionen. Der zweite Teil regelt die Ausgabe und der dritte Teil macht die Rechnung. Am Ende kommt noch ein bisschen Styling dazu, damit das auch was hermacht. Kann man direkt in der Konsole benutzen oder hier:
EOF