JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div id="wrapper">
  <h2>Assignment 4</h2>
  <br/><font face="monospace">Here is where we add the item:</font>
  <input type="textbox" id="LinkName" onkeypress="enterKey(event)" Value="" />
  <br/><font face="monospace">Use the <U>Enter Key</U> or hit the <U>Add Node</U> 
	button...</font>
  <input type="button" id="AddLink" value="Add Node" onclick="addNode()">
  <p id="output"></p>
</div>

CSS

#wrapper {
  background: #fafcd4;
  border-radius: 25px;
  border: 5px solid #1f42b7;
  padding: 20px;
  width: 450px;
  height: 100%;
}

#AddLink {
  font-family: monospace;
  background: #d4fcfb;
  border-radius: 25px;
  border: 2px solid #92e881;
  padding: 5px;
  width: 75px;
  height: 100%;
}

#LinkName {
  border-radius: 25px;
  background: #d4fcfb;
  border: 2px solid #92e881;
  padding: 5px;
  width: 75px;
  height: 100;
}

#output {
  font-family: monospace;
}

JavaScript

//Assignment 4
//Fucntion for enter key
function enterKey(e) {
  var key = e.keyCode || e.which;
  if (key == 13) {
    addNode();
    document.getElementById("LinkName").value = "";
  }
}
var list = null;
//Function for makelist
function makeList() {
  list = new List('A');
  list.addNode('B');
  list.addNode('C');
  list.addNode('D');
  list.addNode('E');
  document.getElementById('output').innerHTML = list.print();
}

//Function for make node
function makeNode(value, last) {
  this.id = 0;
  this.content = value;
  this.next = null;
  this.last = last;
  return this;
}

//Function for add a node
function addNode() {
  var value = document.getElementById('LinkName').value;
  list.addNode(value);
  document.getElementById('output').innerHTML = list.print();
}


//Function list
function List(value) {
  this.head = new makeNode(value, null);
  this.last = this.head;
}


List.prototype.addNode = function(value) {
  if (this.head == null) {
    this.head = new makeNode(value);
    return this.head;
  }
  if (this.last == null) {
    this.last = new makeNode(value);
    this.head.next = this.last;
    return this.last;
  }
  this.last.next = new makeNode(value);
  this.last = this.last.next;
  this.last.next = null;
  return this.last;
  this.id++;
}

makeNode.prototype.asString = function() {
  return "Node item: '" + this.content + "'<br/>";
}

List.prototype.print = function() {
  var Content = 'List-Header <br/>';
  var node = this.head;

  while (node != null) {
    Content += node.asString();
    node = node.next;
  }
  return Content;
}

makeList();