prof3ssorSt3v3/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Queue Data Structures</title>
    <link rel="stylesheet" href="./main.css" />
    <script src="./main.js" type="module"></script>
  </head>
  <body>
    <header>
      <h1>Queue</h1>
    </header>
    <nav>
      <p>Add Movie to Queue</p>
      <p>
        <input type="text" id="movie" name="movie" />
        <button id="btnAdd">Add to Queue</button>
        <button id="btnRemove">Remove from Queue</button>
        <button id="btnLog">Log the Contents</button>
      </p>
    </nav>
    <main>
      <ol></ol>
    </main>
  </body>
</html>

## main.css
* {
  box-sizing: border-box;
}
html {
  font-size: 20px;
  font-weight: 300;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color-scheme: dark light;
}
body {
  min-height: 100vh;
}
input {
  font-size: 1rem;
  font-family: inherit;
}
button {
  border: none;
  padding: 0.25rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
}
#btnAdd {
  background-color: hsl(90, 30%, 40%);
}
#btnRemove {
  background-color: hsl(0, 30%, 40%);
}
#btnLog {
  background-color: hsl(220, 30%, 40%);
}

## main.js
import Queue from './queue.js';
let q = new Queue(3);

document.addEventListener('DOMContentLoaded', () => {
  let btnAdd = document.getElementById('btnAdd');
  btnAdd.addEventListener('click', addMovie); //add the input value to the end of the queue
  let btnRemove = document.getElementById('btnRemove');
  btnRemove.addEventListener('click', removeMovie); //remove one item from the front of the queue
  let btnLog = document.getElementById('btnLog');
  btnLog.addEventListener('click', logMovies); //show the contents of the queue
});

function addMovie() {
  //attempt to add another item to the queue
  let movie = document.getElementById('movie');
  let txt = movie.value.trim();
  if (txt) {
    q.enqueue(txt);
    console.log(`the queue now has ${q.size()} items`);
    addToHTMLList(txt);
    movie.value = '';
    movie.focus();
    console.log(`the last movie in the Queue is now ${q.tail()}`);
  }
}

function removeMovie() {
  //dequeue the first item in the queue
  let removed = q.dequeue();
  console.log(`${removed} has been removed from the queue`);
  removeFromHTMLList(removed);
}

function addToHTMLList(txt) {
  //update the HTML list of things
  let ol = document.querySelector('main > ol');
  ol.innerHTML += `<li>${txt}</li>`;
}

function removeFromHTMLList(txt) {
  //remove the dequeued item from the HTML
  let listitems = document.querySelectorAll('ol > li');
  listitems.forEach((li) => {
    if (li.textContent === txt) {
      li.remove();
    }
  });
}

function logMovies() {
  console.log(q.toString());
}

## queue-obj.js
export default class Queue {
  #frontIndex = 0;
  #backIndex = 0;
  #length = 0;
  #items = {};
  #MAXSIZE = 3;

  constructor(max = 3) {
    this.#MAXSIZE = max;
  }

  size() {
    return this.#length;
  }
  enqueue(item) {
    //add to the end of the queue
    if (this.isFull())
      throw new Error('Queue is currently full. Try again later.');
    this.#items[this.#backIndex] = item;
    this.#backIndex++;
    this.#length++;
  }
  dequeue() {
    //remove the first item
    let item = this.#items[this.#frontIndex];
    delete this.#items[this.#frontIndex];
    this.#length--;
    this.#frontIndex++;
    return item;
  }
  peek() {
    //see the front of the line
    return this.#items[this.#frontIndex];
  }
  tail() {
    //see the end of the line
    return this.#items[this.#backIndex - 1];
  }
  isEmpty() {
    return this.#length === 0;
  }
  isFull() {
    return this.#length === this.#MAXSIZE;
  }
  toString() {
    return this.#items;
  }
}

## queue.js
export default class Queue {
  #list = [];
  #first = null;
  #last = null;
  #MAXSIZE = 5;

  constructor(max = 5) {
    //5 is our default queue length
    this.#MAXSIZE = max;
  }
  size() {
    return this.#list.length;
  }
  enqueue(item) {
    //add
    if (this.isFull()) throw new Error('Queue is full.');
    if (this.isEmpty()) {
      this.#first = item;
    }
    this.#list.push(item);
    this.#last = item;
  }
  dequeue() {
    let item = this.#list.shift();
    this.#first = this.#list[0];
    return item;
  }
  peek() {
    return this.#first;
  }
  tail() {
    return this.#last;
  }
  isEmpty() {
    return this.#list.length === 0;
  }
  isFull() {
    return this.#list.length === this.#MAXSIZE;
  }
  toString() {
    return this.#list;
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Queue Data Structures</title>
	<link rel="stylesheet" href="./main.css" />
	<script src="./main.js" type="module"></script>
	</head>
	<body>
	<header>
	<h1>Queue</h1>
	</header>
	<nav>
	<p>Add Movie to Queue</p>
	<p>
	<input type="text" id="movie" name="movie" />
	<button id="btnAdd">Add to Queue</button>
	<button id="btnRemove">Remove from Queue</button>
	<button id="btnLog">Log the Contents</button>
	</p>
	</nav>
	<main>
	<ol></ol>
	</main>
	</body>
	</html>
	* {
	box-sizing: border-box;
	}
	html {
	font-size: 20px;
	font-weight: 300;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color-scheme: dark light;
	}
	body {
	min-height: 100vh;
	}
	input {
	font-size: 1rem;
	font-family: inherit;
	}
	button {
	border: none;
	padding: 0.25rem 1rem;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	}
	#btnAdd {
	background-color: hsl(90, 30%, 40%);
	}
	#btnRemove {
	background-color: hsl(0, 30%, 40%);
	}
	#btnLog {
	background-color: hsl(220, 30%, 40%);
	}
	import Queue from './queue.js';
	let q = new Queue(3);

	document.addEventListener('DOMContentLoaded', () => {
	let btnAdd = document.getElementById('btnAdd');
	btnAdd.addEventListener('click', addMovie); //add the input value to the end of the queue
	let btnRemove = document.getElementById('btnRemove');
	btnRemove.addEventListener('click', removeMovie); //remove one item from the front of the queue
	let btnLog = document.getElementById('btnLog');
	btnLog.addEventListener('click', logMovies); //show the contents of the queue
	});

	function addMovie() {
	//attempt to add another item to the queue
	let movie = document.getElementById('movie');
	let txt = movie.value.trim();
	if (txt) {
	q.enqueue(txt);
	console.log(`the queue now has ${q.size()} items`);
	addToHTMLList(txt);
	movie.value = '';
	movie.focus();
	console.log(`the last movie in the Queue is now ${q.tail()}`);
	}
	}

	function removeMovie() {
	//dequeue the first item in the queue
	let removed = q.dequeue();
	console.log(`${removed} has been removed from the queue`);
	removeFromHTMLList(removed);
	}

	function addToHTMLList(txt) {
	//update the HTML list of things
	let ol = document.querySelector('main > ol');
	ol.innerHTML += `<li>${txt}</li>`;
	}

	function removeFromHTMLList(txt) {
	//remove the dequeued item from the HTML
	let listitems = document.querySelectorAll('ol > li');
	listitems.forEach((li) => {
	if (li.textContent === txt) {
	li.remove();
	}
	});
	}

	function logMovies() {
	console.log(q.toString());
	}
	export default class Queue {
	#frontIndex = 0;
	#backIndex = 0;
	#length = 0;
	#items = {};
	#MAXSIZE = 3;

	constructor(max = 3) {
	this.#MAXSIZE = max;
	}

	size() {
	return this.#length;
	}
	enqueue(item) {
	//add to the end of the queue
	if (this.isFull())
	throw new Error('Queue is currently full. Try again later.');
	this.#items[this.#backIndex] = item;
	this.#backIndex++;
	this.#length++;
	}
	dequeue() {
	//remove the first item
	let item = this.#items[this.#frontIndex];
	delete this.#items[this.#frontIndex];
	this.#length--;
	this.#frontIndex++;
	return item;
	}
	peek() {
	//see the front of the line
	return this.#items[this.#frontIndex];
	}
	tail() {
	//see the end of the line
	return this.#items[this.#backIndex - 1];
	}
	isEmpty() {
	return this.#length === 0;
	}
	isFull() {
	return this.#length === this.#MAXSIZE;
	}
	toString() {
	return this.#items;
	}
	}
	export default class Queue {
	#list = [];
	#first = null;
	#last = null;
	#MAXSIZE = 5;

	constructor(max = 5) {
	//5 is our default queue length
	this.#MAXSIZE = max;
	}
	size() {
	return this.#list.length;
	}
	enqueue(item) {
	//add
	if (this.isFull()) throw new Error('Queue is full.');
	if (this.isEmpty()) {
	this.#first = item;
	}
	this.#list.push(item);
	this.#last = item;
	}
	dequeue() {
	let item = this.#list.shift();
	this.#first = this.#list[0];
	return item;
	}
	peek() {
	return this.#first;
	}
	tail() {
	return this.#last;
	}
	isEmpty() {
	return this.#list.length === 0;
	}
	isFull() {
	return this.#list.length === this.#MAXSIZE;
	}
	toString() {
	return this.#list;
	}
	}