From dac2ffb4375570d1f15448ff32c1cf4e10d5834f Mon Sep 17 00:00:00 2001
From: Blue Fox <bluefox@privacynerd.de>
Date: Tue, 24 Oct 2023 18:42:28 +0200
Subject: [PATCH] =?UTF-8?q?Mitternachtsformel=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mitternachtsformel.html | 140 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 140 insertions(+)
 create mode 100644 mitternachtsformel.html
diff --git a/mitternachtsformel.html b/mitternachtsformel.html
new file mode 100644
index 0000000..5991636
--- /dev/null
+++ b/mitternachtsformel.html
@@ -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>
