Created
February 5, 2023 18:27
-
-
Save prof3ssorSt3v3/fcbe69e2c8df52a33de537d542240839 to your computer and use it in GitHub Desktop.
Code from video about Queue Data Structures
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| 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%); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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()); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment