algorithmvisualizer/knapsack.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
107
108
109
110
111
112

    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Huffman</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">
            <link rel="stylesheet" href="style.css">
            <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
            </script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js" type="text/javascript"></script>
            <link rel='icon' href='https://upload.wikimedia.org/wikipedia/commons/3/39/Identity_graph2.svg'>
            <script charset="utf-8" src="knapsack.js" type="text/javascript"> </script>
        </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 active" >
                  <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 " >
                  <a class="nav-link" href="djikstra.html">Single Source Shortest Path</a>
                </li>
              </ul>
            </div>
          </nav>
              <section class="container section-gap">
                <div class="jumbotron ">
                  <h1>Fractional Knapsack</h1>
                  <p class="lead">About the algorithm:</p><hr>
                  <p>Given weights and values of n items, we need to put these items in a knapsack of capacity W to get the maximum total value in the knapsack.
                     <br>
                    In the 0-1 Knapsack problem, we are not allowed to break items. We either take the whole item or don’t take it.</p>
                  <hr>
                  <h3>Time Complexity:O(nlogn)</h3>
                </div>
              </section>

              <section>
                <div class="container mb-5">
                <div class="row">
                <div class="col-lg-8">
                <div class="card bg-light">
                  <h5 class="card-header">Input:</h5>
                  <div class="card-body">
                    <div class="form-group">
                        <label for="capacity" class="control-label">Capacity:</label>
                            <input required name='capacity' type="text" class="form-control" id="capacity" placeholder="Enter Capacity of Knapsack" maxlength="50">
                    </div>
                    <div class="form-group" id="items">
                        <table id="item-table" >
                            <tr>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Profit
                                </th>
                                <th>
                                    Weight
                                </th>
                            </tr>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    <button class="btn btn-info" id="addbutton" type="submit">
                        Add Item
                    </button>
                    <button class="btn btn-info" id="gobutton" type="submit">
                        Calculate
                    </button>
                  </div>
                </div>
              </div>

              <div class="col-lg-8 mt-5">
                <div class="card bg-light">
                  <h5 class="card-header">Output:</h5>
                  <div class="card-body">
                    Your final knapsack contains:
                    <span id="final_knapsack"></span> <br>
                    Your final profit is:
                    <span id="final_profit"></span> <br>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </section>

    </body>
</html>