Merge pull request #24 from Uzo-Felix/feat/multiple-equations

feat: multiple equations
intrepidbird · Oct 28, 2023 · 81fd149 · 81fd149
2 parents 690c8aa + e1462c6
commit 81fd149
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 24 deletions.
diff --git a/calculator.js b/calculator.js
@@ -1,32 +1,58 @@
 $(document).ready(function() {
     $('#calculatorForm').submit(function(e) {
         e.preventDefault();
-        let equation = $('#equation').val();
-        // Replace "^" with "**" in the equation
-        equation = equation.replace(/\^/g, '**');
+        let equations = $('#equations').val().split(','); // Split equations by comma
+        let minX = parseFloat($('#minX').val());
+        let maxX = parseFloat($('#maxX').val());
+
+        if (isNaN(minX) || isNaN(maxX) || minX >= maxX) {
+            alert('Invalid range. Please check your input.');
+            return;
+        }
 
         let canvas = document.getElementById('graph').getContext('2d');
         let xValues = [];
-        let yValues = [];
+        let datasets = [];
+
+        for (let equation of equations) {
+            equation = equation.trim(); // Remove leading/trailing spaces
+            let yValues = [];
+
+            try {
+                for (let x = minX; x <= maxX; x += 0.1) {
+                    xValues.push(x);
+                    // Replace "^" with "**" in the equation
+                    let equationWithDoubleAsterisk = equation.replace(/\^/g, '**');
+                    let result = eval(equationWithDoubleAsterisk);
+
+                    // Check if the result is a valid number, not NaN
+                    if (!isNaN(result)) {
+                        yValues.push(result);
+                    } else {
+                        // Handle the case where the equation is invalid
+                        throw new Error('Invalid Equation');
+                    }
+                }
 
-        for (let x = -10; x <= 10; x += 0.1) {
-            xValues.push(x);
-            // Replace "^" with "**" in the equation
-            let equationWithDoubleAsterisk = equation.replace(/\^/g, '**');
-            yValues.push(eval(equationWithDoubleAsterisk));
+                datasets.push({
+                    label: equation,
+                    data: yValues,
+                    borderColor: getRandomColor(),
+                    borderWidth: 2,
+                });
+            } catch (error) {
+                // Handle the error and provide feedback to the user
+                console.error(error);
+                alert(`Invalid equation: "${equation}". Please check your input.`);
+                return;
+            }
         }
 
         let chart = new Chart(canvas, {
             type: 'line',
             data: {
                 labels: xValues,
-                datasets: [{
-                    label: equation,
-                    data: yValues,
-                    backgroundColor: 'rgba(0, 123, 255, 0.3)',
-                    borderColor: 'rgba(0, 123, 255, 1)',
-                    borderWidth: 1
-                }]
+                datasets: datasets,
             },
             options: {
                 responsive: true,
@@ -51,3 +77,8 @@ $(document).ready(function() {
         });
     });
 });
+
+function getRandomColor() {
+    // Generates a random hexadecimal color
+    return '#' + Math.floor(Math.random()*16777215).toString(16);
+}
diff --git a/index.html b/index.html
@@ -22,20 +22,28 @@ <h1>Graphing Calculator</h1>
     <section id="calculator" class="container mt-5">
         <div class="row justify-content-center">
             <div class="col-md-6">
-                <h2>Graphing Calculator</h2>
+                <h2 class="text-center mb-3">Graph Your Equations</h2>
                 <form id="calculatorForm">
                     <div class="form-group">
-                        <label for="equation">Equation:</label>
-                        <input type="text" class="form-control" id="equation" placeholder="e.g., y = x^2 + 2 * sin(x)" required>
-                        <small class="text-muted">Supported Functions: sin, cos, tan, sqrt, log, exp, pi, e, and more.</small>
+                        <label for="equations">Enter Equations (comma-separated):</label>
+                        <input type="text" class="form-control" id="equations" placeholder="e.g., y = x^2, y = sin(x)" required>
+                        <small class="form-text text-muted">Supported Functions: sin, cos, tan, sqrt, log, exp, pi, e, and more.</small>
                     </div>
-                    <button type="submit" class="btn btn-primary w-100">Graph</button>
+                    <div class="form-group">
+                        <label for="minX">Min X:</label>
+                        <input type="number" class="form-control" id="minX" value="-10">
+                    </div>
+                    <div class="form-group">
+                        <label for="maxX">Max X:</label>
+                        <input type="number" class="form-control" id="maxX" value="10">
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-block">Graph</button>
                 </form>
             </div>
         </div>
-        <div class="row mt-5">
-            <div class="col-md-8 offset-md-2">
-                <canvas id="graph"></canvas>
+        <div class="row mt-4">
+            <div class="col-md-12">
+                <canvas id="graph" class="w-100"></canvas>
             </div>
         </div>
     </section>