import React, { Component } from 'react';
import './App.css';

var obj = {
  width: "200px",
  height: "200px",
  backgroundColor: "black"
}

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      text: '',
      count: 5
    }
    this.func = this.func.bind(this)
    this.onChange = this.onChange.bind(this)
    this.timer = this.timer.bind(this)
  }

  onChange(e){
    this.setState({
      text: e.currentTarget.value
    })
  }

  func(){
    alert(this.state.text)
  }

  timer(){
    var t = setInterval(() => {
      if(this.state.count === 0){
        clearInterval(t)
      }else{
        this.setState({
          count: this.state.count-1
        })
      }
    }, 1000)
  }

  render() {
    return (
      <div className="App">
        <input onChange={this.onChange} />
        <h1>{this.state.count}</h1>
        <button style={obj} onClick={this.timer}>Hello</button>
      </div>
    );
  }
}

export default App;