React

by sanat gupta

HTML

<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

function TodoApp() {
   const [minute,setMinute] = React.useState(0);
  const [second,setSecond] = React.useState(0);
  const handleOnChange = (event)=>{
    const {name,value} = event.target
    if(name === 'minutes'){
      setMinute(value)
    }else if(name === 'second'){
      setSecond(value)
    }
    
  }
 
  const handleTimeStart = ()=>{
     console.log(minute,second)
  }
  return (
    <Fragment>
      <label>
        <input type="number" name="minutes" onChange={handleOnChange}/>
        Minutes
      </label>
      <label>
        <input type="number" name="second" onChange={handleOnChange}/>
        Seconds
      </label>

      <button onClick={handleTimeStart}>START</button>
      <button>PAUSE / RESUME</button>
      <button>RESET</button>

      <h1 data-testid="running-clock">00:00</h1>
    </Fragment>
  );
}

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