From f61afbe5f42c4c8c712d795b06abe49d0b587995 Mon Sep 17 00:00:00 2001
From: anu_pheonix <anushthabageria@gmail.com>
Date: Fri, 28 Oct 2022 04:22:31 +0530
Subject: [PATCH 1/2] Added mathematical expression evaluator

---
 src/App.js                                    |  2 +
 .../Code/Code.js                              | 17 +++++
 .../Desc/Desc.js                              | 27 ++++++++
 .../MathExpEval/MathExpEval.css               | 24 +++++++
 .../MathExpEval/MathExpEval.js                | 28 ++++++++
 .../MathExpEval/MathExpEvalFrame.js           | 66 +++++++++++++++++++
 src/projects/Home.js                          | 13 ++++
 src/projects/home.css                         |  1 +
 8 files changed, 178 insertions(+)
 create mode 100644 src/projects/9-mathematical-expression-evaluator/Code/Code.js
 create mode 100644 src/projects/9-mathematical-expression-evaluator/Desc/Desc.js
 create mode 100644 src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEval.css
 create mode 100644 src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEval.js
 create mode 100644 src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEvalFrame.js

diff --git a/src/App.js b/src/App.js
index 31e5591..7711015 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,7 @@ import DisableButton from './projects/5-disable-button/DisableButton/DisableButt
 import SumTwoNum from './projects/6-sumTwoNum/SumTwoNum/SumTwoNum'
 import TodoAddV1 from './projects/7-todoAddV1/TodoV1/TodoAddV1'
 import TodoDeleteV2 from './projects/8-todoDeleteV2/TodoV2/TodoDeleteV2'
+import MathExpEval from './projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEval'
 
 class App extends Component{
    
@@ -25,6 +26,7 @@ class App extends Component{
           <Route exact path="/summation" element={<SumTwoNum />}></Route>
           <Route exact path="/todo-add-v1" element={<TodoAddV1 />}></Route>
           <Route exact path="/todo-delete-v2" element={<TodoDeleteV2 />}></Route>
+          <Route exact path="/mathematical-expression-evaluator" element={<MathExpEval />}></Route>
         </Routes> 
       </div>
     );
diff --git a/src/projects/9-mathematical-expression-evaluator/Code/Code.js b/src/projects/9-mathematical-expression-evaluator/Code/Code.js
new file mode 100644
index 0000000..46bd20a
--- /dev/null
+++ b/src/projects/9-mathematical-expression-evaluator/Code/Code.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+class Code extends Component {
+	render() {
+		return (
+			<div className='code'>
+				<img
+					height={550}
+					src='https://i.imgur.com/D5R1yfA.png'
+					alt='Mathematical Expression Evauator'
+				/>
+			</div>
+		);
+	}
+}
+
+export default Code;
diff --git a/src/projects/9-mathematical-expression-evaluator/Desc/Desc.js b/src/projects/9-mathematical-expression-evaluator/Desc/Desc.js
new file mode 100644
index 0000000..b927318
--- /dev/null
+++ b/src/projects/9-mathematical-expression-evaluator/Desc/Desc.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import './../../projects.css'
+
+class Desc extends Component {
+    
+    render() {
+        return (
+            <div className="desc">
+                <h1 style={{color: '#3498db'}}>How to delete from todo list ?</h1> 
+                <mark>Posted on Oct 27, 2022</mark>
+                <h3>Remember this concept, <br />Start s-m-a-l-l to create something BIG</h3>
+                <p>To create Mathematical Expression Evaluator, we have to : </p>
+                <ul style={{ fontSize: '20px'}}>
+                    <li> Create textarea to take expression as input from user </li>
+                    <li> Create input box to take precision as input from user</li>
+                    <li> Create button to evaluate expression </li>
+                    <li> Create div to show result </li>
+                    <li> Make an API call to mathjs API to get the result</li>
+                    <li> <b>mathjs</b> provoides lot of functions including algebra, complex numbers, simple unit calculations and many more.</li>
+                    <li>For more information how to write query: <a href='https://mathjs.org/examples/index.html'>Click Here</a> or <a href='mailto:spiralforge.spiralforge@gmail.com'>Contact Author</a>.</li>
+                </ul>
+            </div>
+        )
+    } 
+}
+
+export default Desc 
diff --git a/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEval.css b/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEval.css
new file mode 100644
index 0000000..607b85f
--- /dev/null
+++ b/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEval.css
@@ -0,0 +1,24 @@
+.mathExpDiv {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+textarea {
+    width: 80%;
+    height: 300px;
+    font-size: large;
+    resize: vertical;
+}
+
+input {
+    width: 80%;
+    height: 50px;
+    font-size: large;
+}
+
+h1 {
+    color: aliceblue;
+}
\ No newline at end of file
diff --git a/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEval.js b/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEval.js
new file mode 100644
index 0000000..9b6e0ad
--- /dev/null
+++ b/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEval.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import './../../projects.css';
+import './MathExpEval.css';
+
+import MathExpEvalFrame from './MathExpEvalFrame';
+import Desc from './../Desc/Desc';
+import Code from './../Code/Code';
+
+const MathExpEval = () => {
+	return (
+		<div className='container'>
+			<div className='projectName'>
+				<h1>MathExpEval</h1>
+				<MathExpEvalFrame />
+			</div>
+			<div className='description'>
+				<Desc />
+			</div>
+			<div className='codeRight'>
+				<h1>Code</h1>
+				<Code />
+			</div>
+		</div>
+	);
+};
+
+export default MathExpEval;
diff --git a/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEvalFrame.js b/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEvalFrame.js
new file mode 100644
index 0000000..e13c8f4
--- /dev/null
+++ b/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEvalFrame.js
@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+
+const MathExpEvalFrame = () => {
+	const [expression, setExpression] = useState('');
+	const [precision, setPrecision] = useState(2);
+	const [result, setResult] = useState('Please enter an expression');
+
+	const handleExpression = (e) => {
+		setExpression(e.target.value);
+	};
+
+	const handlePrecision = (e) =>{
+        if(e.target.value < 0){ 
+            alert('Precision cannot be negative');
+            return;
+        }
+
+        if(e.target.value > 16){
+            alert('Precision cannot be greater than 16');
+            return;
+        }
+
+		setPrecision(e.target.value);
+	};
+
+	const evaluate = async () => {
+		const value = await fetch(
+			`http://api.mathjs.org/v4/?expr=${encodeURIComponent(expression)}&precision=${precision}`
+		);
+		const data = await value.text();
+        console.log(data);
+		setResult(data);
+	};
+
+	const handleResult = () => {
+		try {
+			evaluate(expression);
+		} catch (e) {
+			console.error(e);
+			setResult('Invalid Expression');
+		}
+	};
+
+	return (
+		<div className='mathExpDiv'>
+			<textarea
+				type='text'
+				placeholder='Enter your expression (You can resize the textarea height)'
+				value={expression}
+				onChange={handleExpression}
+			></textarea>
+			<input
+				type='number'
+				placeholder='2'
+				value={precision}
+				onChange={handlePrecision}
+                max='16'
+                min='0'
+			/>
+			<button onClick={handleResult}>Evaluate</button>
+			<h3>{result}</h3>
+		</div>
+	);
+};
+
+export default MathExpEvalFrame;
diff --git a/src/projects/Home.js b/src/projects/Home.js
index 89bfd90..fe36f1a 100644
--- a/src/projects/Home.js
+++ b/src/projects/Home.js
@@ -95,6 +95,19 @@ class Home extends Component {
               </Link>
             </div>
           </div>
+
+          <div className="box-1 boxing">
+            <div className="box">
+              <Link to="mathematical-expression-evaluator">
+                <img
+                  style={{ width: "100%", height: "20rem", objectFit: "fill" }}
+                  src="https://i.imgur.com/ELDTVoQ.gif"
+                  alt="mathematical-expression-evaluator Gif1"
+                  className="img-resp"
+                />
+              </Link>
+            </div>
+          </div>
         </div>
 
         <div className="box-container"></div>
diff --git a/src/projects/home.css b/src/projects/home.css
index 5a753da..3411fc7 100644
--- a/src/projects/home.css
+++ b/src/projects/home.css
@@ -16,6 +16,7 @@
   place-items: center;
 
   gap: 2rem;
+  padding-bottom: 2rem;
 }
 
 .box-1 {

From 33cca32ef42691654a27e46db587756414e180b1 Mon Sep 17 00:00:00 2001
From: anu_pheonix <anushthabageria@gmail.com>
Date: Fri, 28 Oct 2022 04:39:23 +0530
Subject: [PATCH 2/2] Breaking code fixes

---
 .../MathExpEval/MathExpEvalFrame.js                             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEvalFrame.js b/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEvalFrame.js
index e13c8f4..2ffa5a8 100644
--- a/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEvalFrame.js
+++ b/src/projects/9-mathematical-expression-evaluator/MathExpEval/MathExpEvalFrame.js
@@ -25,7 +25,7 @@ const MathExpEvalFrame = () => {
 
 	const evaluate = async () => {
 		const value = await fetch(
-			`http://api.mathjs.org/v4/?expr=${encodeURIComponent(expression)}&precision=${precision}`
+			`https://api.mathjs.org/v4/?expr=${encodeURIComponent(expression)}&precision=${precision}`
 		);
 		const data = await value.text();
         console.log(data);