JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

Select two nodes:
<br />
From
<select id="from">
    <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'>G</option>
</select>
To
<select id="to">
    <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'>G</option>
</select>
<input type="button" onclick="calculate();" value="Calculate" />
<br/>
<br/>
<span id="result" />

JavaScript

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

	Graph.prototype.add_node = function (label)
  {
  	this.edges[label] = {};
	};

Graph.prototype.add_edge = function (from, to, cost)
	{
  	this.edges[from][to] = cost;
  	this.edges[to][from] = cost;
};

Graph.prototype.calculate_paths = function (from, to, cost, paths)
	{
  	paths.push(from);
    if (from == to)
    	{
    		display_path(paths, cost);
    	}
    else
    	{
    	for (var connected in this.edges[from])
    		{
    		if (paths.indexOf(connected) < 0)
    			{
      			var thiscost = this.edges[from][connected];
        		this.calculate_paths(connected, to, cost + thiscost, paths);
      		}
      	}
    	}
    paths.pop();
	};

function display_path(paths, cost)
	{
  	var value = paths[0];
    for (var i = 1; i < paths.length; i++)
    	{
      	value = value + ", " + paths[i];
    	}
   value += ": " + cost;
		var result = document.getElementById('result');
    result.innerHTML += value + "<br />";
	}

calculate = function ()
	{
  	var result = document.getElementById('result');
    result.innerHTML = "";
		var from = document.getElementById('from').value;
    var to = document.getElementById('to').value;
		var GraphT = new Graph();

    GraphT.add_node('A');
    GraphT.add_node('B');
    GraphT.add_node('C');
    GraphT.add_node('D');
    GraphT.add_node('E');
    GraphT.add_node('F');
    GraphT.add_node('G');

    
    GraphT.add_edge('A', 'B', 2);
    GraphT.add_edge('A', 'C', 1);
    GraphT.add_edge('B', 'D', 1);
    GraphT.add_edge('B', 'G', 1);
    GraphT.add_edge('C', 'D', 1);
    GraphT.add_edge('C', 'E', 1);
    GraphT.add_edge('D', 'E', 2);
    GraphT.add_edge('D', 'F', 1);
    GraphT.add_edge('D', 'G', 2);

    result.innerHTML = from + " to " + to + "<br />";
    GraphT.calculate_paths(from, to, 0, []);
};