React pomodoro timer


did i miss something simple with the timer element?

Could you share your code in codepen?

i cant get react working in codepen at all

Once you start on a framework like react, I would really recommend moving away from codepen. I’m not a professional dev or anything, so take everything i say with a grain of salt, but if you do it through codepen, whenever you run into a problem, you aren’t sure if it’s because of the codepen environment, or if its something with your code. Also all your react code has to be in the tiny js window, all in one massive block. Check out glitch or a local environment, this way you can split up your code into small files and it makes things so much easier.

how about the timer?

What problems are you having with it ?

its not working at all

  StartTimer = (duration) => {
    this.setState({timerRunning:true})
    let time = duration *60
    let runningTimer = setInterval(()=>{
      this.countdownLogic.bind(time,runningTimer)
      //look up what bind does. bind is returning a function, but that function never gets called, you don't need bind here
    },1000)
  }

This isn’t the only problem, but it’s the biggest.

what else is a problem

What have you tried? I don’t wanna fix the entire thing for you, because it’s a learning exercise. Read through your code line by line, and make sure you understand what’s happening, if there is something specific you need help with, I’ll try, but telling you all the problems and how to fix them is a bit much. if you fix the line i pointed out, your timer function will actually be called and the rest of the problems become pretty apparent. You’re pretty close.

for example its going negative

To stop the timer going below zero, you will need to set up a clearInterval() to stop the timer once it reaches zero. You’ve already assigned the setInterval() to a variable, so it will look like this:

clearInterval(runningTimer);

Is countdownLogic your function? I think you should only bind it in the constructor like this:

this.countdownLogic = this.countdownLogic.bind(this);

Then when calling it elsewhere, it would just be

this.countdownLogic(time, runningTimer);

Hopefully this gives you a place to start

how do i fix so 1497:32
becames 24:95 or something i assume this is a overflow?
using this.state.time