jQuery toggleClass example

Toggle class name on click in jQuery

by SHELDON PASCIAK

HTML

<div id="banner-message">


  <button>GO</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")

function checkem(string1,string2) {
	var result = false;
  
   // pseudo
   
   // walk throug each letter of first string
   
   // if found anywhere in second string remove it from both
   
   // at end if 1st and 2nd string are empty, they are anagrams
   
   // ignore spaces and special characters
   
   // convert to lower
   
   // get rid of bad characters
   
   // if lengths at start aren't same it fails
   
   // 
   
	for (var i=0;i<string1.length;i++){
  string2=string2.replace(string1[i],"");
  }
   
   console.log(string1,string2);
  
  return string2 == "";
}

// handle click and add class
button.on("click", () => {

console.log(checkem("get","etg")); // sould be true

console.log(checkem("aget","atgo")); // sould be false


/* Check to see if the two provided strings are anagrams of each other.
One string is an anagram of another if it uses the same characters
in the same quantity. Only consider characters, not spaces
or punctuation. Consider capital letters to be the same as lower case
--- Examples
anagrams('rail safety', 'fairy tales') --> True
anagrams('RAIL! SAFETY!', 'fairy tales') --> True
anagrams('Hi there', 'Bye there') --> False */


})