Elsofoku egyenlet megoldasa

by myrluk3

HTML

<script src="https://cdn.jsdelivr.net/npm/nerdamer@latest/nerdamer.core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/nerdamer@latest/Algebra.js"></script>
<script src="https://cdn.jsdelivr.net/npm/nerdamer@latest/Calculus.js"></script>
<script src="https://cdn.jsdelivr.net/npm/nerdamer@latest/Solve.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-size: 20px !important;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  margin-bottom: 20px;
}

button {
  margin: 20px 0;
  padding: 10px;
  border-radius: 4px;
  outline: none;
  font-size: 15px;
}

textarea {
  outline: none;
  padding: 10px;
  font-size: 15px;
}

.red {
  color: red;
}

.green {
  color: green;
}

React

class Egyenlet extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    egyenlet: "(x+1)*3=x-6",
    megoldas: nerdamer.solveEquations("(x+1)*3=x-6", "x").toString(),
    nerdamer: nerdamer("(x+1)*3=x-6").toString(),
    helytelen: false
    };
  }
  
  render() {
    return (
    	<div className="card">
  <div className="card-header">
    Elsőfukú egyenlet megoldása:
  </div>
  <div className="card-body">
    <textarea className="form-control" rows="4" cols="50" value={this.state.egyenlet} onChange={(e) => {
        this.setState({egyenlet: event.target.value});
        console.log("alma")
        try {
          const nerd = nerdamer(event.target.value).toString();
          const megoldas = nerdamer.solveEquations(event.target.value, "x").toString();
          this.setState({ nerdamer: nerd, helytelen: false, megoldas: megoldas});
        }
        catch(e) { 
          this.setState({ nerdamer: "", helytelen: true, megoldas: ""})
        }}}/>
        <br/>
        <label>{"A beírt egyenlet:    "}
        { this.state.helytelen === true ? <label className="red">helytelen</label> : <label><strong>{this.state.nerdamer}</strong></label>}
        </label>
        <br/>
        <label>Megoldás: <label className="green">{this.state.megoldas}</label></label>
  </div>
</div>
    )
  }
}

ReactDOM.render(<Egyenlet />, document.querySelector("#app"))