Skip to content

Instantly share code, notes, and snippets.

@benjaminadk
Created June 27, 2018 19:41
Show Gist options
  • Save benjaminadk/cd3c2d1721a9c39f53afd4264bcf6a68 to your computer and use it in GitHub Desktop.
Save benjaminadk/cd3c2d1721a9c39f53afd4264bcf6a68 to your computer and use it in GitHub Desktop.
Pomodoro Clock
<div id="root"></div>
const Header = () => <h1>Pomodoro Clock</h1>
const SetTimer = ({ type, label, value, handleClick }) => (
<div className='SetTimer'>
<div id={`${type}-label`}>{label}</div>
<div className='SetTimer-controls'>
<button id={`${type}-decrement`} onClick={() => handleClick(false, `${type}Value`)}>&darr;</button>
<h1 id={`${type}-length`}>{value}</h1>
<button id={`${type}-increment`} onClick={() => handleClick(true, `${type}Value`)}>&uarr;</button>
</div>
</div>
)
const Timer = ({ mode, time }) => (
<div className='Timer'>
<h1 id='timer-label'>{mode === 'session' ? 'Session ' : 'Break '}</h1>
<h1 id='time-left'>{time}</h1>
</div>
)
const Controls = ({ active, handleReset, handlePlayPause }) => (
<div className='Controls'>
<button id='start_stop' onClick={handlePlayPause}>{ active ? <span>&#10074;&#10074;</span> : <span>&#9658;</span> }</button>
<button id='reset' onClick={handleReset}>&#8635;</button>
</div>
)
class App extends React.Component {
constructor(props){
super(props)
this.state = {
breakValue: 5,
sessionValue: 25,
time: 25 * 60 * 1000,
active: false,
mode: 'session'
}
}
componentDidUpdate(prevProps) {
if(this.state.time === 0 && this.state.mode === 'session') {
this.setState({ time: this.state.breakValue * 60 * 1000, mode: 'break' })
this.audio.play()
}
if(this.state.time === 0 && this.state.mode === 'break') {
this.setState({ time: this.state.sessionValue * 60 * 1000, mode: 'session' })
this.audio.play()
}
}
handleSetTimers = (inc, type) => {
if (inc && this.state[type] === 60) return
if (!inc && this.state[type] === 1) return
this.setState({ [type]: this.state[type] + (inc ? 1 : -1) })
}
handlePlayPause = () => {
if (this.state.active) {
this.setState({ active: false }, () => clearInterval(this.pomodoro))
}
else {
if (!this.state.touched) {
this.setState({
time: this.state.sessionValue * 60 * 1000,
active: true,
touched: true }, () => this.pomodoro = setInterval(() => this.setState({ time: this.state.time - 1000 }) ,1000)
)} else {
this.setState({
active: true,
touched: true
}, () => this.pomodoro = setInterval(() => this.setState({ time: this.state.time - 1000 }) ,1000))
}
}
}
handleReset = () => {
this.setState({
breakValue: 5,
sessionValue: 25,
time: 25 * 60 * 1000,
active: false,
mode: 'session',
touched: false
})
this.audio.pause()
this.audio.currentTime = 0
clearInterval(this.pomodoro)
}
render(){
return(
<div>
<Header/>
<div className='settings'>
<SetTimer
type='break'
label='Break Length'
value={this.state.breakValue}
handleClick={this.handleSetTimers}
/>
<SetTimer
type='session'
label='Session Length'
value={this.state.sessionValue}
handleClick={this.handleSetTimers}
/>
</div>
<Timer mode={this.state.mode} time={moment(this.state.time).format('mm:ss')}/>
<Controls active={this.state.active} handleReset={this.handleReset} handlePlayPause={this.handlePlayPause}/>
<audio
id='beep'
src='https://s3-us-west-1.amazonaws.com/benjaminadk/Data+synth+beep+high+and+sweet.mp3'
ref={ref => this.audio = ref}>
</audio>
</div>
);
}
}
ReactDOM.render(<App/>,document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
.settings {
display: flex;
justify-content: space-around;
}
.SetTimer {
display: flex;
flex-direction: column;
align-items: center;
}
.SetTimer-controls {
display: flex;
justify-content: center;
align-items: center;
}
.Timer {
display: flex;
flex-direction: column;
align-items: center;
}
.Controls {
display: flex;
justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment