import React, { useState } from
"react"
;
import
"./App.css"
;
import * as math from
"mathjs"
;
function
App() {
const [expression, setExpression] = useState(
""
);
const [screenVal, setScreenVal] = useState(
""
);
const [customVariables, setCustomVariables] = useState({});
const [mode, setMode] = useState(
"rad"
);
function
handleChange(e) {
setExpression(e.target.value);
}
function
handleClick(input) {
setExpression((prevExpression) => prevExpression + input);
}
function
calculate() {
try
{
const allVariables = {
...customVariables,
pi: Math.PI,
e: Math.E,
fact: math.factorial,
sin: mode ===
"rad"
? Math.sin : math.sin,
cos: mode ===
"rad"
? Math.cos : math.cos,
tan: mode ===
"rad"
? Math.tan : math.tan,
asin: mode ===
"rad"
? Math.asin : math.asin,
acos: mode ===
"rad"
? Math.acos : math.acos,
atan: mode ===
"rad"
? Math.atan : math.atan,
};
const result = math.evaluate(expression, allVariables);
if
(
typeof
result ===
"number"
&& !isNaN(result)) {
setScreenVal(Number(result).toFixed(4));
}
else
{
setScreenVal(
"Error: Invalid expression"
);
}
}
catch
(error) {
setScreenVal(
"Error: Invalid expression"
);
}
}
function
clearScreen() {
setExpression(
""
);
setScreenVal(
""
);
}
function
backspace() {
const newExpression = expression.slice(0, -1);
setExpression(newExpression);
}
function
toggleMode() {
setMode(mode ===
"rad"
?
"deg"
:
"rad"
);
}
return
(
<>
<div className=
"App"
>
<div className=
"calc-body"
>
<h1>Scientific Calculator</h1>
<div className=
"input-section"
>
<input
className=
"screen"
type=
"text"
value={expression}
onChange={handleChange}
/>
<div className=
"output"
>Output: {screenVal}</div>
</div>
<div className=
"button-section"
>
<div className=
"numeric-pad"
>
{[
"1"
,
"2"
,
"3"
,
"4"
,
"5"
,
"6"
,
"7"
,
"8"
,
"9"
,
"0"
].map(
(input) => (
<button key={input}
onClick={() =>
handleClick(input)}>
{input}
</button>
)
)}
<button onClick={() =>
handleClick(
"."
)}>,</button>
</div>
<div className=
"operators"
>
{[
"+"
,
"-"
,
"*"
,
"/"
,
"^"
,
"sqrt("
,
"sin("
,
"cos("
,
"tan("
,
"cbrt("
,
"asin("
,
"acos("
,
"atan("
,
"("
,
")"
,
].map((input) => (
<button key={input}
onClick={() =>
handleClick(input)}>
{input}
</button>
))}
<button onClick={() =>
handleClick(
"pi"
)}>Pi</button>
<button onClick={() =>
handleClick(
"fact("
)}>Factorial</button>
</div>
<div className=
"control-buttons"
>
<button className=
"clear-button"
onClick={clearScreen}>
C
</button>
<button className=
"equals-button"
onClick={calculate}>
=
</button>
<button className=
"backspace-button"
onClick={backspace}>
del
</button>
</div>
</div>
</div>
<div className=
"variables"
></div>
</div>
</>
);
}
export
default
App;