1 files changed, 102 insertions, 0 deletions
diff --git a/posts/linear_system_solver.html b/posts/linear_system_solver.html
new file mode 100644
index 0000000..a8b17e5
--- /dev/null
+++ b/posts/linear_system_solver.html
@@ -0,0 +1,102 @@
+
+<h2>Linear Systems Solver</h2>
+<h3>2021-08-01 by Matthew Kosarek</h3>
+<p>
+  I wanted to write a little algorithm to visually solve linear systems of equations for fun. I am only going to deal with 3x3 matrices for now, but I'll make it so that I can easily extend it to more matrices in the future if I think that would be cool.
+
+  <br/><br/>
+
+  <div id='equation_container'>
+    <div id='matrix_lhs'></div>
+    <label>&times;</label>
+    <div id='unknown_variables'></div>
+    <label>=</label>
+    <div id='matrix_rhs'></div>
+  </div>
+  
+  <div id='solution_container'>
+  </div>
+
+  <div id='actions_container'>
+    <button class='action_button'id='reset_button'>
+      Reset
+    </button>
+    <button class='action_button' id='solve_button'>
+      Solve
+    </button>
+  </div>
+  
+  <script src='/posts/linear_system_solver.js'></script>
+
+  <style>
+    #equation_container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+        justify-content: center;
+    }
+
+    #equation_container input {
+        width: 128px;
+    }
+
+    #equation_container > label {
+        padding: 1rem;
+    }
+
+    #matrix_lhs {
+        display: grid;
+        grid-gap: 1rem;
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    #unknown_variables {
+        display: grid;
+        grid-gap: 1rem;
+    }
+
+    #unknown_variables > input {
+        text-align: center;
+    }
+
+    #matrix_rhs {
+        display: grid;
+        grid-gap: 1rem;
+    }
+
+    #actions_container {
+        padding: 1rem;
+        text-align: center;
+    }
+
+    #solve_button {
+        background-color: lightgreen;
+    }
+
+    .augmented_matrix_container {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        padding: 1rem;
+    }
+
+    .augmented_matrix_container input {
+        width: 128px;
+    }
+
+    .augmented_matrix_container > div:first-child {
+        display: grid;
+        grid-gap: 1rem;
+        grid-template-columns: repeat(3, 1fr);
+        padding-right: 0.5rem;
+        border-right: 1px dashed white;
+    }
+
+    .augmented_matrix_container > div:last-child {
+        display: grid;
+        grid-gap: 1rem;
+        padding-left: 0.5rem;
+    }
+  </style>
+</p>