Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class Clock extends Component {
- constructor(props) {
- super(props);
- this.state = {break:5,
- session:25,
- timer: 1500}
- this.handleClick = this.handleClick.bind(this);
- this.handleTimer=this.handleTimer.bind(this);
- }
- handleClick(event){
- const id= event.target.id;
- let breakvar= this.state.break;
- let sessionvar= this.state.session;
- if (id==="break-increment" && breakvar<=59){
- this.setState((state) => ({
- break: this.state.break +1}));}
- else if (id==="break-decrement" && breakvar>1){
- this.setState((state) => ({
- break: this.state.break -1}));}
- else if(id==="reset"){
- this.setState((state) => ({
- break: 5, session: 25, timer: 1500}));
- }
- else if (id==="session-increment" && sessionvar <=59){
- this.setState((state) => ({
- session: this.state.session +1, timer: this.state.timer + 60}));}
- else if(id==="session-decrement" && sessionvar>1){
- this.setState((state) => ({
- session: this.state.session -1, timer:this.state.timer - 60}));}
- }
- handleTimer(evt){
- let timer=this.state.timer;
- let Interval=setInterval(() => {
- this.setState({
- timer: this.state.timer - 1
- })
- console.log(timer) },1000)
- if(timer ===0){
- clearInterval(Interval)
- }
- }
- Clock(){
- let minutes = Math.floor(this.state.timer / 60);
- let seconds = this.state.timer - minutes * 60;
- seconds = seconds < 10 ? '0' + seconds : seconds;
- minutes = minutes < 10 ? '0' + minutes : minutes;
- return minutes + ':' + seconds;
- }
- render() {
- return(
- <div id="container">
- <Display break={this.state.break} displayTime={this.Clock()} session={this.state.session}/>
- <p id="break-label">Break length</p>
- <Button onClick={this.handleClick} id="break-increment"/>
- <Button onClick={this.handleClick} id="break-decrement"/>
- <p id="session-label">Session length</p>
- <Button onClick={this.handleClick} id="session-increment" />
- <Button onClick={this.handleClick} id="session-decrement"/>
- <Button onClick={this.handleTimer} id="start_stop"/>
- <Button onClick={this.handleClick} id="reset"/>
- </div>
- )
- }
Add Comment
Please, Sign In to add comment