React

by Tyler Brown

HTML

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

CSS

* {
  box-sizing: border-box;
}

.app {
  margin: 24px;
}

h2 {
  margin-top: 24px;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 16px;
}

body {
  background: #EEE;
  font-family: Helvetica;
  color: #333;
}

textarea, input {
  border: 1px solid #999;
  border-radius: 3px;
  outline: none;
  padding: 12px;
  background-color: white;
  font-family: Menlo, monospace;
}

button {
  padding: 12px;
  border: 1px solid #999;
  background-color: transparent;
  border-radius: 3px;
  cursor: pointer;
  font-family: Menlo, monospace;
}
button:hover {
  background-color: #DDF;
}

textarea {
  width: 100%;
  height: 200px;
}

input:focus, textarea:focus {
  border-color: #333;
}

.delimiter-con {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
}

.ta-input {
  height: 100px;
}
.ta-output {
  height: 300px;
}

React

class TodoApp extends React.Component {

  constructor(props) {
    super(props)

		this.state = {
    	inputStr: '',
      outputStr: '',
      delimiter: ',',
    };
    
    this.onChangeInput = this.onChangeInput.bind(this);
    this.onChangeOutput = this.onChangeOutput.bind(this);
    this.onChangeDelimiter = this.onChangeDelimiter.bind(this);
  }
  
  get outputStr() {
    const {inputStr, delimiter, outputStr} = this.state;
    if (outputStr) return outputStr;
  	const parts = inputStr.split(delimiter).map(p => p.trim().replace(/"/g, '""'));
  	return `"${parts.join('\n')}"`;
  }
  
  onChangeInput(event) {
  	const inputStr = event.target.value;
    this.setState({inputStr, outputStr: ''});
  }

  onChangeOutput(event) {
  	const outputStr = event.target.value;
    this.setState({outputStr});
  }
  
  onChangeDelimiter(event) {
  	const delimiter = event.target.value;
    this.setState({delimiter});
  }
  
  onClickSetDelimiter(delimiter) {
  	this.setState({delimiter, outputStr: ''});
  }
  
  render() {
  	const {inputStr, delimiter} = this.state;
    return (
      <div className="app">
        <h2>Input</h2>
        <textarea className="ta-input" onChange={this.onChangeInput} value={inputStr} />

        <h2>Delimiter</h2>
        <div className="delimiter-con">
          <button onClick={this.onClickSetDelimiter.bind(this, ',')}>,</button>
          <button onClick={this.onClickSetDelimiter.bind(this, ';')}>;</button>
          <input type="text" value={delimiter} onChange={this.onChangeDelimiter} />
        </div>
        
        <h2>Output</h2>
        <textarea value={this.outputStr} className="ta-output" onChange={this.onChangeOutput} />

        <h2>ILY!</h2>
      </div>
    )
  }
}

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