JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div id="wrapper">
  <h2>Assignment 14</h2> Select two nodes and click the button to find the paths and costs:
  <br>
  <br>From
  <select id="source">
    <option value='A' selected>A</option>
    <option value='B'>B</option>
    <option value='C'>C</option>
    <option value='D'>D</option>
    <option value='E'>E</option>
    <option value='F'>F</option>
    <option value='G'>G</option>
  </select> to
  <select id="destination">
    <option value='A'>A</option>
    <option value='B'>B</option>
    <option value='C'>C</option>
    <option value='D'>D</option>
    <option value='E'>E</option>
    <option value='F'>F</option>
    <option value='G' selected>G</option>
  </select>
  <input id="button" type="button" onclick="calculate();" value="Find Paths" />
  <br>
  <br>
  <div id="result"></div>
  <br>
  <br>
  <h2><div id="fastest"></div></h2>
  <br>
</div>

CSS

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

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

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

#source,
#destination {
  background: #d4fcfb;
  border-radius: 25px;
  border: 2px solid #92e881;
  padding: 5px;
  width: 55px;
  height: 100;
}

#result,
#fastest,
#source,
#destination {
  font-family: monospace;
}

JavaScript

// Assignment 14

var option = 0;
var best = 10000;
var fastest = [];


function Graph() {
  this.edges = {};
}

Graph.prototype.addNode = function(letter) {
  this.edges[letter] = {};
};

Graph.prototype.addEdge = function(source, destination, cost) {
  this.edges[source][destination] = cost;
  this.edges[destination][source] = cost;
};
// 
Graph.prototype.calculate = function(source, destination, cost, paths) {
  paths.push(source);

  if (source == destination) {
    display(paths, cost);
  } else {
    for (var connected in this.edges[source]) {

      if (paths.indexOf(connected) < 0) {
        var thisCost = this.edges[source][connected];
        this.calculate(connected, destination, cost + thisCost, paths);
      }
    }
  }
  paths.pop();
};

function display(paths, cost) {
  var value = paths[0];

  for (var i = 1; i < paths.length; i++) {
    value = value + " => " + paths[i];
  }
  option++;
  value += " | cost = " + cost + " | Option #" + option;


  if (cost < best) {
    best = cost;
    fastest = [];
    fastest.push(option);
  } else if (cost === best) {
    fastest.push(option)
  }

  document.getElementById('result').innerHTML += value + "<br />";
}

window.calculate = function() {

  option = 0;
  best = 10000;
  fastest = [];

  document.getElementById('result').innerHTML = "";
  var source = document.getElementById('source').value;
  var destination = document.getElementById('destination').value;
  var graph = new Graph();

  graph.addNode('A');
  graph.addNode('B');
  graph.addNode('C');
  graph.addNode('D');
  graph.addNode('E');
  graph.addNode('F');
  graph.addNode('G');
  //
  graph.addEdge('A', 'B', 2);
  graph.addEdge('A', 'C', 1);
  graph.addEdge('B', 'D', 1);
  graph.addEdge('B', 'G', 1);
  graph.addEdge('C', 'D', 1);
  graph.addEdge('C', 'E', 1);
  graph.addEdge('D', 'E', 2);
  graph.addEdge('D', 'F', 1);
  graph.addEdge('D', 'G', 2);
  document.getElementById('result').innerHTML = source + " to " + destination + "<br><br>";
 ...