Hey everyone, good evening. I've been struggling with a particular section of code for quite some time now and could really use some help. When you check out the constructor at this.drawArc and then look into the prototype, I've printed a couple of things to the console. It's clear that this.count has a value logged, but strangely, this.drawArc does not seem to be registering any values. While this.minutes and this.toSeconds are functioning properly as the timer starts, why is drawArc failing to capture the values? Interestingly enough, the status ring was working perfectly fine before being placed in the constructor, but now it refuses to acknowledge any values. I have included a link to a JSFiddle below.
Some points to note: please bear in mind that this is an incomplete version - currently, you need to refresh the page if you wish to enter a new value in the input field. Once an input is given (the small circle above the button), hovering over the canvas (larger circle) will display the countdown. The hover functionality is added for those users who prefer just the visual representation of the status ring without the ticking clock. Any suggestions or ideas would be greatly appreciated. Thank you for your assistance in advance.
https://jsfiddle.net/asthewaterfalls/szn0mch1/9/
function Pomodoro(userInput) {
this.minutes = userInput;
this.toSeconds = 60 * this.minutes;//seconds - actual
this.cout = this.toSeconds; //for timer
this.seconds = 0; //display
this.count = 0; //for status ring
this.circleStart = Math.PI * 1.5;
this.drawArc = (2 / this.toSeconds) * this.count;
}
Pomodoro.prototype.statusRing = function () {
if(this.count <= this.toSeconds) {
dom.canv.beginPath();
dom.canv.arc(125, 125, 121, this.circleStart, Math.PI * (1.5 + this.drawArc), false);
dom.canv.stroke();
this.count++;
console.log(this.count, this.drawArc);
const timeout = setTimeout(() => this.statusRing(), 1000 );
}
};