Latest Update
An additional demonstration has been included. I developed a small plugin that adds animation to elements with classes .dot and .cancel. Check out Demo 2 for more details
"However, the third checkbox is intended to have dark text color which should change to white, but this feature is not working as expected."
The issue lies in the fact that isDark() function was malfunctioning due to incorrect implementation. The data attribute data-color of the third button had a value of "blue" instead of rgb(0,0,255), causing the function to return false. In addition, there were multiple syntax errors in the code snippet, including:
function isDark(color) {
var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
return (match[1] & 255) + (match[2] & 255) + (match[3] & 255) < 3 * 256 / 2;
}
Extracting numbers using regex from an arbitrary source like data-color is unreliable. Instead, keep the numbers directly such as data-rgb="0,0,255".
The usage of .exec() method will only return one string array instead of individual matches due to the nature of the regex used. Therefore, variables like match[1], match[2], etc., do not exist.
The portion ... & 255) and the calculation 3 * 256 / 2 are flawed concepts. Moreover, 385 (sum of rgb(128,128,128)) does not represent a valid argument for color darkness.
Therefore, the original code underwent significant changes especially with the isDark() function being reduced to just two lines while addressing various discrepancies. Other parts of the HTML, CSS, and JavaScript were also optimized for better efficiency.
New Features Demo
Additional Functionalities Showcase
(preview omitted)