Added formula rendering

src/App.svelte

 <script lang="ts">
     import { element } from "svelte/internal";
 import type { WorkPackage } from "./estimator";
+import FormulaE from "./FormulaE.svelte";
+import FormulaS from "./FormulaS.svelte";
     import RowWorkItem from "./RowWorkItem.svelte";
     import SumRow from "./SumRow.svelte";
 
@@ -14,6 +16,8 @@ import type { WorkPackage } from "./estimator";
     }
     $: dataJson = JSON.stringify(workPackages, null, 2)
     let jsonPasteArea = "";
+
+
 </script>
 
 <main>
@@ -46,6 +50,11 @@ import type { WorkPackage } from "./estimator";
             <SumRow {workPackages} u={u} r={r}></SumRow>
         </tbody>
     </table>
+
+    <FormulaE workPackages={workPackages} r={r}/>
+    <br>
+    <FormulaS workPackages={workPackages} u={u}/>
+
     <details>
         <summary>
             Debug: Show Input as JSON
@@ -83,3 +92,4 @@ import type { WorkPackage } from "./estimator";
 <a href="https://gitlab.fachschaften.org/jfowl/swk-project-effort-estimation"
   >SourceCode</a
 >
+

src/FormulaE.svelte

+<script lang="ts">
+    import type { WorkPackage } from "./estimator";
+
+    export let workPackages: WorkPackage[]
+    export let r: number;
+    $: nonEmptyWorkPackages = workPackages.filter(wp => wp.a !== null && wp.b !== null)
+    $: lastElementIndex = nonEmptyWorkPackages.length - 1;
+</script>
+<style>
+    div.formula-e {
+        padding-top: 10px;
+    }
+</style>
+
+<div class="formula-e">
+    <math xmlns="http://www.w3.org/1998/Math/MathML">
+    <mrow>
+        <mo>E(x)</mo>
+        <mo>=</mo>
+        {#each nonEmptyWorkPackages as workPackage, i}
+            <mfrac>
+                <mrow>
+                    <mo> {workPackage.b} </mo>
+                    <mo> + </mo>
+                    {#if typeof workPackage.c === 'number'}
+                        <mo> {r} </mo>
+                        <mo> ⋅ </mo>
+                        <mo> {workPackage.c} </mo>
+                        <mo> + </mo>
+                    {/if}
+                    <mo> {workPackage.a} </mo>
+                </mrow>
+                <mrow>
+                    <mo>
+                        {typeof workPackage.c === 'number' ? '6' : '2'}
+                    </mo>
+                </mrow>
+            </mfrac>
+            {#if i < lastElementIndex}
+            <mo> + </mo>
+            {/if}
+        {/each}
+    </mrow>
+    </math>
+</div>
\ No newline at end of file

src/FormulaS.svelte

+<script lang="ts">
+    import type { WorkPackage } from "./estimator";
+
+    export let workPackages: WorkPackage[]
+    export let u: number;
+    $: nonEmptyWorkPackages = workPackages.filter(wp => wp.a !== null && wp.b !== null)
+    $: lastElementIndex = nonEmptyWorkPackages.length - 1;
+</script>
+
+<style>
+    div.formula-s {
+        padding-bottom: 10px;
+    }
+</style>
+
+<div class="formula-s">
+    <math xmlns="http://www.w3.org/1998/Math/MathML">
+    <mrow>
+        <mo>S(x)</mo>
+        <mo>=</mo>
+        <msqrt>
+            {#each nonEmptyWorkPackages as workPackage, i}
+                <msup>
+                    <mrow>
+                        <mo>(</mo>
+                        <mfrac>
+                            <mrow>
+                                <mo> {workPackage.b} </mo>
+                                <mo> - </mo>
+                                <mo> {workPackage.a} </mo>
+                            </mrow>
+                            <mo> {u} </mo>
+                        </mfrac>
+                        <mo>)</mo>
+                    </mrow>
+                    <mn>2</mn>
+                </msup>
+                {#if i < lastElementIndex}
+                <mo> + </mo>
+                {/if}
+            {/each}
+        </msqrt>
+    </mrow>
+    </math>
+</div>
\ No newline at end of file