Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29

Added graphing functionality to the calculator app

#15
by smolSWE - opened
base: refs/heads/main
←
from: refs/pr/15
Discussion Files changed
+90
-3
Files changed (3) hide show
  1. index.html +9 -1
  2. script.js +66 -1
  3. style.css +15 -1
index.html CHANGED
@@ -4,8 +4,9 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Calculator</title>
8
  <link rel="stylesheet" href="style.css">
 
9
  </head>
10
  <body>
11
  <div class="calculator">
@@ -32,6 +33,13 @@
32
  <button onclick="calculate()">=</button>
33
  </div>
34
  </div>
 
 
 
 
 
 
 
35
  <script src="script.js"></script>
36
  </body>
37
  </html>
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Calculator with Graph</title>
8
  <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
  </head>
11
  <body>
12
  <div class="calculator">
 
33
  <button onclick="calculate()">=</button>
34
  </div>
35
  </div>
36
+
37
+ <div class="graph-container">
38
+ <input type="text" id="equation" placeholder="Enter equation (e.g., x^2)">
39
+ <button onclick="plotGraph()">Plot Graph</button>
40
+ <canvas id="myChart"></canvas>
41
+ </div>
42
+
43
  <script src="script.js"></script>
44
  </body>
45
  </html>
script.js CHANGED
@@ -1,5 +1,6 @@
1
 
2
  let display = document.getElementById('display');
 
3
 
4
  function appendValue(value) {
5
  display.value += value;
@@ -11,12 +12,76 @@ function clearDisplay() {
11
 
12
  function calculate() {
13
  try {
14
- display.value = eval(display.value);
 
 
15
  } catch (error) {
16
  display.value = 'Error';
17
  }
18
  }
19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  function deleteLast() {
21
  display.value = display.value.slice(0, -1);
22
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
2
  let display = document.getElementById('display');
3
+ let chart;
4
 
5
  function appendValue(value) {
6
  display.value += value;
 
12
 
13
  function calculate() {
14
  try {
15
+ let expression = display.value;
16
+ let result = evaluateExpression(expression);
17
+ display.value = result;
18
  } catch (error) {
19
  display.value = 'Error';
20
  }
21
  }
22
 
23
+ function evaluateExpression(expression) {
24
+ // Basic implementation, more robust parsing needed for complex expressions
25
+ expression = expression.replace(/[^-()\d/*+.]/g, ''); // Remove invalid characters
26
+ expression = expression.replace(/(\d+\.\d+)/g, parseFloat); // clean floats
27
+ expression = expression.replace(/(\d+)/g, parseInt); // clean integers
28
+ try {
29
+ return new Function('return ' + expression)();
30
+ } catch (e) {
31
+ return 'Error';
32
+ }
33
+ }
34
+
35
+
36
  function deleteLast() {
37
  display.value = display.value.slice(0, -1);
38
  }
39
+
40
+ function plotGraph() {
41
+ const equation = document.getElementById('equation').value;
42
+ const xValues = [];
43
+ const yValues = [];
44
+
45
+ for (let x = -10; x <= 10; x += 0.5) {
46
+ xValues.push(x);
47
+ try {
48
+ // Replace x in the equation and evaluate
49
+ let y = evaluateExpression(equation.replace(/x/g, x));
50
+ yValues.push(y);
51
+ } catch (error) {
52
+ alert("Invalid equation!");
53
+ return;
54
+ }
55
+ }
56
+
57
+ // Destroy previous chart if it exists
58
+ if (chart) {
59
+ chart.destroy();
60
+ }
61
+
62
+ const ctx = document.getElementById('myChart').getContext('2d');
63
+ chart = new Chart(ctx, {
64
+ type: 'line',
65
+ data: {
66
+ labels: xValues,
67
+ datasets: [{
68
+ label: equation,
69
+ data: yValues,
70
+ borderColor: 'blue',
71
+ fill: false
72
+ }]
73
+ },
74
+ options: {
75
+ scales: {
76
+ x: {
77
+ type: 'linear',
78
+ position: 'bottom'
79
+ },
80
+ y: {
81
+ type: 'linear',
82
+ position: 'left'
83
+ }
84
+ }
85
+ }
86
+ });
87
+ }
style.css CHANGED
@@ -1,3 +1,4 @@
 
1
  .calculator {
2
  width: 300px;
3
  margin: 50px auto;
@@ -47,4 +48,17 @@
47
 
48
  .calculator .buttons button:nth-child(4n):hover {
49
  background-color: #f2b96e;
50
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
  .calculator {
3
  width: 300px;
4
  margin: 50px auto;
 
48
 
49
  .calculator .buttons button:nth-child(4n):hover {
50
  background-color: #f2b96e;
51
+ }
52
+
53
+ .graph-container {
54
+ width: 600px;
55
+ margin: 20px auto;
56
+ text-align: center;
57
+ }
58
+
59
+ #equation {
60
+ padding: 10px;
61
+ font-size: 16px;
62
+ width: 400px;
63
+ margin-bottom: 10px;
64
+ }