React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Lydia Demi

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
  background-color: #FFF
}

input {
  margin-top: 20px;
  margin-left: 20px;
}

#timer {
  border: 2px solid black;
  padding: 20px;
  height: 160px;
  width: 275px;
}

Babel + JSX

class App extends React.Component {
 constructor(props) {
    super(props)
    this.state = {
      start: '', //'10:10:10'
      end: '',
      startSec: '', //'36610'
      endSec: ''
    }
    this.clicked = this.clicked.bind(this);
    this.handleTimeout = this.handleTimeout.bind(this);
  }

  componentWillMount() {
    setTimeout(()=>{
      this.setState({
        startSec: --this.state.startSec
      })
    },1000)
  }

  handleTimeout() {
    // decrement state.startSec
    // render state.startSec

  }

  clicked() {
    let re=/^([0-1]\d|2[0-3]):([0-5]\d):([0-5]\d)$/;
    let validStart = re.test(this.state.start);
    // let validEnd = re.test(this.state.end);
    let start = this.state.start.split(":");
    let end = this.state.end.split(":");
    let startSec =  (Number(start[0]) * 3600) + (Number(start[1]) * 60) + (Number(start[2]));
    let endSec = (Number(end[0]) * 3600) + (Number(end[1]) * 60) + (Number(end[2]));
    // validate inputs
    if(!validStart || !validEnd) { alert('please use format HH:MM:SS') }
    if(endSec > startSec) {
      alert('Please make end time less than start time!');
    }
    this.setState({ startSec: startSec }); //won't register untill second button click

    if(startSec > endSec) {
      console.log('state startSec', this.state.startSec);
      console.log('startSec', startSec);
    }
    setInterval(this.handleTimeout() ,1000);
  }

  render () {
    return (
      <div>
        <h2> Timer </h2>
        <div id="timer">
          Start Time <input type="text" placeholder="hh:mm:ss" onChange={(e) => {this.setState({start: e.target.value})}} /><br />
          End Time <input type="text" placeholder="hh:mm:ss" onChange={(e) => {this.setState({end: e.target.value})}}/> <br /><br />
          <button onClick={this.clicked}> Start Countdown </button><br /><br />
          <div id="output">{this.state.startSec}</div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
 ...