Added mathematical expression evaluator

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>
     );

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;

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 

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;
+}

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;

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(
+			`https://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;

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>

src/projects/home.css

@@ -16,6 +16,7 @@
   place-items: center;
 
   gap: 2rem;
+  padding-bottom: 2rem;
 }
 
 .box-1 {