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