JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div id="wrapper">
  <h2>Assignment 15</h2>
  <p id="f"> Click the button to find out how many combination of neighbouring atoms are in caffeine.
  </p>
  <br>
  <input id="button" type="button" onclick="createGraph();" value="Caffeine" />
  <br>
  <br>
  <div id="nodes"></div>
</div>

CSS

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

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

#nodes,
#f {
  font-family: monospace;
}

JavaScript

//Assignment 15

var Node = function(_number, _type) {
  this.number = _number;
  this.type = _type;
  this.edges = [];
  return this;
}

var Edge = function(_cost) {
  this.from = null;
  this.to = null;
  this.cost = null;
  return this;
}

var Graph = function() {
  this.nodes = [];
  this.edges = [];
  this.type = "";
  this.paths = [];

  this.addNode = function(_number, _type) {
    var node = new Node(_number, _type);
    this.nodes.push(node);
    return node;
  };

  this.addEdge = function(_from, _to, _cost) {
    var edge = new Edge(_cost);
    edge.from = _from;
    edge.to = _to;
    edge.cost = _cost;
    this.edges.push(edge);
    return edge;
  };

  this.printNodes = function() {
    var s = "All atoms in a caffeine molecule <br>";
    for (var i = 0; i < this.nodes.length; i++) {
      s = s + " #" + this.nodes[i].number + " " + this.nodes[i].type + "|" + this.printNeighbors(i) + "</br>";
    }
    return s;
  }

  this.printNeighbors = function(i) {
    var n = "";
    for (var j = 0; j < this.edges.length; j++) {
      if (this.edges[j].from.number === this.nodes[i].number) {
        n += this.edges[j].to.type + " | ";
      } else if (this.edges[j].to.number === this.nodes[i].number) {
        n += this.edges[j].from.type + " | ";
      }
    }
    return n;
  }
}

var nodeList = document.getElementById("nodes");
var graph = new Graph(); // Global
function createGraph() {

  var n00 = graph.addNode('0', 'O');
  var n01 = graph.addNode('1', 'O');
  var n02 = graph.addNode('2', 'N');
  var n03 = graph.addNode('3', 'N');
  var n04 = graph.addNode('4', 'N');
  var n05 = graph.addNode('5', 'N');
  var n06 = graph.addNode('6', 'C');
  var n07 = graph.addNode('7', 'C');
  var n08 = graph.addNode('8', 'C');
  var n09 = graph.addNode('9', 'C');
  var n10 = graph.addNode('10', 'C');
  var n11 = graph.addNode('11', 'C');
  var n12 = graph.addNode('12', 'C');
  var n13 = graph.addNode('13', 'C');
  var n14 = graph.addNode('14', 'H');
  var n15 =...