jQuery toggleClass example

Toggle class name on click in jQuery

by SHELDON PASCIAK

HTML

<div id="banner-message">
  <p>Stepper:</p>
  <p>
  
  </p>
  <button>answer</button>
</div>
<div>
<p>
Write a function that accepts a positive number N.<BR>
The function should console log a step shape with N levels using the # character. <BR>
Make sure the step has spaces on the right hand side!<BR>
--- Examples<BR>

steps(2)
'# '
'##'
steps(3)
'# '
'## '
'###'
steps(4)
'# '
'## '
'### '
'####'

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 stepper(number) {

var tempResult='';
for (var i=1;i<number;i++) {
  tempResult = '#'.repeat(i);
  console.log("'" +tempResult + " '");
} 
	tempResult = '#'.repeat(i);
	console.log("'" +tempResult + "'");
}

function stepper2(number) {

	let largestring = 'NOW-IS-THE-TIME';//"#".repeat(number);
  for (var i=1;i<number;i++){
  console.log("'"+largestring.substr(0,i)+" '");
  }
  console.log("'"+largestring.substr(0,i)+"'");
}

button.on("click", () => {

alert("The results will be in the console window!");

console.log("\n\n\n\n\n\n\n\n\n\n\n");
console.log("\n\n\n\n\n\n\n\n\n\n\n");
console.log("\n\n\n\n\n\n\n\n\n\n\n");

for (var j=0;j<5;j++){
console.log("-- stepper 1 ---=>" + j);
stepper(j);
console.log("-- stepper 2 ---=>" + j);
stepper2(j);
console.log("----------------");
}


})