jQuery addClass example

Change class name on click in jQuery

HTML

<button id="new_color">Try Random Color</button>
<p id="preview">Click the button!</p>

CSS

#preview {
  display: block; 
  height: 40px; 
  line-height: 40px; 
  font-size: 20px; 
  vertical-align: middle;
  width: 150px; 
  text-align: center; 
}

JavaScript

const getRandNum = () => Math.floor(Math.random() * 256);

const get_random_color = () => (`rgb(${getRandNum()}, ${getRandNum()}, ${getRandNum()})`);

const checkColor = (color) => {
	// color = 'rgb(x, y, z)'; 
	// check color is light
  // or color is dark
  return true; 
}

$('#new_color').click(function(){
		const p = $('#preview');
    const bg_color = get_random_color(); 
		const color_is_light = checkColor( bg_color ); 
	
    const text_color = color_is_light ? 'black' : 'white';

		p.css({
        color: text_color,
        backgroundColor: bg_color
    })
});