Tell us what’s happening:
I have followed these instructions
Your code so far
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {
Default: "0",
Values: ""
};
}
onClick = (button) => {
if (button === "=") {
this.calculate();
} else if (button === "Clear") {
this.reset();
} else {
this.setState({
Values: this.state.Values + button
});
}
};
calculate = () => {
try {
this.setState({
Values: (eval(this.state.Values) || "") + ""
});
} catch (e) {
this.setState({
Values: "error"
});
}
};
reset = () => {
this.setState({
Values: ""
});
};
render() {
return (
<div id="Calc">
<div id="square">
<div id="display">
{this.state.Values !== "" ? this.state.Values : this.state.Default}
</div>
<div id="buttons">
<button
name="="
id="equals"
onClick={(e) => this.onClick(e.target.name)}
>
<big>=</big>
</button>
<button
name="0"
id="zero"
onClick={(e) => this.onClick(e.target.name)}
>
0
</button>
<button
name="1"
onClick={(e) => this.onClick(e.target.name)}
id="one"
>
1
</button>
<button
name="2"
onClick={(e) => this.onClick(e.target.name)}
id="two"
>
2
</button>
<button
name="3"
id="three"
onClick={(e) => this.onClick(e.target.name)}
>
3
</button>
<button
name="4"
id="four"
onClick={(e) => this.onClick(e.target.name)}
>
4
</button>
<button
name="5"
id="five"
onClick={(e) => this.onClick(e.target.name)}
>
5
</button>
<button
name="6"
id="six"
onClick={(e) => this.onClick(e.target.name)}
>
6
</button>
<button
name="7"
id="seven"
onClick={(e) => this.onClick(e.target.name)}
>
7
</button>
<button
name="8"
id="eight"
onClick={(e) => this.onClick(e.target.name)}
>
8
</button>
<button
name="9"
id="nine"
onClick={(e) => this.onClick(e.target.name)}
>
9
</button>
<button
name="+"
id="add"
onClick={(e) => this.onClick(e.target.name)}
>
+
</button>
<br />
<button
name="-"
id="subtract"
onClick={(e) => this.onClick(e.target.name)}
>
-
</button>
<br />
<button
name="*"
id="multiply"
onClick={(e) => this.onClick(e.target.name)}
>
x
</button>
<br />
<button
name="/"
id="divide"
onClick={(e) => this.onClick(e.target.name)}
>
/
</button>
<br />
<button
name="."
id="decimal"
onClick={(e) => this.onClick(e.target.name)}
>
.
</button>
<button
name="Clear"
id="clear"
onClick={(e) => this.onClick(e.target.name)}
>
Clear
</button>
<br />
</div>
</div>
</div>
);
}
}
var node = document.getElementById("root");
ReactDOM.render(<Calculator />, node);
https://codepen.io/DKPK/pen/PoWjmyW
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36
.
Challenge: Build a JavaScript Calculator
Link to the challenge: