algorithmvisualizer/djikstra.html at master · harsh242/algorithmvisualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Djikstra</title>
      <link href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@500;600&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"></script>
       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"></script>
      <link rel="stylesheet" href="style.css">
      <script src="djikstra.js"></script>
      <link rel='icon' href='https://upload.wikimedia.org/wikipedia/commons/3/39/Identity_graph2.svg'>
  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="index.html">Greedy Techniques</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
          <li class="nav-item ">
            <a class="nav-link" href="huffman.html">Huffman Coding</a>
          </li>
          <li class="nav-item" >
            <a class="nav-link" href="prims.html" >Prim's algorithm</a>
          </li>
          <li class="nav-item" >
            <a class="nav-link" href="knapsack.html" >Knapsack Problem</a>
          </li>
          <li class="nav-item" >
            <a class="nav-link" href="task.html">Task Scheduling</a>
          </li>
          <li class="nav-item active" >
            <a class="nav-link" href="djikstra.html">Single Source Shortest Path</a>
          </li>
        </ul>
      </div>
    </nav>
      <br>
      <br>
      <section class="container mt-5">
          <div class="jumbotron ">
            <h1>Single source shortest path</h1>
            <p class="lead">About the algorithm:</p><hr>
            <p>The shortest path algorithm is about finding a path between 2 vertices in a graph such that the total sum of the edge weights is minimum</p>
            <hr>
            <h3>Time Complexity:O(ELogV)</h3>
            <p>Here's the graph we will be using to find the shortest path</p>
            <img src = "graph.png"><br><br>

          </div>
        </section>

        <section>
          <div class="container mb-5">
          <div class="row">
          <div class="col-lg-4">
          <div class="card bg-light">
            <h5 class="card-header">Input:</h5>
            <div class="card-body">
              <div class="input-group">
               <div> From:<br>
                <input type = "text" id = "from">
              </div>
            <div>
                To:<br>
                <input type = "text" id = "to">
              </div>
                <button onClick = "findPath()" class="btn btn-info mt-3">Find Shortest Path</button>
                  </div>
              </div>
            </div>
          </div>


        <div class="col-lg-7 " id="table" style="visibility: hidden;">
          <div class="card bg-light">
            <h5 class="card-header">Output:</h5>
            <div class="card-body">
              Shortest Path from
              <span id="fromNode"></span> to <span id="toNode"></span> <br> is along the nodes
              <span id="shortestpath"></span>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    </section>

  </body>

  </html>