React

HTML

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

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

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TodoApp extends React.Component {
    constructor() {
    super();
    this.state = {
      breakInt: 5,
      sessionInt: 25,
      timeLeft: 1500,
      running: false,
      timerType: 'Session',
      switching: false
    };
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
    this.startStop = this.startStop.bind(this);
    this.reset = this.reset.bind(this);
    this.timerSet = this.timerSet.bind(this);
    this.switchTime = this.switchTime.bind(this);
  }
  increment = e => {
    var temp = e.target.value;
    if (this.state[temp] < 60) {
      this.setState(prevState => ({ [temp]: prevState[temp] + 1 }));
    }
    this.timerSet();
  };
  decrement = e => {
    var temp = e.target.value;
    if (this.state[temp] > 1) {
      this.setState(prevState => ({ [temp]: prevState[temp] - 1 }));
    }
    this.timerSet();
  };
  startStop = () => {
    this.state.running
      ? this.setState(prevState=>({ running: false }))
      : this.setState(prevState=>({ running: true }));
  };
  timerSet = () => {
    if (this.state.switching) {
      this.state.timerType === 'Break'
        ? this.setState(prevState => ({
            timeLeft: prevState.breakInt * 60 - 1
          }))
        : this.setState(prevState => ({
            timeLeft: prevState.sessionInt * 60 - 1
          }));
    } else {
      this.state.timerType === 'Break'
        ? this.setState(prevState => ({
            timeLeft: prevState.breakInt * 60
          }))
        : this.setState(prevState => ({
            timeLeft: prevState.sessionInt * 60
          }));
    }
  };
  timerConvert = () => {
    if (this.state.timeLeft === 0) {
      document.getElementById('beep').play();
    }
    var mins = Math.floor(this.state.timeLeft / 60);
    var secs = this.state.timeLeft % 60;
      if (mins < 10) {
        mins = '0'+mins;
      }
    if (secs < 10) {
      secs='0' + secs;
    }
    return mins + ':' + secs;

  };
  reset = () => {
   ...