3

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;
4

1 Answer 1

6

I had some code and used <pre><code>, put my code in, then typed </pre></code>

That is probably the culprit. In CommonMark, the markdown flavor used by Stack Exchange code blocks start and end with code fences, indicated by 3 backticks ``` a on a single line, like so:

code here

And in the editor that show as:

```
code here
```

Keep the line before and after the code fence clear as well.

Do know that answers that only consist of code aren't great answers. We expect answers to explain what the issue in the question is and which steps need to be followed / changes are needed to reach a solution. Teach visitors how to fish instead of just feeding them.

2
  • 5
    It's worth mentioning that if OP used <pre><code> then they should close those HTML tags with </code></pre> not </pre></code>. Chances are the validation system that checks for code outside of formatting couldn't detect the code as being 'inside' the code block due to the misordered closing HTML tags.
    – Robotnik
    Commented Apr 3, 2023 at 2:42
  • 2
    @Robotnik I'm not going to confuse this new user even more with all the weird quirks the editor has. Let them first settle on markdown, when can complicate stuff later,.
    – rene
    Commented Apr 3, 2023 at 16:56

Not the answer you're looking for? Browse other questions tagged .