within the handlecountdown
myCoundown() not working
import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
sessionTime: 25,
breakTime: 5,
timer: 25+":00",
pause: true,
play: false
}
this.handleBinc=this.handleBinc.bind(this)
this.handleBdec=this.handleBdec.bind(this)
this.handleSinc=this.handleSinc.bind(this)
this.handleSdec = this.handleSdec.bind(this)
this.handleCountDown = this.handleCountDown.bind(this)
}
componentDidMount() {
document.addEventListener('keydown', this.handleKeyPress);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeyPress);
}
handleBinc = () => {
if(this.state.play === true) {
return;
}
this.setState({
breakTime: this.state.breakTime + 1,
})
}
handleBdec = () => {
if(this.state.breakTime < 1 || this.state.play === true) {
return;
}
this.setState({
breakTime: this.state.breakTime - 1,
})
}
handleSinc = () => {
if(this.state.play === true) {
return;
}
this.setState({
sessionTime: this.state.sessionTime + 1,
timer: this.state.timer + 1,
})
}
handleSdec = () => {
if(this.state.sessionTime < 1 || this.state.play === true) {
return;
}
this.setState({
sessionTime: this.state.sessionTime - 1,
timer: this.state.timer - 1,
})
}
handleBreakTime = () => {
var myDate = new Date();
var timing = this.state.breakTime * 60000;
}
handleCountDown = () => {
if (this.state.play === false){
this.setState({
play: true
})
} else {
this.setState({
play: false
})
return
};
console.log(this.state.sessionTime)
var myDate = new Date();
// console.log(myDate)
var timing = this.state.sessionTime * 60000;
// console.log(timing)
myCountDown(function(){
console.log('got into the function')
timing = timing - 1000;
var minutes = Math.floor((timing % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor ((timing % (1000 * 60)) / 1000);
HTML.getElementsByID('time-left').innerHTML = minutes + ":" + seconds
this.setState ({
timer: minutes + ":" + seconds
})
if (timing < 0 ) {
handleBreakTime();
}
}, 1000)
}
render() {
return (
<body>
<div id='timer'>
<div id='length-label'>
<div id='left-container'>
<p>Break Length</p>
<div id='left-buttons'>
<div type='button' id='break-increment' onClick={() => this.handleBinc()}></div>
<div id='break-time'>{this.state.breakTime}</div>
<div type='button' id='break-decrement' onClick={() => this.handleBdec()}></div>
</div>
</div>
<div id='session-label'>
<div id='right-container'>
<p>Session Length</p>
<div id='right-buttons'>
<div type='button' id='session-increment' onClick={() => this.handleSinc()}></div>
<div id='session-time'>{this.state.sessionTime}</div>
<div type='button' id='session-decrement' onClick={() => this.handleSdec()}>
</div>
</div>
</div>
</div>
</div>
<div id='timer-label'>
<p>Session</p>
<div id='time-left' >{this.state.timer}</div>
<button class='controls' id='start' label="start" onClick={() => this.handleCountDown()}>start/stop</button>
<button class='controls' id='reset' label="start" onClick={() => this.handleCountDown()}>reset</button>
</div>
</div>
</body>
);
}
};
ReactDOM.render(<App />, document.getElementById("root"))