I am having trouble creating a JavaScript timer using. I have tried to implement things from other stack overflow questions and haven’t had any success.
When I click the play button, “0-8:0-46” is displayed instead of the actual timer. And it does not count down.
Link to codepen: https://codepen.io/Jamece/pen/jOazYvQ
My Code thus far is below. I am trying to troubleshoot the sessionTimer function right now.
const minTime = 1;
const maxTime = 60;
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
breakLength: 5,
sessionLength: 25,
started: false,
mode: "Session"
};
this.breakIncrement = this.breakIncrement.bind(this);
this.breakDecrement = this.breakDecrement.bind(this);
this.sessionIncrement = this.sessionIncrement.bind(this);
this.sessionDecrement = this.sessionDecrement.bind(this);
this.beginTimer = this.beginTimer.bind(this);
this.sessionTimer = this.sessionTimer.bind(this);
this.breakTimer = this.breakTimer.bind(this);
this.pauseTimer = this.pauseTimer.bind(this);
}
breakIncrement() {
if (!this.state.started) {
if (this.state.breakLength !== maxTime) {
this.setState((state) => ({
breakLength: state.breakLength + 1
}));
}
}
}
breakDecrement() {
if (!this.state.started) {
if (this.state.breakLength !== minTime) {
this.setState((state) => ({
breakLength: state.breakLength - 1
}));
}
}
}
sessionIncrement() {
if (!this.state.started) {
if (this.state.sessionLength !== maxTime) {
this.setState((state) => ({
sessionLength: state.sessionLength + 1
}));
}
}
}
sessionDecrement() {
if (!this.state.started) {
if (this.state.sessionLength !== minTime) {
this.setState((state) => ({
sessionLength: state.sessionLength - 1
}));
}
}
}
beginTimer() {
this.setState({ started: !this.state.started });
if (this.state.started) {
if (this.state.mode == "Session") {
this.sessionTimer();
} else {
this.breakTimer();
}
} else {
this.pauseTimer();
}
}
sessionTimer() {
var start = new Date().getTime();
const sessionTime = setTimeout(() => {
const distance = this.state.sessionLength - start;
var minutes = Math.floor(distance / (1000 * 60) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60 * 60)) / 1000);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
const sessionClock = (document.getElementById("time-left").innerHTML =
minutes + ":" + seconds);
if (distance <= 0) {
clearTimeout(sessionTime);
}
}, 1000);
}
breakTimer() {}
pauseTimer() {}
render() {
let pausePlayStyle = this.state.started
? "fa-solid fa-pause"
: "fa-solid fa-play";
return (
<div className="container-fluid px-0">
<div className="main d-flex justify-content-center align-items-center">
<div className="d-flex flex-column align-items-center">
<div className="heading">25 + 5 Clock</div>
<div className="d-flex">
<div className="d-flex flex-column break align-items-center">
<div id="break-label" className="mb-3 h3">
Break Length
</div>
<div className="d-flex flex-row">
<button
className="btn btn-top"
id="break-increment"
onClick={this.breakIncrement}
>
<i class="fa-solid fa-arrow-up"></i>
</button>
<div className="mx-3 h3" id="break-length">
{this.state.breakLength}
</div>
<button
className="btn btn-top"
id="break-decrement"
onClick={this.breakDecrement}
>
<i class="fa-solid fa-arrow-down"></i>
</button>
</div>
</div>
<div className="d-flex flex-column align-items-center session">
<div id="session-label" className="mb-3 h3">
Session Length
</div>
<div className="d-flex flex-row">
<button
className="btn btn-top"
id="session-increment"
onClick={this.sessionIncrement}
>
<i class="fa-solid fa-arrow-up"></i>
</button>
<div className="h3 mx-3" id="session-length">
{this.state.sessionLength}
</div>
<button
className="btn btn-top"
id="session-decrement"
onClick={this.sessionDecrement}
>
<i class="fa-solid fa-arrow-down"></i>
</button>
</div>
</div>
</div>
<div className="d-flex flex-column align-items-center timer-border">
<div className="h2 mb-3 session" id="timer-label">
{this.state.mode}
</div>
<div className="display-1 timer mb-4" id="time-left"></div>
<div className="d-flex flex-row">
<button
className="btn btn-bottom"
id="start_stop"
onClick={this.sessionTimer}
>
<i className={pausePlayStyle}></i>
</button>
<button className="btn btn-bottom" id="reset">
<i className="fa-solid fa-rotate"></i>
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById("root"));