React

HTML

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

CSS

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

.right {
  text-decoration: underline;
}

.wrong {
  text-decoration: line-through;
}

React

class NumberMemoryGame extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '', answer: '123456'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
    	<div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Guess:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
        <div>
          {[...this.state.value].map((char, i) => (
          <span className={`${(char === this.state.answer[i]) ? 'right' : 'wrong'}`}>
           {char}
          </span>))}
        </div>
      </div>
    );
  }
}

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