Tell us what’s happening:
Describe your issue in detail here.
I have the Javascript Calculator partially working, but tests 14-16 fail. I need some help on what to do and where in my code to make these tests pass.
Your code so far
const buttons = [
{
id: 'back',
code: 8,
name: 'C',
shift: false
},
{
id: 'clear',
code: 8,
name: 'AC',
shift: true
},
{
id: 'zero',
code: 48,
name: 0,
shift: false
},
{
id: 'one',
code: 49,
name: 1,
shift: false
},
{
id: 'two',
code: 50,
name: 2,
shift: false
},
{
id: 'three',
code: 51,
name: 3,
shift: false
},
{
id: 'four',
code: 52,
name: 4,
shift: false
},
{
id: 'five',
code: 53,
name: 5,
shift: false
},
{
id: 'six',
code: 54,
name: 6,
shift: false
},
{
id: 'seven',
code: 55,
name: 7,
shift: false
},
{
id: 'eight',
code: 56,
name: 8,
shift: false
},
{
id: 'nine',
code: 57,
name: 9,
shift: false
},
{
id: 'multiply',
code: 56,
name: '*',
shift: true
},
{
id: 'subtract',
code: 187,
name: '-',
shift: true
},
{
id: 'equals',
code: 189,
name: '=',
shift: false
},
{
id: 'add',
code: 189,
name: '+',
shift: true
},
{
id: 'decimal',
code: 190,
name: '.',
shift: false
},
{
id: 'divide',
code: 191,
name: '/',
shift: false
},
]
function App() {
const [expression, setExpression] = React.useState("");
const [result, setResult] = React.useState(0);
return (
<div id="container" className="container">
<div id="screen" className="display">
<input id="expression" className="expression" type="text" value={expression} placeholder="0" disabled></input>
<input id="display" className="result" type="text" value={result} placeholder ="0" disabled></input>
</div>
<div id="grid" className="grid">
{buttons.map((button) => (
<Pad
key={button.id}
button={button}
expression={expression}
setExpression={setExpression}
result={result}
setResult={setResult}
/>
))}
</div>
</div>
)
}
function Pad({ button, expression, setExpression, result, setResult }) {
const style = {
gridArea: button.id,
}
const display = () => {
setExpression(prev => prev + button.name);
if (expression[expression.length - 1] == "=") {
if (/[1-9.]/.test(button.name)) {
setExpression(button.name.replace());
} else {
setExpression(result + button.name);
}
}
}
const calculate = () => {
setResult(eval(expression));
setExpression(prev => prev + "=")
}
const clearOne = () => {
setExpression(prev => prev.substring(0, prev.length - 1));
setResult(0);
};
const clearAll = () => {
setExpression("");
setResult(0);
};
let action;
switch (button.id) {
case 'equals':
action = calculate;
break;
case 'back':
action = clearOne;
break;
case 'clear':
action = clearAll;
break;
default:
action = display;
break;
}
return (
<button onClick={action} id={button.id} className={button.id} style={style}>
<i style={style}>{button.name}</i>
</button>
)
}
ReactDOM.render(<App />, document.getElementById('root'));
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36
Challenge: Build a JavaScript Calculator
Link to the challenge: