141 lines
3.8 KiB
HTML
141 lines
3.8 KiB
HTML
<!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ö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>
|