Assignment 4 Doubly Linked List

by austinmillett

HTML

<!-- Heading 1 -->
<h1> Austin Millett Assignment 4 </h1>
<!-- Description of assignment -->
<h2> Create a List and Add to it </h2>

<!-- button for Create New List -->
<input type = "button"  id = "Create" value = "Create New List" 
onClick = "createList()" /><br><br>

<!-- button and textbox for add a Node -->
<input type = "textbox" id = "Content" placeholder = "Enter letter of new node" />
<input type = "button" id = "Add" value ="Add a Node"  onClick = "addNode()" />
 
 <!-- div for output -->
<div id = "output"> </div>

CSS

/* Design for Create New List button */
#Create {
background-color: black; 
border: 2px solid; 
color: white;
padding: 4px 8px; 
text-align: center; 
font-size: 15px; 
}

/* Design for Add a Node button */
#Add {
background-color: black; 
border: 2px solid; 
color: white;
padding: 4px 8px; 
text-align: center; 
font-size: 15px; 
}

JavaScript

//Globalizing newList
var newList = new doublyLinked();

//createList Function adds Nodes A,B,C,D, and E
function createList(Content) {
newList.add("A")
newList.add("B")
newList.add("C")
newList.add("D")
newList.add("E")
newList.print();
}

//First Node is length 0
function doublyLinked() {
this.head = null;
this.tail = null;
this.length = 0;
}

//Adding onto the function "doublyLinked" using function.prototype.add
doublyLinked.prototype.add = function(values) {
var node = new NewNode();
node.values = values;

//Adding onto the function "doublyLinked" using function.prototype.print
doublyLinked.prototype.print = function() {
if (this.head === null) return "Empty List";
var display = " ";
var counter = 0;
var node = this.head;
while (node !== null) {
counter = counter + 1;
display += "Node - " + counter + " Content - " + node.values + "</br>";
node = node.next;
}
document.getElementById("output").innerHTML = display;
}

//Makes a doubly link list vs singly link list - Singly linked lists do not go backwards only frontwards
function NewNode() {
this.values = null;
this.next = null;
this.prev = null; 
return this;
}

//if this.head or the first node equals null then return node
if (this.head === null) {
this.head = node;
this.length = 1;
return node;
}

//if this.tail or the last node equals null return node
if (this.tail === null) {
this.tail = node;
this.tail.prev = this.head;
this.head.next = this.tail;
this.length = 2;
return node;
}


this.tail.next = node;
node.prev = this.tail;
this.tail = node;
this.length++;
return node;
}

//Add node function to add a node at the end of the new created list
function addNode() {

var values = document.getElementById("Content").value;
newList.add(values);
newList.print();
}