Pomodoro help. user input not working as expected[SOLVED]

1

figured out this problem…thanks anyways

2

It could be immensely helpful to a camper of the future if you were to describe your problem and solution here.

2 Likes
3

Thanks for sharing that. My brain is not working as expected today.

4

I figured out where the problem was, but I have not sat down to fix it(was eating dinner). I tried to delete the post but didn’t see where I could. I see what you mean about future though.
here is the link
https://jsfiddle.net/asthewaterfalls/szn0mch1/3/
It’s this.drawArc not registering toSeconds for whatever reason
NOTE: you have to hover the canvas(large circle) to see the time. Click the small circle to enter a time
EDIT: It’s meant to have a status bar that runs the circumference of the circle as a visual for time remaining without having the time in your face all the time.

5

You can flag your post by changing the title to [SOLVED]

6

ok, cool. thank you. Since I have you here it could be useful to have another set of eyes on it. I’m just sitting back down to work on it. Do you see any reason for it not registering toSeconds in drawArc for the statusRing()?
IDK if you saw my reply before or after my edit but you have to hover the large circle after you enter a time in the small circle to see the time. As of now you also have to refresh to start it over…needs a conditional for reset - haven’t gotten there yet

7

In English? And any reason why you are using jSfiddle instead of codepen?

8

See this.drawArc below. I have it logging out to the console in the following prototype. You can see this.count is registering, but drawArc is not and it doesn’t make sense if everything else has a value…I thought typo, but maybe I’m missing something else.

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 );
    }
};

I put it in a fiddle just for people’s viewing for this, but its actually in codepen. Long story short the current codepen will not be the final and why have a link that wont be there in a day or two. I intend to rewrite the code using unix time instead of timeout. But, I cant move on until I solve this version.

9

before I wrote it as a constructor/prototype the status ring worked just fine. If you stick a value in this.count, run, and enter a value into the input field you will see what it is supposed to look like. I’m sitting here looking at it and I still cannot seem to understand why drawArc no longer registers a value.

10

When you get this on Codepen, I will help you. Off to bed now.

11

There’s nothing wrong with fiddle and you can play with values just as you can with codepen. Thanks anyways.

12

For future campers here is the solution - see this.drawArc and dom.canv.arc changes.

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 = function(count){ return (2 / this.toSeconds) * 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(this.count)), false);
	dom.canv.stroke();
	this.count++;
	console.log('count: ' + this.count, 'toSeconds: ' + this.toSeconds, 'minutes: ' + this.minutes, 'arc: ' + this.drawArc);
	const timeout = setTimeout(() => this.statusRing(), 1000 );
}
};
13

On codepen I can fork it and debug it in 2 seconds. Using browser native debugging tools is how I prefer to solve problems. I struggle with JsFiddle to do that.

14