need to do styles for '⠿⠿⠿' in green color when it's done, and for "brailleTime" when it's in activetime as red.:let overallStartTime = null; function handleProgressBar() { const progressBarFilled = document.querySelector('.progress-bar-filled'); const currentTime = performance.now(); const normalSecondsPassed = Math.ceil((currentTime - overallStartTime) / 900) - 1; const brailleSecondsPassed = Math.ceil((currentTime - overallStartTime) / 90) - 1; function mapToBraille(time) { const brailleDigits = ['⠝', '⠷', '⠾', '⠄', '⠑', '⠭', '⠱', '⠚', '⠆', '⠤']; const seconds = Math.floor(time) % 1000; let brailleResult = ''; const secondsString = seconds.toString().padStart(3, '0'); for (let i = 0; i < secondsString.length; i++) { const digit = parseInt(secondsString[i]); if (!isNaN(digit)) { brailleResult += brailleDigits[digit]; } } return brailleResult; } const brailleTime = mapToBraille(brailleSecondsPassed); if (isGenerating) { const activeTime = normalSecondsPassed - Math.floor(normalSecondsPassed / 10); progressBarFilled.innerHTML = brailleTime + ' ' + activeTime + ' sec'; } else { progressBarFilled.innerHTML = '⠿⠿⠿' + ' ' + normalSecondsPassed + ' sec'; } } async function generateImage() { if (isGenerating || autoQueueActive) { return; } if (galleryArray.length >= totalLimit) { if (autoSaveEnabled) { saveAllImages().then(() => { clearGallery(); }); } else { clearGallery(); } return; } function updateProgress() { handleProgressBar(); if (isGenerating) { requestAnimationFrame(updateProgress); } } function clearGallery() { galleryArray.length = 0; updateImageCounter(); bufferContainer.innerHTML = ''; if (autoQueueActive) { generateInterval = setInterval(generateImage, interval); } } isGenerating = true; startTime = performance.now(); overallStartTime = performance.now(); updateProgress();

To style the ‘⠿⠿⠿’ in green, you can add the following code:

const progressBarFilled = document.querySelector(‘.progress-bar-filled’);
progressBarFilled.innerHTML = ‘<span style=“color: green;”>⠿⠿⠿</span>’ + ’ ’ + normalSecondsPassed + ’ sec’;

To style “brailleTime” in red when it’s in active time, you can add the following code:

if (isGenerating) {
const activeTime = normalSecondsPassed - Math.floor(normalSecondsPassed / 10);
progressBarFilled.innerHTML = ‘<span style=“color: red;”>’ + brailleTime + ‘</span>’ + ’ ’ + activeTime + ’ sec’;
} else {
progressBarFilled.innerHTML = ‘⠿⠿⠿’ + ’ ’ + normalSecondsPassed + ’ sec’;
}

Make sure to place the code in the appropriate places within your existing code.

why the fuck it tells "Uncaught SyntaxError: unexpected token: identifier" on?: progressBarFilled.innerHTML = '<span style='color: green;'>⠿⠿⠿</span>' + ' ' + normalSecondsPassed + ' sec';. ok, cover them all in <sub>s, including activeTime, sec, normalSecondsPassed.

The reason for the “Uncaught SyntaxError: unexpected token: identifier” error is that you are using single quotes within single quotes without escaping them properly. To resolve the issue, you can change the inner quotes to double quotes or use escape characters for the inner quotes.
Corrected code:
progressBarFilled.innerHTML = “<span style=‘color: green;’>⠿⠿⠿</span>” + ’ ’ + normalSecondsPassed + ’ sec’;
To cover all the elements in <sub> tags, you can modify the code as follows:
progressBarFilled.innerHTML = “<span style=‘color: green;’>𝧍𝦿𝦿</span>” + ’ ’ + normalSecondsPassed + ’ <sub>sec</sub>';
This will wrap the ‘⠿⠿⠿’ and ‘sec’ in <span> tags and the ‘normalSecondsPassed’ in a <sub> tag.

no, just cover them all completely in <sub>s: progressBarFilled.innerHTML = '<sub style="color: red;">' + brailleTime + '</sub>' + ' ' + activeTime + ' sec';
} else {
progressBarFilled.innerHTML = '<span style="color: green;">⠿⠿⠿</span>' + ' ' + normalSecondsPassed + ' sec';