mirror of https://github.com/franjsco/tomadoro
implements timer
This commit is contained in:
parent
c35626062a
commit
9f147f4885
19
src/App.js
19
src/App.js
|
@ -1,25 +1,14 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import logo from './logo.svg';
|
import Timer from './components/Timer';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<header className="App-header">
|
<h1>tomadoro</h1>
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
|
||||||
<p>
|
<Timer />
|
||||||
Edit <code>src/App.js</code> and save to reload.
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
className="App-link"
|
|
||||||
href="https://reactjs.org"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Learn React
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
.timer {
|
||||||
|
font-size: 120px;
|
||||||
|
}
|
|
@ -0,0 +1,80 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { Button } from 'reactstrap';
|
||||||
|
import './Timer.css';
|
||||||
|
|
||||||
|
class Timer extends Component {
|
||||||
|
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.defaultSeconds = 1500;
|
||||||
|
this.state = {
|
||||||
|
seconds: this.defaultSeconds,
|
||||||
|
started: false
|
||||||
|
};
|
||||||
|
this.startTimer = this.startTimer.bind(this);
|
||||||
|
this.stopTimer = this.stopTimer.bind(this);
|
||||||
|
this.resetTimer = this.resetTimer.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
fmtMSS(s){return(s-(s%=60))/60+(9<s?':':':0')+s}
|
||||||
|
|
||||||
|
tick() {
|
||||||
|
this.setState(state => ({
|
||||||
|
seconds: state.seconds -1
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
startTimer() {
|
||||||
|
this.setState({ started: true })
|
||||||
|
this.interval = setInterval(() => this.tick(), 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
stopTimer() {
|
||||||
|
this.setState({ started: false });
|
||||||
|
clearInterval(this.interval);
|
||||||
|
}
|
||||||
|
|
||||||
|
resetTimer() {
|
||||||
|
this.stopTimer();
|
||||||
|
this.setState({ seconds: this.defaultSeconds});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
|
||||||
|
<p class="timer">{this.fmtMSS(this.state.seconds)}</p>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
color="success"
|
||||||
|
onClick={this.startTimer}
|
||||||
|
disabled={this.state.started}
|
||||||
|
>
|
||||||
|
START
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
color="danger"
|
||||||
|
size="lg"
|
||||||
|
onClick={this.stopTimer}
|
||||||
|
disabled={!this.state.started}
|
||||||
|
>
|
||||||
|
STOP
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
size="lg"
|
||||||
|
onClick={this.resetTimer}
|
||||||
|
disabled={this.state.started}
|
||||||
|
>
|
||||||
|
RESET
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Timer;
|
|
@ -1,6 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import * as serviceWorker from './serviceWorker';
|
import * as serviceWorker from './serviceWorker';
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue