diff options
author | mattkae <mattkae@protonmail.com> | 2021-09-19 16:32:15 -0400 |
---|---|---|
committer | mattkae <mattkae@protonmail.com> | 2021-09-19 16:32:15 -0400 |
commit | de850676e79da39aec6f1ce0400cfa94cecbd744 (patch) | |
tree | 48927e3cd3a518ddee1874df40d188cbc5112393 /posts/linear_system_solver.html~ |
First commit
Diffstat (limited to 'posts/linear_system_solver.html~')
-rw-r--r-- | posts/linear_system_solver.html~ | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/posts/linear_system_solver.html~ b/posts/linear_system_solver.html~ new file mode 100644 index 0000000..a280a8b --- /dev/null +++ b/posts/linear_system_solver.html~ @@ -0,0 +1,77 @@ + +<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>×</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; + } + </style> +</p> |