I was trying to answer a coding question in JavaScript. I had some code and used <pre><code>
, put my code in, then typed </pre></code>
. I then came across this error when trying to post:
Oops! Your edit couldn't be submitted because:
Your post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon.
It is properly formatted (at least by the preview it is), so how can I fix this? I'm new to Stack Overflow formatting.
import React, { Component } from 'react';
import './Calculator.css';
class Calculator extends Component {
constructor(props) {
super(props);
this.state = {
value: "",
calculationResult: "",
error: false
};
this.handleClick = this.handleClick.bind(this);
this.calculateResult = this.calculateResult.bind(this);
}
// Handle button clicks here
handleClick(buttonName) {
let newValue = this.state.value;
let newCalculationResult = this.state.calculationResult;
let newError = false;
switch (buttonName) {
case "AC":
// Clear the calculator
newValue = "";
newCalculationResult = "";
break;
case "CE":
// Clear the last digit
newValue = newValue.slice(0, -1);
break;
case "+/-":
// Negate the current value
newValue = parseFloat(newValue) * -1;
break;
case "=":
// Calculate the result
try {
newCalculationResult = this.calculateResult();
} catch (error) {
newCalculationResult = "Error";
newError = true;
}
break;
default:
// Append the button value to the current value
newValue += buttonName;
break;
}
// Update the state with the new values
this.setState({
value: newValue.toString(),
calculationResult: newCalculationResult.toString(),
error: newError
});
}
// Calculate the result here
calculateResult() {
const{ value } = this.state;
// Validate the expression
const regex = /^[0-9+\-*/().\s]+$/;
if (!regex.test(value)) {
throw new Error("Invalid expression");
}
// Calculate the result
let result;
try {
result = eval(value);
} catch (error) {
throw new Error("Invalid expression");
}
return result;
// Render the calculator interface here
render() {
const { value, calculationResult, error } = this.state;
return (
<div className="calculator">
<div className="display">
<div className="value">{value}</div>
<div className="result">{calculationResult}</div>
</div>
<div className="buttons">
<div className="row">
<Button name="AC" onClick={this.handleClick} />
<Button name="+/-" onClick={this.handleClick} />
<Button name="%" onClick={this.handleClick} />
<Button name="/" onClick={this.handleClick} />
</div>
<div className="row">
<Button name="7" onClick={this.handleClick} />
<Button name="8" onClick={this.handleClick} />
<Button name="9" onClick={this.handleClick} />
<Button name="*" onClick={this.handleClick} />
</div>
<div className="row">
<Button name="4" onClick={this.handleClick} />
<Button name="5" onClick={this.handleClick} />
<Button name="6" onClick={this.handleClick} />
<Button name="-" onClick={this.handleClick} />
</div>
<div className="row">
<Button name="1" onClick={this.handleClick} />
<Button name="2" onClick={this.handleClick} />
<Button name="3" onClick={this.handleClick} />
<Button name="+" onClick={this.handleClick} />
</div>
<div className="row">
<Button name="0" onClick={this.handleClick} />
<Button name="." onClick={this.handleClick} />
<Button name="CE" onClick={this.handleClick} />
<Button name="=" onClick={this.handleClick} />
</div>
</div>
{error && <div className="error">Invalid expression</div>}
</div>
);
}
}
}
export default Calculator;
~~~