JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<h1>Module 11</h1>
  <form>
    Enter start node.<br>
    <input type="text"  id="start-node"><br>
    Enter end node.<br>
    <input type="text"  id="end-node"><br>
    <input type="button" value="Enter" id="click">
  </form>

  <div id="output"></div>
  <br>
  <div id="output2"></div>
  <div id="output3"></div>

CSS

#click {
  background-color: blue;
  color: white;
  margin-top: 8px;
  margin-bottom: 8px;
  width: 10em;
}

JavaScript

var array=[]; var errors=[]; var avalible_paths=[];
var myVertices = ['A','B','C','D','E','F','G'];//valid user entries
var graph = new Graph();
var result, total, start, end;
document.getElementById("click").onclick = function() {myFormSubmit()};

function myFormSubmit() {
  array=[], errors=[], avalible_paths=[], graph = new Graph();//reset
  start = document.getElementById("start-node").value.toUpperCase();
  end = document.getElementById("end-node").value.toUpperCase();

  try {
    if (start == "") throw "You didn't enter a start node.";
    if (myVertices.indexOf(start) == -1) throw "Enter a letter (from A to G) node for start. You entered " + start;
  }
  catch(err) {
    errors.push(err);
  }

  try {
    if (end == "") throw "You didn't enter a end node.";
    if (myVertices.indexOf(end) == -1) throw "Enter a letter (from A to G) node end. You entered " + end;
  }
  catch(err) {
    errors.push(err);
  }
  document.getElementById('output').innerHTML = errors.join("<br>");
  if (errors.length == 0) {
    //do this if no errors

    
    for (var i=0; i<myVertices.length; i++) {
      graph.addVertix(myVertices[i]);
    }

    graph.addEdge('A','B',2);
    graph.addEdge('A','C',1);
    graph.addEdge('C','D',1);
    graph.addEdge('C','E',1);
    graph.addEdge('B','D',1);
    graph.addEdge('B','G',1);
    graph.addEdge('E','D',2);
    graph.addEdge('D','F',1);
    graph.addEdge('D','G',2);

    document.getElementById('output').innerHTML = graph.toString(start, end);
    
    display_cost_each_path_between_2_nodes(start, end);
    document.getElementById('output2').innerHTML = start + ' to ' + end;
    document.getElementById('output3').innerHTML = avalible_paths.join("<br>");
  }
}

function Dictionary() {
  var items = {};

  this.has = function(key) {
    return key in items;
  };

  this.set = function(key, value) {
    items[key] = value;
  };

  this.get = function(key) {
    return this.has(key) ? items[key] : undefined;
  };

}

function Queue() { 

...