Build a Pomodoro Clock: How to Start Clock?

JavaScript
1

I’m having trouble figuring out how to actually get my timer to start. I’ve created the elements and put them into a grid using Bootstrap, but I haven’t done any other styling. Currently, I can increment and decrement the session and break times, and the session time displays on the main clock in the center (though I only have one “0” at the moment).

The main issue I’m having is with actually getting the timer to start (kinda important, huh?). When I click “START”, nothing happens. I thought that by activating the runTimer() function, I was setting an interval that would activate decrementTimer(), which would then change the value on displayTimer() every 1000 milliseconds. But somewhere in this nest of functions, I’ve messed something up.

Any thoughts?

Thanks!!!

Here is a CodePen to see what I’ve done (though I’m working on my own CodeEditor with create-react-app): https://codepen.io/stefanhk31/pen/gBNBJL?editors=0010

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock

2

After a quick look I can see that you have no onClick event associated with starting or stopping the timer. Also, especially since you are using Bootstrap, you should consider using buttons instead of simple divs with text. :wink:

3

Thanks, but I thought I did get that on line 162:

<div id="start" className="btn" onClick={this.runTimer}>START</div>

Am I missing something with how it connects? runTimer() should set this.state.running to true, and activate decrementTimer() once every 1000 milliseconds. How do I get that changing value to display correctly in displayTimer()?

Also, I do plan on putting in buttons using btn once I get the darn thing to work. :wink: