This is my latest code:
"use strict";
const breakDecrementButton = $("#break-decrement");
breakDecrementButton.on("click", () => {
const breakLength = $("#break-length");
let lengthValue = Number(breakLength.text());
if (lengthValue > 1) {
lengthValue--;
}
breakLength.text(lengthValue);
});
const breakIncrementButton = $("#break-increment");
breakIncrementButton.on("click", () => {
const breakLength = $("#break-length");
let lengthValue = Number(breakLength.text());
if (lengthValue < 60) {
lengthValue++;
}
breakLength.text(lengthValue);
});
const sessionDecrementButton = $("#session-decrement");
sessionDecrementButton.on("click", () => {
const sessionLength = $("#session-length");
let lengthValue = Number(sessionLength.text());
if (lengthValue > 1) {
lengthValue--;
}
sessionLength.text(lengthValue);
});
const sessionIncrementButton = $("#session-increment");
sessionIncrementButton.on("click", () => {
const sessionLength = $("#session-length");
let lengthValue = Number(sessionLength.text());
if (lengthValue < 60) {
lengthValue++;
}
sessionLength.text(lengthValue);
});
const defaultSessionLength = 25;
const defaultBreakLength = 5;
let isSessionRunning = true;
const timerElem = $("#time-left");
let timerTextContent = timerElem.text();
const getTimeRemaining = (deadline, today) => {
const total = Date.parse(deadline.toString()) - Date.parse(today);
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
return {
total,
minutes,
seconds
};
};
let timerId;
const timerCallback = () => {
timerId = setInterval(() => {
const today = new Date();
const deadline = new Date();
const actualSessionLength = Number($("#session-length").text());
const actualBreakLength = Number($("#break-length").text());
const deadlineMins = ((isSessionRunning) ? actualSessionLength : actualBreakLength);
deadline.setMinutes(today.getMinutes() + deadlineMins);
const timeRemaining = getTimeRemaining(deadline, today);
if (timeRemaining.total <= 0) {
clearInterval(timerId);
const audioElem = $("#beep");
audioElem.play();
if ($("#timer-label").text() === "Session") {
isSessionRunning = false;
$("#timer-label").text("Break");
} else if ($("#timer-label").text() === "Break") {
isSessionRunning = true;
$("#timer-label").text("Session");
}
}
if ($("#timer-label").text() === "Session") {
isSessionRunning = true;
} else if ($("#timer-label").text === "Break") {
isSessionRunning = false;
}
timerTextContent = `${timeRemaining.minutes}:${timeRemaining.seconds}`;
const stopButton = $("#stop");
stopButton.on("click", clearInterval(timerId));
}, 1000);
};
const startButton = $("#start");
startButton.on("click", timerCallback);
const resetButton = $("#reset");
resetButton.on("click", () => {
// reset app state to default
clearInterval(timerId);
const sessionLength = $("#session-length");
sessionLength.text(defaultSessionLength);
const breakLength = $("#break-length");
breakLength.text(defaultBreakLength);
$("#timer-label").text("Session");
timerTextContent = `${sessionLength}:00`;
timerElem.text(timerTextContent);
});
The timer still doesn’t run. I’d really like some help on that: why doesn’t it run? What am I missing?
Also, test 8 for the Content part fails with:
8. I can see an element with corresponding id="time-left". NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).
Cannot read property '1' of null
TypeError: Cannot read property '1' of null
What does this mean and how do I solve it?
Edit: I changed the code again:
"use strict";
const breakDecrementButton = $("#break-decrement");
breakDecrementButton.on("click", () => {
const breakLength = $("#break-length");
let lengthValue = Number(breakLength.text());
if (lengthValue > 1) {
lengthValue--;
}
breakLength.text(lengthValue);
});
const breakIncrementButton = $("#break-increment");
breakIncrementButton.on("click", () => {
const breakLength = $("#break-length");
let lengthValue = Number(breakLength.text());
if (lengthValue < 60) {
lengthValue++;
}
breakLength.text(lengthValue);
});
const sessionDecrementButton = $("#session-decrement");
sessionDecrementButton.on("click", () => {
const sessionLength = $("#session-length");
let lengthValue = Number(sessionLength.text());
if (lengthValue > 1) {
lengthValue--;
}
sessionLength.text(lengthValue);
});
const sessionIncrementButton = $("#session-increment");
sessionIncrementButton.on("click", () => {
const sessionLength = $("#session-length");
let lengthValue = Number(sessionLength.text());
if (lengthValue < 60) {
lengthValue++;
}
sessionLength.text(lengthValue);
});
const defaultSessionLength = 25;
const defaultBreakLength = 5;
let isSessionRunning = true;
const timerElem = $("#time-left");
let timerTextContent = timerElem.text();
console.log(timerTextContent);
const getTimeRemaining = (deadline, today) => {
const total = Date.parse(deadline.toString()) - Date.parse(today.toString());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
return {
total,
minutes,
seconds
};
};
const initializeClock = () => {
const timerId = setInterval(() => {
const today = new Date();
const deadline = new Date();
const actualSessionLength = Number($("#session-length").text());
const actualBreakLength = Number($("#break-length").text());
const deadlineMins = ((isSessionRunning) ? actualSessionLength : actualBreakLength);
deadline.setMinutes(today.getMinutes() + deadlineMins);
const timeRemaining = getTimeRemaining(deadline, today);
if (timeRemaining.total <= 0) {
clearInterval(timerId);
const audioElem = $("#beep");
audioElem.play();
if ($("#timer-label").text() === "Session") {
isSessionRunning = false;
$("#timer-label").text("Break");
} else if ($("#timer-label").text() === "Break") {
isSessionRunning = true;
$("#timer-label").text("Session");
}
}
if ($("#timer-label").text() === "Session") {
isSessionRunning = true;
} else if ($("#timer-label").text === "Break") {
isSessionRunning = false;
}
timerTextContent = `${timeRemaining.minutes}:${timeRemaining.seconds}`;
const stopButton = $("#stop");
stopButton.on("click", clearInterval(timerId));
const resetButton = $("#reset");
resetButton.on("click", () => {
// reset app state to default
clearInterval(timerId);
const sessionLength = $("#session-length");
sessionLength.text(defaultSessionLength);
const breakLength = $("#break-length");
breakLength.text(defaultBreakLength);
$("#timer-label").text("Session");
timerTextContent = `${sessionLength}:00`;
timerElem.text(timerTextContent);
});
}, 1000);
};
const startButton = $("#start");
startButton.on("click", initializeClock);
I made this before:
"use strict";
function getInput() {
const input = document.getElementById("input").value;
const deadline = new Date(input);
return deadline;
}
function leapYear(year) {
if (year % 4 !== 0) {
if (year % 400 !== 0 && year % 100 !== 4) {
return false;
}
return false;
}
return true;
}
function initializeClock() {
const deadline = getInput();
const currentDate = new Date();
if (deadline < currentDate) {
const errorPara = document.createElement("p");
errorPara.textContent = "Sorry; we don't count up from a past event";
document.querySelector("form").prepend(errorPara);
errorPara.insertAdjacentHTML("afterend", "<br />");
} else {
const timerId = setInterval(() => {
const now = new Date().getTime();
const timeDiff = deadline - now;
let february = 0;
if (leapYear(deadline.getFullYear())) {
february = 29;
} else {
february = 28;
}
const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
let months = Math.floor(days / daysInMonth[deadline.getMonth()]);
days %= daysInMonth[deadline.getMonth()];
if (currentDate.getMonth() < deadline.getMonth() && currentDate.getDate() === deadline.getDate()) {
days = 0;
const monthDiff = deadline.getMonth() - currentDate.getMonth();
months = monthDiff;
} else if (currentDate.getDate() < deadline.getDate() && currentDate.getMonth() === deadline.getMonth()) {
const daysDiff = deadline.getDate() - currentDate.getDate();
days = daysDiff;
months = 0;
} else if (currentDate.getMonth() < deadline.getMonth() && currentDate.getDate() < deadline.getDate()) {
const daysDiff = deadline.getDate() - currentDate.getDate();
const monthsDiff = deadline.getMonth() - currentDate.getMonth();
days = daysDiff;
months = monthsDiff;
}
const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
document.getElementById("day").textContent = days;
document.getElementById("month").textContent = months;
document.getElementById("hour").textContent = hours;
document.getElementById("minute").textContent = minutes;
document.getElementById("second").textContent = seconds;
if (timeDiff < 0) {
clearInterval(timerId);
const event = document.getElementById("event");
document.getElementById("is-it-time").textContent = `${event} is here!`;
document.getElementById("month").textContent = "0";
document.getElementById("day").textContent = "0";
document.getElementById("hour").textContent = "0";
document.getElementById("minute").textContent = "0";
document.getElementById("second").textContent = "0";
}
const stopBtn = document.getElementById("stop-btn");
stopBtn.addEventListener("click", function() {
clearInterval(timerId)
});
}, 1000);
}
}
const startBtn = document.getElementById("start-btn");
startBtn.addEventListener("click", initializeClock);
In that one I kept the code for the button to stop the clock inside same function that I used as the click event handler for the start button. And it worked. So I thought I’d try the same here. But still nothing happens on the 25 + 5 Clock when I click the start button. Why?