jQuery addClass example

Change class name on click in jQuery

by Konstantin Cryman

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})


const vertices = [
	[ -123, 12 ],
	[ 23, 312 ],
	[ 63, 3 ],
	[ 555, -41 ],
	[ -23, -312 ],
	[ -423, 12 ],
	[ -123, 312 ],
	[ 43, 151 ],
	[ -723, 212 ],
	[ -321, 122 ],
];


const minmax = [ 
	Infinity,
  Infinity,
  -Infinity,
  -Infinity
];


for( const nextV of vertices ){

	if( nextV[ 0 ] < minmax[ 0 ] ){
  	minmax[ 0 ] = nextV[ 0 ];
  }
	if( nextV[ 1 ] < minmax[ 1 ] ){
  	minmax[ 1 ] = nextV[ 1 ];
  }
  

	if( nextV[ 0 ] > minmax[ 2 ] ){
  	minmax[ 2 ] = nextV[ 0 ];
  }
	if( nextV[ 1 ] > minmax[ 3 ] ){
  	minmax[ 3 ] = nextV[ 1 ];
  }
}


console.log( { minmax } );

const getUVforPosition = ( x, y, _minmax ) => {
  return [
  	( x - _minmax[ 0 ] ) / ( _minmax[ 2 ] - _minmax[ 0 ]  ),
  	( y - _minmax[ 1 ] ) / ( _minmax[ 3 ] - _minmax[ 1 ]  ),
  ];
}

for( const nextV of vertices ){
	console.log( getUVforPosition( nextV[ 0 ], nextV[ 1 ], minmax ) );
}