import './index.css'
import { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState("0")
const [lastResult, setLastResult] = useState(null);
const cal = (nums) => {
const operators = ['--','..', '++', '**', '//', '-/', '-*', '+/', '+*', '+-', '/*', '/-', '/+', '*+', '*/']
// const regex = /(\+\+|--|\.\.|\/\/|\*\*)/
const regex = /\d+\.\d+\.\d+/
const lastVal = data.slice(-1) + nums
setData((prev) => {
// console.log(prev.slice(0, -1));
console.log(prev);
if((prev.charAt(0) === '.' || prev.charAt(0) === '*' || prev.charAt(0) === '/' )) {
return '0'
}
else if (regex.test(prev)) {
// Prevent multiple decimal points
console.log(prev);
return 'working';
}
else if(prev.charAt(0) === '0') {
return nums
}
else if(operators.some(op => lastVal.includes(op))) {
const newOps= prev.slice(0, -1)
return newOps+nums
}
else {
return prev+nums
}
})
}
const handleKeys = (e) => {
if(e.shift) {
console.log(e);
}
else if(e.key === 'Enter') {
setData(eval(data));
}
}
useEffect(() => {
window.addEventListener('keydown', handleKeys);
return () => {
window.removeEventListener('keydown', handleKeys);
};
}, [data]);
const result = () => {
try {
const evalResult = eval(data);
setLastResult(evalResult); // Store the last result
setData(evalResult.toString()); // Update data to show the result
} catch (error) {
console.error("Invalid calculation", error);
setData("Error");
}
};
return (
<div id="calculator">
<input id="display" readOnly value={data} />
<div id="keys">
<button onClick={() => cal("+")} className="operator-btn" id='add'>+</button>
<button onClick={() => cal("7")} id="seven">7</button>
<button onClick={() => cal("8")} id='eight'>8</button>
<button onClick={() => cal("9")} id='nine'>9</button>
<button onClick={() => cal("-")} id='subtract' className="operator-btn">-</button>
<button onClick={() => cal("4")} id="four">4</button>
<button onClick={() => cal("5")} id="five">5</button>
<button onClick={() => cal("6")} id="six">6</button>
<button onClick={() => cal("*")} id='multiply' className="operator-btn">*</button>
<button onClick={() => cal("1")} id="one">1</button>
<button onClick={() => cal("2")} id="two">2</button>
<button onClick={() => cal("3")} id="three">3</button>
<button onClick={() => cal("/")} id='divide' className="operator-btn">/</button>
<button onClick={() => cal("0")} id="zero">0</button>
<button onClick={() => cal(".")} id="decimal">.</button>
` <button onClick={result} id='equals'>=</button>`
<button onClick={() => setData('0')} className="operator-btn" id="clear">C</button>
</div>
</div>
)
}
export default App
11. When the decimal element is clicked, a "." should append to the currently displayed value; two "." in one number should not be accepted
An input of "5 . 5 . 5" should display 5.55 : expected '5.5.5' to equal '5.55'
AssertionError: An input of "5 . 5 . 5" should display 5.55 : expected '5.5.5' to equal '5.55'
at Proxy.h (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:531:2123)
at Proxy.u (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:407:130)
at e.exports.n.strictEqual (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:556:655)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:190611
at p (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:94539)
at Generator.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:95876)
at Generator.next (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:94902)
at r (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1169)
at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1380)
12. I should be able to perform any operation (+, -, *, /) on numbers containing decimal points830ms
13. If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign.
The sequence "5 * - + 5" = should produce an output of "10" : expected '-25' to equal '10'
AssertionError: The sequence "5 * - + 5" = should produce an output of "10" : expected '-25' to equal '10'
at Proxy.h (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:531:2123)
at Proxy.u (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:407:130)
at e.exports.n.strictEqual (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:556:655)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:192228
at p (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:94539)
at Generator.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:95876)
at Generator.next (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:94902)
at r (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1169)
at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1380)
