My to-do list is simple and functional, but I'm encountering an unusual issue with the background. The background is supposed to be a random gradient set using JS upon loading the HTML, but sometimes it doesn't apply at all. If you refresh the Codepen page (linked below) multiple times, you'll notice that the background may not appear until after several attempts. Despite this, the code functions correctly for the most part, but I aim to resolve this inconsistency.
The code itself seems fine, but the background loading inconsistency persists.
// Get elements
const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");
// Function to add a task
function addTask() {
if (inputBox.value === '') {
alert("You need to write something you silly goose.");
} else {
const li = document.createElement("li");
li.innerHTML = inputBox.value;
const span = document.createElement("span");
span.innerHTML = "\u00d7";
li.appendChild(span);
listContainer.appendChild(li);
}
inputBox.value = "";
saveData();
}
// Event listener for listContainer
listContainer.addEventListener("click", function (e) {
if (e.target.tagName === "LI") {
e.target.classList.toggle("checked");
saveData();
} else if (e.target.tagName === "SPAN") {
e.target.parentElement.remove();
saveData();
}
});
// Event listener for Enter key in inputBox
inputBox.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
addTask();
}
});
// Function to save data to local storage
function saveData() {
localStorage.setItem("data", listContainer.innerHTML);
}
// Function to show tasks from local storage
function showTask() {
listContainer.innerHTML = localStorage.getItem("data");
}
document.addEventListener("DOMContentLoaded", function () {
requestAnimationFrame(function () {
backgroundColor();
});
});
const calculateContrast = (color1, color2) => {
const luminance1 = calculateLuminance(color1);
const luminance2 = calculateLuminance(color2);
const lighterLuminance = Math.max(luminance1, luminance2);
const darkerLuminance = Math.min(luminance1, luminance2);
return (lighterLuminance + 0.05) / (darkerLuminance + 0.05);
};
const calculateLuminance = (color) => {
const rgb = parseInt(color, 16);
const r = (rgb >> 16) / 255;
const g = ((rgb >> 8) & 0xff) / 255;
const b = (rgb & 0xff) / 255;
const gammaCorrect = (value) => value <= 0.03928 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
const sRGB = gammaCorrect(r) * 0.2126 + gammaCorrect(g) * 0.7152 + gammaCorrect(b) * 0.0722;
return sRGB;
};
function backgroundColor() {
const getRandomColor = () => Math.floor(Math.random() * 0xffffff).toString(16);
const calculateAndSetBackground = () => {
let color1, color2;
do {
color1 = getRandomColor();
color2 = getRandomColor();
} while (calculateContrast(color1, color2) < 4.5);
document.body.style.background = `linear-gradient(to left top, #${color1}, #${color2})`;
};
// Ensure that showTask function is complete before setting the background
showTask();
// Call calculateAndSetBackground after showTask is complete
calculateAndSetBackground();
}I have reviewed the syntax and tested various timing adjustments in the JS code to address the background loading issue, but to no avail.
I have tried the following timing fixes:
Combining 'window.onload' event and 'setTimeout' to allow extra time for complete page rendering before setting the background.
Using the defer attribute on the tag in conjunction with the DOMContentLoaded event and requestAnimationFrame to execute the script after HTML parsing.
document.addEventListener("DOMContentLoaded", function () {
requestAnimationFrame(function () {
backgroundColor();
});
});- Created a new function (calculateAndSetBackground) to separate background calculation and setting, ensuring showTask function is called first to resolve possible timing issues.
Despite these efforts, the issue remains unresolved. It seems to be more complex than just a timing problem, possibly related to caching.
Check out the Codepen link here