✨ update some code

Brendon3578 · May 2, 2024 · 319b817 · 319b817
1 parent 171b258
commit 319b817
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 25 deletions.
diff --git a/.github/example_application.png b/.github/example_application.png
diff --git a/README.md b/README.md
@@ -1,10 +1,12 @@
 # Resolvedor de Sistema Linear
 
-Este é um simples programa em JavaScript para resolver sistemas lineares usando o método de Cramer.
+Este projeto é uma simples página, feita com HTML, CSS e principalmente em JavaScript para resolver os sistemas lineares usando o método de Cramer. Para acessar esse projeto basta [acessar essa página](https://brendon3578.github.io/linear-system-resolver/src/index.html)
 
-Para acessar esse projeto basta [acessar clicando aqui](https://brendon3578.github.io/linear-system-resolver/src/index.html)
+<p align="center">
+   <img alt="Imagem do programa" src="./.github/example_application.png">
+</p>
 
-## Como usar localmente
+## Como baixar e usar localmente
 
 1. **Clonar o Repositório:**
 
@@ -20,12 +22,10 @@ Para acessar esse projeto basta [acessar clicando aqui](https://brendon3578.gith
 
 3. **Interagindo com o Programa:**
 
-   A página abrirá em seu navegador, onde você poderá inserir o número de equações e incógnitas do sistema linear. Em seguida, insira os coeficientes das equações e seus respectivos resultados. O programa fornecerá a solução do sistema linear usando o método de Cramer.
+   A página abrirá em seu navegador, onde você poderá inserir as equações dos sistemas lineares, que pode ser do tipo 2x2 ou 3x3. Em seguida. O programa fornecerá a solução do sistema linear usando o método de Cramer e mostrará também a representação matricial o sistema linear, e classificará o sistema linear.
 
-## Contribuições
+---
 
-Contribuições são bem-vindas! Se você encontrar algum problema ou tiver sugestões de melhorias, sinta-se à vontade para abrir uma issue ou enviar um pull request.
-
-## Licença
-
-Este projeto está licenciado sob a licença MIT
+<h3 align="center">
+    Feito com ☕ por <a href="https://github.com/Brendon3578"> Brendon Gomes</a>
+</h3>
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,9 @@
     <title>Sistemas Lineares</title>
     <link rel="stylesheet" href="./styles/output.css" />
   </head>
-  <body class="min-h-screen min-w-full flex justify-center my-10">
+  <body
+    class="min-h-screen min-w-full flex flex-col items-center justify-center my-10"
+  >
     <div
       class="max-w-3xl p-5 border border-gray-400 rounded shadow-lg flex flex-col gap-3 w-full h-min mx-2"
     >
@@ -74,17 +76,29 @@ <h3 class="font-semibold">Digite os sistemas lineares</h3>
         <section class="flex flex-col gap-2 w-full">
           <div>
             <h3 class="mb-1">Sistema linear</h3>
-            <div id="linear-system-illustration" class="p-1"></div>
+            <div
+              id="linear-system-illustration"
+              class="p-2 pr-4 border border-gray-400 shadow rounded w-min bg-gradient-to-t from-green-100 to-gray-50"
+            ></div>
           </div>
           <div>
             <h3 class="mb-1">Sistema linear na representação matricial</h3>
-            <div id="matrix-illustration" class="p-1"></div>
+            <div
+              id="matrix-illustration"
+              class="p-2 pr-4 border border-gray-400 shadow rounded w-min bg-gradient-to-t from-green-100 to-gray-50"
+            ></div>
           </div>
 
-          <div class="mt-auto ml-auto">
+          <div class="mt-auto ml-auto flex gap-1">
+            <button
+              id="clear-btn"
+              class="text-sm px-2 py-0.5 border border-gray-400 text-gray-700 rounded font-semibold bg-white hover:bg-gray-200 ease-in-out duration-150 active:scale-95"
+            >
+              Limpar
+            </button>
             <button
               id="fill-with-example-btn"
-              class="text-sm px-2 py-0.5 border border-gray-400 text-gray-700 rounded font-semibold bg-white hover:bg-gray-200 ease-in-out duration-150"
+              class="text-sm px-2 py-0.5 border border-gray-400 text-gray-700 rounded font-semibold bg-white hover:bg-gray-200 ease-in-out duration-150 active:scale-95"
             >
               Resolver um exemplo
             </button>
@@ -127,9 +141,19 @@ <h4 class="mb-1">Resultado das Determinantes:</h4>
             </ul>
           </div>
         </div>
-        <div class="mt-3 p-2 rounded" id="result"></div>
       </div>
     </div>
+    <div class="p-2 rounded max-w-3xl w-full flex justify-end px-5">
+      <span class="text-sm text-gray-400 hover:text-gray-500">
+        Feito por
+        <a
+          class="underline"
+          href="https://github.com/Brendon3578/linear-system-resolver"
+          target="_blank"
+          >Brendon Gomes</a
+        >
+      </span>
+    </div>
 
     <script>
       MathJax = {

diff --git a/src/scripts/script.js b/src/scripts/script.js
@@ -145,7 +145,7 @@ function solveSystem() {
 
       const unknown = solution.unknown.toUpperCase();
       const determinantCalc = solution.determinantCalc;
-      resultListEl.innerHTML += `<li title="Resultado de ${unknown} é igual a ${result}">
+      resultListEl.innerHTML += `<li title="Resultado de ${unknown} é igual a ${solution.value}">
       ${unknown} = <b class="font-bold">${result}</b> (${determinantCalc})</li>`;
     });
 
@@ -155,7 +155,7 @@ function solveSystem() {
       determinantListEl.innerHTML += `
       <li
         class="flex flex-col gap-2 items-center justify-between rounded-md shadow-lg p-2 pb-4 border border-gray-400 w-full bg-gradient-to-t from-gray-200 to-white max-w-min"
-        title="Resultado da determinante de ${unknown} é igual a ${result}"
+        title="Resultado da determinante de ${unknown} é igual a ${determinant.result}"
       >
         <span class="text-sm font-semibold whitespace-nowrap">Det. de ${unknown} = ${result}</span>
         <div>${determinant.matrixHTML}</div>
@@ -524,9 +524,9 @@ const sample3x3Equations = [
     three: "3x + 4y + 5z = 16",
   },
   {
-    first: "x + 2y +z = 4",
-    second: "2x + 4y + 2z = 8",
-    three: "3x + 6y + 3z = 12",
+    first: "x + y +z = 3",
+    second: "2x + 2y + 2z = 8",
+    three: "3x + 3y + 7z = 12",
   },
   {
     first: generate3x3RandomEquation(),
@@ -571,3 +571,12 @@ const fillWithExampleButtonEl = document.getElementById(
 );
 
 fillWithExampleButtonEl.addEventListener("click", fillEquationsWithExample);
+
+function clearEquations() {
+  firstEquationEl.value = "";
+  secondEquationEl.value = "";
+  if (is3x3LinearSystem) thirdEquationEl.value = "";
+}
+
+const clearEquationsBtnEl = document.getElementById("clear-btn");
+clearEquationsBtnEl.addEventListener("click", clearEquations);
diff --git a/src/styles/output.css b/src/styles/output.css
@@ -580,10 +580,6 @@ video {
   margin-left: auto;
 }
 
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
 .mt-auto {
   margin-top: auto;
 }
@@ -613,6 +609,11 @@ video {
   width: 100%;
 }
 
+.w-min {
+  width: -moz-min-content;
+  width: min-content;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -654,6 +655,10 @@ video {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -731,10 +736,56 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-green-100 {
+  --tw-gradient-from: #dcfce7 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(220 252 231 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-indigo-200 {
+  --tw-gradient-from: #c7d2fe var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(199 210 254 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-indigo-500 {
+  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-red-100 {
+  --tw-gradient-from: #fee2e2 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(254 226 226 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-yellow-100 {
+  --tw-gradient-from: #fef9c3 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(254 249 195 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-teal-100 {
+  --tw-gradient-from: #ccfbf1 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(204 251 241 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-blue-100 {
+  --tw-gradient-from: #dbeafe var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .to-white {
   --tw-gradient-to: #fff var(--tw-gradient-to-position);
 }
 
+.to-gray-50 {
+  --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -756,6 +807,11 @@ video {
   padding-right: 0.5rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -774,6 +830,10 @@ video {
   padding-left: 1.25rem;
 }
 
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -806,6 +866,11 @@ video {
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -846,6 +911,10 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -876,6 +945,11 @@ video {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .active\:scale-95:active {
   --tw-scale-x: .95;
   --tw-scale-y: .95;