BlueFox/MathUtils
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mitternachtsformel hinzugefügt

Browse Source
This commit is contained in:
Blue Fox 2023-10-24 18:42:28 +02:00
parent 15f2b386a5
commit dac2ffb437
1 changed files with 140 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
mitternachtsformel.html Normal file
View File

@ -0,0 +1,140 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
background-color: #2c2c2c;
color: #ffffff;
font-family: sans-serif
}
hr {
width: 40px;
margin-left: 0px;
color: red;
}
::-moz-selection { /* Code for Firefox */
color: white;
background: red;
}
::selection {
color: white;
background: red;
}
.content {
margin: 100px auto 0px;
max-width: 80%;
width: 360px;
padding: 15px 40px;
background-color: #444;
border: 2px solid red;
border-radius: 5px;
overflow: auto;
}
.title { padding-bottom: 10px; }
.title h1 { margin-bottom: 3px; }
.title p { margin: 0px; }
.inputs { margin-bottom: 10px; }
.inputs p { margin-bottom: 0px; }
.inputs input {
margin: 10px 0px;
padding: 7px;
width: calc(40% - 12px);
color: #fff;
background-color: #000;
border: 3px solid red;
border-radius: 5px;
}
.result progress { width: 40%; display: block; }
.result ol { padding: auto; }
</style>
</head>
<body>
<div class="content">
<div class="title">
<h1>Mitternachtsformel</h1>
<p>
Dies ist ein kleiner Mathematikhelfer.
<br>
Dieser kann mithilfe der Mitternachtsformel Gleichungen der Form <code>ax² + bx + c = 0</code> lösen.
</p>
</div>
<hr>
<div class="inputs">
<p>Koeffizienten</p>
<input id="a" type="number" placeholder="Koeffizent a" autofocus>
<br>
<input id="b" type="number" placeholder="Koeffizent b">
<br>
<input id="c" type="number" placeholder="Koeffizent c">
</div>
<hr>
<div class="result">
<p>L&ouml;sung:</p>
<progress id="progress" id="file" max="100"></progress>
<ol id="result">
</ol>
</div>
</div>
<script>
var a = document.getElementById("a")
var b = document.getElementById("b")
var c = document.getElementById("c")
var result = document.getElementById("result");
var progress = document.getElementById("progress");
var result_string = "";
var interval = setInterval(recalculate, 5);
function recalculate() {
if(a.value == "" || b.value == "" || c.value == "") {
result.innerHTML = ""; // hide any resulting instructions
progress.style.display = "block"; // show the progress bar
} else {
progress.style.display = "none"; // hide the progress bar
// calculate the discriminant
var d = b.value * b.value - 4*a.value*c.value
result_string_new = "<li>Diskriminante berechnen: <code>b² - 4ac = " + b.value + "² - 4×" + a.value + "×" + c.value + " = <mark>" + d + "</mark></code></li>";
// check if the discriminant is smaller than 0
result_string_new += "<li>Diskriminante <code>d < 0</code>: "
if(d < 0) {
result_string_new += "<mark>Ja.</mark></li><li>Keine Lösung!<br>W = {}</li>"
} else {
result_string_new += "<mark>Nein</mark>, weiter.</li>"
// calculate the rest of the formula:
result1 = (-b.value + Math.sqrt(d)) / (2*a.value)
result2 = (-b.value - Math.sqrt(d)) / (2*a.value)
if(result1 == result2) {
result_string_new += "<li>Lösung: \
<br>– <code>x<sub>1/2</sub> = <mark>" + result1 + "</mark></code></li>";
} else {
result_string_new += "<li>Lösung: \
<br>– <code>x<sub>1</sub> = <mark>" + result1 + "</mark></code>\
<br>– <code>x<sub>2</sub> = <mark>" + result2 + "</mark></code></li>";
}
}
// write only if anything changed (as the function gets called every x ms)
if(result_string_new != result_string) {
result_string = result_string_new;
result.innerHTML = result_string;
}
}
}
</script>
</body>
</html>