✨ update some code

Brendon3578 · May 4, 2024 · 0de058d · 0de058d
1 parent 7a6a507
commit 0de058d
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 64 deletions.
diff --git a/src/index.html b/src/index.html
@@ -8,10 +8,10 @@
     <link rel="stylesheet" href="./styles/output.css" />
   </head>
   <body
-    class="min-h-screen min-w-full flex flex-col items-center justify-center my-10"
+    class="min-h-screen min-w-full flex flex-col items-center justify-center my-10 px-2"
   >
     <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"
+      class="max-w-3xl p-5 border border-gray-400 rounded shadow-lg flex flex-col gap-3 w-full h-min"
     >
       <h1 class="text-center text-xl font-bold">Resolver Sistemas Lineares</h1>
       <p class="mb-3">
@@ -79,25 +79,27 @@ <h3 class="font-semibold">Digite os sistemas lineares</h3>
             <h3 class="mb-1">Sistema linear</h3>
             <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"
+              class="p-2 pr-4 border border-gray-400 shadow rounded w-min bg-gradient-to-t from-blue-100 to-gray-50"
             ></div>
           </div>
           <div>
             <h3 class="mb-1">Sistema linear na representação matricial</h3>
             <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"
+              class="p-2 pr-4 border border-gray-400 shadow rounded w-min bg-gradient-to-t from-blue-100 to-gray-50"
             ></div>
           </div>
 
           <div class="mt-auto ml-auto flex gap-1">
             <button
+              title="Limpar equações"
               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
+              title="Resolver um exemplo de sistema linear"
               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 active:scale-95"
             >
@@ -108,6 +110,7 @@ <h3 class="mb-1">Sistema linear na representação matricial</h3>
       </div>
 
       <button
+        title="Resolver sistema linear"
         id="solve-system"
         class="w-full block p-3 rounded cursor-pointer text-white bg-blue-600 hover:bg-blue-700 shadow font-bold active:scale-95 ease-in-out duration-150"
       >

diff --git a/src/scripts/script.js b/src/scripts/script.js
@@ -28,6 +28,21 @@ const linearSystemDrawnEl = document.getElementById(
 );
 const matrixDrawnEl = document.getElementById("matrix-illustration");
 
+const linearSystemSizeRadioButtonsEl = document.querySelectorAll(
+  'input[name="sistema-tamanho"]'
+);
+const thirdEquationContainerEl = document.getElementById(
+  "third-equation-label"
+);
+
+const resultListEl = document.getElementById("result-list");
+const determinantListEl = document.getElementById("determinant-list");
+const systemsClassificationTextEl = document.getElementById(
+  "system-classification"
+);
+
+let is3x3LinearSystem = false;
+
 const mathJaxHTMLWriter = new MathJaxHTMLWriter(
   matrixDrawnEl,
   linearSystemDrawnEl
@@ -46,15 +61,6 @@ function showStatusMessage(status, message) {
   }
 }
 
-const linearSystemSizeRadioButtonsEl = document.querySelectorAll(
-  'input[name="sistema-tamanho"]'
-);
-const thirdEquationContainerEl = document.getElementById(
-  "third-equation-label"
-);
-
-let is3x3LinearSystem = false;
-
 linearSystemSizeRadioButtonsEl.forEach((radioButtonEl) => {
   radioButtonEl.addEventListener("change", () => {
     let systemSize = radioButtonEl.value;
@@ -75,12 +81,6 @@ linearSystemSizeRadioButtonsEl.forEach((radioButtonEl) => {
   });
 });
 
-const resultListEl = document.getElementById("result-list");
-const determinantListEl = document.getElementById("determinant-list");
-const systemsClassificationTextEl = document.getElementById(
-  "system-classification"
-);
-
 function showThirdEquation(show) {
   if (show) {
     thirdEquationContainerEl.classList.add("flex");
@@ -289,9 +289,6 @@ function solve2x2System(coeffs_eq1, coeffs_eq2) {
 }
 
 function solve3x3System(coeffs_eq1, coeffs_eq2, coeffs_eq3) {
-  // console.log(coeffs_eq1);
-  // console.log(coeffs_eq2);
-  // console.log(coeffs_eq3);
   const [a, b, c] = coeffs_eq1.slice(0, 3);
   const [d, e, f] = coeffs_eq2.slice(0, 3);
   const [g, h, i] = coeffs_eq3.slice(0, 3);
@@ -490,18 +487,24 @@ function calculateDeterminant3x3(matrix) {
   return determinant;
 }
 
+function generateRandomEquation(numVariables) {
+  let equation = "";
+  for (let i = 0; i < numVariables; i++) {
+    if (i > 0) equation += " + ";
+    equation += `${generateRandomNumber(0, 10)}${String.fromCharCode(120 + i)}`;
+  }
+  equation += ` = ${generateRandomNumber(0, 10)}`;
+  return equation;
+}
+
+// Gerar uma equação 2x2:
 function generate2x2RandomEquation() {
-  return `${generateRandomNumber(0, 10)}x + ${generateRandomNumber(
-    0,
-    10
-  )}y = ${generateRandomNumber(0, 10)}`;
+  return generateRandomEquation(2);
 }
 
+// Gerar uma equação 3x3:
 function generate3x3RandomEquation() {
-  return `${generateRandomNumber(0, 10)}x + ${generateRandomNumber(
-    0,
-    10
-  )}y + ${generateRandomNumber(0, 10)}z = ${generateRandomNumber(0, 10)}`;
+  return generateRandomEquation(3);
 }
 
 const sample2x2Equations = [

diff --git a/src/styles/output.css b/src/styles/output.css
@@ -564,6 +564,21 @@ video {
   margin-bottom: 2.5rem;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -742,50 +757,20 @@ video {
   --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);
 }
 
+.to-white {
+  --tw-gradient-to: #fff var(--tw-gradient-to-position);
+}
+
 .p-1 {
   padding: 0.25rem;
 }