I need someone to guide me with the 25 + 5 clock please

Im having the worst time trying to figure this out, I’m making this pomodoro clock using basic javascript, i already made the session and break lengths work but i don’t get how to make the clock work with them. if you be so kind to explain it to me please, like what to use and why so i can understad it.
here is my entire js code.


function incrementBreak() {
    let breakLength = document.getElementById("break-length");
    if (parseFloat(breakLength.innerText) < 60) {
        breakLength.innerText = parseFloat(breakLength.innerText) + 1;

    }
    
}
function decrementBreak() {
    let breakLength = document.getElementById("break-length");
    if (parseFloat(breakLength.innerText) > 0) {
        breakLength.innerText = parseFloat(breakLength.innerText) - 1;

    }

}
function incrementSession(){
    let sessionLength = document.getElementById("session-length");
    if (parseFloat(sessionLength.innerText) < 60) {
        let incrementedSessionValue = parseFloat(sessionLength.innerText) + 1;
        sessionLength.innerText = incrementedSessionValue;
        document.getElementById("minutes").innerText = incrementedSessionValue;
    }
}
function decrementSession() {
    let sessionLength = document.getElementById("session-length");
    if (parseFloat(sessionLength.innerText) > 0) {
        let decrementedSessionValue = parseFloat(sessionLength.innerText) - 1;
        sessionLength.innerText = decrementedSessionValue;
        document.getElementById("minutes").innerText = decrementedSessionValue;
    }
    
}

function toggleOnOff() {
    let countdownClock = new Date()
    var secondsLeft = 60;
    var Timer = setInterval(function 
        function1(){ 
    document.getElementById("seconds").innerHTML = secondsLeft;
    
    secondsLeft -= 1;
    if(secondsLeft <= 0){
        clearInterval(Timer);
        if (resetBtn() >= 1){
            console.log("reset")
            clearInterval(Timer)
        
        }
        
    }
    }, 1000);
    
        console.log(countdown);
    

    } 
    
function resetBtn() {

        // reset app state to default
} 

Hello there,

This is why, typically, Campers use React, as it has this kind of functionality built in - you need to now attach event listeners to the buttons:

Specifically, you need to use the click event to tell your button elements to fire, when they are clicked.

Hope this helps

but using onclick btns isn’t the same ? , i tried using React tho but nothing worked for using it.

Is not the same as what?

  • You have HTML buttons
    • One increments
    • One decrements
  • You have two functions
    • One increments
    • One decrements
  • You need to tell the client when to use the functions. To do this, you need to attach an event handler to the HTML buttons saying: Hey, when you are clicked, run this function

If you are working on CodePen, it would be helpful to be able to see all of your code. Otherwise, we might be talking about different things.

Hope this clarifies

i do, but the thing is how to make the clock countdown in minutes and seconds i’ll make it work with the eventListener that’s not problem, this thing is counting in seconds instead of minutes and seconds .

this is the issue i have

let yesSeconds = 0;
    var audioElement = document.getElementById('beep')
    let timer = Math.floor(parseFloat(document.getElementById("time-left").innerHTML) / 60);
    function convertToSeconds() {
        let min = Math.floor(parseFloat(document.getElementById("time-left").innerHTML) / 60)
        let sec = Math.function(parseFloat(document.getElementById("time-left").innerHTML) % 60);
        return min + ":" + sec
    }

    function yesTime() {
        timer--;
        
        document.getElementById("time-left").innerHTML = timer;
    }
    let clockTimer = setInterval(yesTime,1000);
    console.log(timer)

What are you specifically not understanding? You have many of the basics already there.

Some things I can mention about the code:

  • You are not using convertToSeconds, but it is not returning anything to seconds. So, I would rename that.
  • Ideally, you should not be constantly document.getElementById-ing. Outwith the setInterval callback, get the element. Then, update the same element handle.
  • Currently the code used is:
let timer = Math.floor(parseFloat(document.getElementById("time-left").innerHTML) / 60);
 function yesTime() {
  timer--;   
     document.getElementById("time-left").innerHTML = timer;
 }
 let clockTimer = setInterval(yesTime,1000);

So, let us walk through what is happening:

  • Assume document.getElementById("time-left") is 50
  • Divide by 60
    • timer === 0
  • Start the interval
    • timer--;
    • timer === -1
    • Set timer element innerHTML to be -1

Now, do can you see where this is going?

i think i get now , i have’t seen convertToSeconds before, thats what i want to make the session run in minutes not seconds, and i dont get what you mean with Outwith the setInterval callback, get the element. Then, update the same element handle.

I’m sorry to be such a drag.

Where are you getting this code from?

Here is a bad example:

let count = 0;
function intervalCallback() {
  const myElement = document.getElementById("some-id");
  myElement.innerText = count;
  count++;
}
setInterval(intervalCallback, 100);

Here is the better version of the above:

let count = 0;
const myElement = document.getElementById("some-id");
function intervalCallback() {
  myElement.innerText = count;
  count++;
}
setInterval(intervalCallback, 100);

It is a trivial example, but very similar to your case. The difference is instead of constantly fetching the same element every 100ms, I only get it once, and update the same variable’s innerText. It is a question of performance, and reliability.

Do not worry about it. This forum is here for Campers to get help.

I encourage you to do some more research into things like using setInterval and how to work with the DOM. This way, if you get confused by anything, you can come back to the forum with a clear question, and maybe more code.

lol , i love you man, thanks for been so understanding and yes i researching everything.

Hi @Pechavarria62 !

I am also working on this project so I understand the feeling of being stuck :grin:

But just try to tackle each functionality at a time.

Good luck!

1 Like

thank you!! @jwilkins.oboe

1 Like

hello my cool people, finally made the clock count down but now it wont pause, i don’t know how to make it pause when i click the pause btn and then if i click it again to run , also can anyone help with react, it won’t work on my editor, Im using vscode. Here is the code.

var minutes_intervals;
var seconds_intervals;
var rContext = "start";


function toggleOnOff() {
    
    // var audio = new Audio('audio_file.mp3');
        
    var min = document.getElementById('minutes');
    var sec = document.getElementById('seconds');

        
        
    sec.innerHTML = "59";
    
    

    var bMin = document.getElementById("break-length");
    var session = document.getElementById("timer-label"); 
    minutes = parseFloat(min.innerHTML);
    bMinutes = parseFloat(bMin.innerHTML);
    seconds = parseFloat(sec.innerHTML);
    
    minutes_intervals = setInterval(minutesTimer, 60000);
    seconds_intervals = setInterval(secondsTimer, 1000);
    
    
    function minutesTimer() {
        minutes--;
        
        min.innerHTML = minutes;
        
    }
    
    function secondsTimer() {
        seconds--;
        
        sec.innerHTML = seconds;
        if(seconds == "0" ){
            if(min.innerHTML === "0"){
                session.innerHTML = "Break";
                document.getElementById('beep').play();
                minutes = bMinutes;
                
            }
            
            seconds = "60"
        }
        
    }
    
    

}

I am building my project with react instead of vanilla but I am using setInterval to start the timer and clearInterval to stop the timer.

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

1 Like