const App = () => (
<div className="calculator">
<div className="display" id="display">
0
</div>
<Buttons />
</div>
);
class Buttons extends React.Component {
constructor(props) {
super(props);
this.count = "";
}
handleClick = (event) => {
const digit = event.target.innerText;
const actions = {
Delete: () => {
this.count = "";
document.getElementById("display").innerText = 0;
},
"=": () => {
const result = eval(this.count);
this.count = result;
document.getElementById("display").innerText = result;
},
".": () => {
if (
!this.count
.split(/[+\-*/]/)
.slice(-1)[0]
.includes(".")
) {
this.count += digit;
document.getElementById("display").innerText = this.count;
}
},
"+": () => {
if (/[+\-*/]$/.test(this.count)) {
this.count = this.count.replace(/[+*/]{1,}$|-/, digit);
document.getElementById("display").innerText = this.count;
} else {
this.count += digit;
document.getElementById("display").innerText = this.count;
}
},
"-": () => {
const lastChar = this.count.slice(-1);
const oldChar = this.count.slice(-2);
if(/[--]{2}$/.test(this.count)){
document.getElementById("display").innerText = this.count;
}else{
this.count += digit;
document.getElementById("display").innerText = this.count;
}
},
"*": () => {
if (/[+\-*/]$/.test(this.count)) {
this.count = this.count.replace(/[+*/]{1,}$|-/, digit);
document.getElementById("display").innerText = this.count;
} else {
this.count += digit;
document.getElementById("display").innerText = this.count;
}
},
"/": () => {
if (/[+\-*/]$/.test(this.count)) {
this.count = this.count.replace(/[+*/]{1,}$|-/, digit);
document.getElementById("display").innerText = this.count;
} else {
this.count += digit;
document.getElementById("display").innerText = this.count;
}
},
_: () => {
if (
digit !== "0" ||
(digit === "0" &&
this.count !== "" )
) {
this.count += digit;
document.getElementById("display").innerText = this.count;
}
}
};
(actions[digit] || actions._)();
};
render() {
const divs = {
div2: ["clear", "Delete"],
div3: {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5,
six: 6,
seven: 7,
eight: 8,
nine: 9
},
div4: ["equals", "="],
div5: ["decimal", "."],
div6: ["zero", 0],
div7: ["add", "+"],
div8: ["subtract", "-"],
div9: ["multiply", "*"],
div10: ["divide", "/"]
};
return Object.entries(divs).map(([className, values]) => {
return (
<div className={className}>
{Array.isArray(values) ? (
<button id={values[0]} onClick={this.handleClick}>
{values[1]}
</button>
) : (
Object.entries(values).map(([key, value]) => {
return (
<button id={key} onClick={this.handleClick}>
{value}
</button>
);
})
)}
</div>
);
});
}
}
ReactDOM.render(<App />, document.getElementById("app"));
hi this is my code for the calculator challenge
everything works properly except that when i put two β-β signs it wonβt work and this test wonβt pass
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.c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:525:1889)
at Proxy.u (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:407:130)
at n.strictEqual (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:550:655)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:178252
at l (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79440)
at Generator._invoke (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79193)
at Generator.next (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79799)
at r (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1054)
at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1265)
i really donβ t know how to fix it