Create algebra.html

tf7software · Sep 25, 2024 · 3bb22e0 · 3bb22e0
1 parent 50bfab6
commit 3bb22e0
Showing 1 changed file with 91 additions and 0 deletions.
diff --git a/views/algebra.html b/views/algebra.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Algebra Calculator - Infintium">
+  <meta name="keywords" content="Algebra, Calculator, Math Symbols, Infintium">
+  <title>Algebra Calculator - Infintium</title>
+  <link rel="stylesheet" href="/css/styles.css">
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <link rel="stylesheet" href="/css/styles.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Algebra Calculator</h1>
+    <form id="algebraForm" method="POST">
+      <textarea id="algebraInput" name="query" rows="5" placeholder="Enter your algebra problem here..."></textarea>
+
+      <!-- Calculator Pad -->
+      <div class="calculator-pad">
+        <button type="button" onclick="appendSymbol('+')">+</button>
+        <button type="button" onclick="appendSymbol('-')">−</button>
+        <button type="button" onclick="appendSymbol('*')">×</button>
+        <button type="button" onclick="appendSymbol('/')">÷</button>
+        <button type="button" onclick="appendSymbol('(')">(</button>
+        <button type="button" onclick="appendSymbol(')')">)</button>
+        <button type="button" onclick="appendSymbol('x')">x</button>
+        <button type="button" onclick="appendSymbol('y')">y</button>
+        <button type="button" onclick="appendSymbol('^')">^</button>
+        <button type="button" onclick="appendSymbol('=')">=</button>
+        <button type="button" onclick="appendSymbol('sqrt(')">√</button>
+        <button type="button" onclick="appendSymbol('π')">π</button>
+        <button type="button" onclick="appendSymbol('e')">e</button>
+        <button type="button" onclick="appendSymbol('log(')">log</button>
+        <button type="button" onclick="appendSymbol('sin(')">sin</button>
+        <button type="button" onclick="appendSymbol('cos(')">cos</button>
+        <button type="button" onclick="appendSymbol('tan(')">tan</button>
+        <button type="button" onclick="appendSymbol('ln(')">ln</button>
+      </div>
+
+      <button type="submit">Solve</button>
+    </form>
+
+    <!-- Loading Island -->
+    <div id="loadingIsland" class="loading-island">
+      <div class="loading-spinner"></div>
+      <p>Loading, please wait...</p>
+    </div>
+
+    <!-- Result Section -->
+    <div id="resultContainer" class="result-container" style="display: none;"></div>
+
+    <p>Infinite Algebra Calculations with Infintium.</p>
+  </div>
+
+  <script>
+    // Append the symbol to the textarea input
+    function appendSymbol(symbol) {
+      const input = document.getElementById('algebraInput');
+      input.value += symbol;
+    }
+
+    $(document).ready(function() {
+      $('#algebraForm').on('submit', function(e) {
+        e.preventDefault();
+
+        const query = $('#algebraInput').val();
+
+        // Show the loading island
+        $('#loadingIsland').show();
+        $('#resultContainer').hide(); // Hide result container while loading
+
+        $.ajax({
+          url: '/algebra-calculate', // Change to the correct backend route
+          type: 'POST',
+          data: { query: query },
+          success: function(response) {
+            // Hide the loading island when the response is received
+            $('#loadingIsland').hide();
+            $('#resultContainer').html(response).show(); // Display the result
+          },
+          error: function() {
+            $('#loadingIsland').hide();
+            $('#resultContainer').html('<p>An error occurred. Please try again.</p>').show();
+          }
+        });
+      });
+    });
+  </script>
+</body>
+</html>