jQuery addClass example

Change class name on click in jQuery

by rafalgradziel

HTML

<div id="banner-message">
  <h3>Structure: LIST</h3>
  <div id="output"></div>
</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;
}

#output {
  font-family: Courier;
  text-align: left;
}

JavaScript

class Item {
	constructor(val) {
  	this.Value = val;
    this.Next = null;
  }
}

class Lister {
	constructor(name) {
    this.Name = name;
  	this.Head = null;
  }

  Add(val) {
  	var item = new Item(val);
	  if (this.Head == null) {
  	  this.Head = item;
    } else {
  	  var work = this.Head;
      while(work.Next !== null) {
      	work = work.Next;
      }
      work.Next = item;
    }
    this.Print()
  }

  Print() {
    var work = this.Head;
    var queue = "";
    var title = `#${this.Name}: `;
    if (this.Head == null) {
      queue = `${title} EMPTY`;
    } else {
      while (work !== null) {
        var separator = queue ? ", " : title;
        queue += separator + work.Value;
        work = work.Next
      }
    }
    var out = $('#output');
    var html = out.html();
    out.html(html+"<br/>"+queue);
  }
}

var list1 = new Lister("A");
var list2 = new Lister("B");

list1.Print();
list1.Add(2);
list1.Add(5);
list1.Add(3);
list2.Add(5)