JSFiddle - React, Tailwind, and code Playground

by Jeff Santos

HTML

Please Enter Value N
<br/>
<input type="textbox" id="nValue" value="" />

<input type="button" id="enQueue" value="Fill Queue" onClick="enQueue();" />
<input type="button" id="deQueue" value="Empty Queue" onClick="filterQueue();" />


<p id='output'></p>

JavaScript

var valueToProcess = '';
var iteration = 0;
var Node = function(_content) {
  this.next = null;
  this.previous = null;
  this.content = _content;

}

var Queue = function() {
  this.front = null;
  this.back = null;

  // now push adds to the back
  this.push = function(_content) {
    // No front - create one
    if (this.front == null) {
      this.front = new Node(_content);
      this.back = this.front;
      return this;
    }

    //   create a new node to be the back
    var addedNode = new Node(_content);

    //   a) store pointer to current back
    //      as this.back of new node
    addedNode.previous = this.back;

    //   b) store pointer to new back
    //     as this.back.next of current back
    this.back.next = addedNode;

    //   c) store pointer to new back
    //     as this.back which becomes current back
    this.back = addedNode; // which becomes new back
    return this;
  }

  // the old 'pop' takes from the back
  // this is not used in FIFO but let's not delete it.
  // it can be used as a way to 'undo' a bad entry

  // this is pop modified to take from the front
  this.removeFront = function() {
    if (this.front == null) {
      // alert("The Queue is Empty");
      return null;
    }
    var contentRemoved = this.front.content;

    if (this.back == this.front) {
      // alert("The Queue Only Has one item");
      this.front = null;
      this.back = null;
      return contentRemoved;
    } else {
      this.front = this.front.next;
      this.front.previous = null;
      return contentRemoved;
    }
  }



  // pop now called removeBack
  this.removeBack = function() {
    if (this.front == null) {
      // alert("The Queue is Empty");
      return null;
    }
    var contentRemoved = this.back.content;
    if (this.back == this.front) {
      // alert("The Queue Only Has one item");
      this.front = null;
      this.back = null;
      return a;
    } else {
      this.back = this.back.previous;
      this.back.next =...