Skip to content

Commit 1157706

Browse files
Rizwan-SRizwan-S
authored
Merge pull request #1901 from wahfei/johncent
Created Knapsack Project
2 parents 825fbc3 + 10e2ae1 commit 1157706

5 files changed

Lines changed: 291 additions & 0 deletions

File tree

‎assets/Images/KnapsackProblem.PNG‎

29.1 KB
Loading

‎assets/css/KnapsackProblem.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
background-color: #fff;
5+
6+
}
7+
8+
.title{
9+
position: relative;
10+
font-size: 30px;
11+
12+
}
13+
14+
h1, h2{
15+
position: relative;
16+
text-align: center;
17+
}
18+
.add_delete_item, .calculateResetBtn{
19+
position: relative;
20+
text-align: center;
21+
}
22+
23+
button{
24+
padding: 10px;
25+
width: 150px;
26+
border-radius: 15px;
27+
background-color: #ccbbdc;
28+
29+
}
30+
31+
#itemInformations{
32+
min-height: 200px;
33+
margin-left: 550px;
34+
padding-top: 20px;
35+
}
36+
37+
.item{
38+
padding: 10px;
39+
40+
}
41+
42+
#result{
43+
min-height: 200px;
44+
align-items: center;
45+
}
46+
47+
span{
48+
display: block;
49+
position: relative;
50+
align-items: center;
51+
padding: 20px 0px;
52+
margin-left: 690px;
53+
54+
}
55+
input{
56+
height: 30px;
57+
58+
}
59+
60+
#result{
61+
font-size: 30px;
62+
text-align: center;
63+
}
64+
65+
.description{
66+
padding-left:100px;
67+
padding-right: 100px;
68+
padding-bottom: 50px;
69+
}
70+
71+
#descTitle{
72+
font-size: 25px;
73+
text-decoration: underline;
74+
}

‎assets/js/KnapsackProblem.js‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
let count = 1;
2+
let totalProfit = 0;
3+
4+
function addItem(){
5+
count = count + 1;
6+
let container = document.getElementById("itemInformations");
7+
container.appendChild(document.createTextNode("Item " + count + " "));
8+
// Create an <input> element, set its type and name attributes
9+
let input = document.createElement("input");
10+
input.type = "number";
11+
input.name = "item" + count;
12+
input.id = "item" + count;
13+
input.class = "item";
14+
input.placeholder = "Enter Weight (KG)"
15+
16+
container.appendChild(input);
17+
18+
container.appendChild(document.createTextNode(" Profit " + count + " "));
19+
// Create an <input> element, set its type and name attributes
20+
let input2 = document.createElement("input");
21+
input2.type = "number";
22+
input2.name = "profit" + count;
23+
input2.id = "profit" + count;
24+
input.class = "item";
25+
input2.placeholder = "Enter Profit";
26+
27+
container.appendChild(input2);
28+
29+
// Append a line break
30+
container.appendChild(document.createElement("br"));
31+
}
32+
33+
function deleteItem(){
34+
35+
// Container <div> where dynamic content will be placed
36+
let container = document.getElementById("itemInformations");
37+
// 5 remove child is called to remove child (br, input ,text) for 1 item
38+
if (container.hasChildNodes() && count!=1) {
39+
container.removeChild(container.lastChild);
40+
container.removeChild(container.lastChild);
41+
container.removeChild(container.lastChild);
42+
container.removeChild(container.lastChild);
43+
container.removeChild(container.lastChild);
44+
count = count - 1;
45+
}
46+
}
47+
48+
function resetBtn(){
49+
let resultContainer = document.getElementById("result");
50+
51+
while(resultContainer.hasChildNodes){
52+
resultContainer.removeChild(container.lastChild);
53+
}
54+
}
55+
56+
let theItems = [];
57+
58+
function calculate(){
59+
60+
for(let i = 0; i< count; i++){
61+
theItems[i] = { name: "thename", weight: 0, profit: 0, profitWeight: 0, amount: 0};
62+
}
63+
//let profitWeight = [count];
64+
let knapsackWeight = document.getElementById("knapsackWeight").value;
65+
66+
container = document.getElementById("itemInformations");
67+
68+
if(count >= 1){
69+
for(let x = 1, j = 0; j < count; j++, x++){
70+
71+
let itemName = "item" + x.toString();
72+
let profitName = "profit" + x.toString();
73+
74+
let weight = document.getElementById(itemName).value;
75+
let profit = document.getElementById(profitName).value;
76+
77+
theItems[j].profit = profit;
78+
theItems[j].weight = weight;
79+
theItems[j].name = itemName;
80+
theItems[j].profitWeight = profit/weight;
81+
82+
}
83+
let flag = count;
84+
85+
//sorting the array of items decending order of profitWeight
86+
theItems.sort(function(a,b){
87+
if (a.profitWeight > b.profitWeight)
88+
return -1;
89+
if (a.profitWeight < b.profitWeight)
90+
return 1;
91+
92+
return 0;
93+
});
94+
95+
for(let i = 0; i < count; i++){
96+
97+
if (knapsackWeight >= theItems[i].weight){
98+
//
99+
knapsackWeight = knapsackWeight - theItems[i].weight;
100+
//setting the amount to 1 as it will be chosen
101+
theItems[i].amount = 1;
102+
totalProfit += theItems[i].profit;
103+
104+
}
105+
else{
106+
//set the amount to be taken as 0 as it will not be pick
107+
theItems[i].amount = 0;
108+
}
109+
}
110+
111+
112+
113+
114+
}
115+
116+
theItems.sort(function(a,b){
117+
if (a.name < b.name)
118+
return -1;
119+
if (a.name > b.name)
120+
return 1;
121+
122+
return 0;
123+
});
124+
125+
126+
127+
let finalResult = "";
128+
for(let i = 0; i < count; i++){
129+
finalResult = finalResult.concat(theItems[i].amount.toString()) + " , ";
130+
}
131+
132+
finalResult = finalResult.replace(/,\s*$/, "");
133+
134+
let resultContainer = document.getElementById("result");
135+
136+
137+
138+
resultContainer.appendChild(document.createTextNode("( " + finalResult + ")"));
139+
140+
resultContainer.appendChild(document.createElement("br"));
141+
142+
143+
144+
145+
}

‎public/KnapSackProblem.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<html>
2+
<head>
3+
<title>Fractional Knapsack Problem</title>
4+
<script src="../assets/js/KnapsackProblem.js"></script>
5+
<link rel="stylesheet" href="../assets/css/KnapsackProblem.css">
6+
</head>
7+
<body>
8+
<div class="title">
9+
<h1>Knapsack Problem</h1>
10+
</div>
11+
12+
<div id="knapsackCapacity">
13+
<h2>Knapsack Weight (KG)</h2>
14+
<span>
15+
<input id="knapsackWeight" type="number" placeholder="Enter Weight (kg)">
16+
</span>
17+
18+
</div>
19+
20+
<div class="add_delete_item">
21+
<button onclick="addItem()">Add Item</button>
22+
<button onclick="deleteItem()">Delete Item</button>
23+
</div>
24+
<!--The items information area-->
25+
<div id="itemInformations">
26+
<!--Setting one default input area that cannot be deleted-->
27+
Item 1
28+
<input type="number" id="item1" name="item1" placeholder="Enter Weight (KG)">
29+
Profit 1
30+
<input type="number" id="profit1" name="profit1" placeholder="Enter Profit">
31+
<br>
32+
33+
</div>
34+
<div class="calculateResetBtn">
35+
<button onclick="calculate()">Calculate</button>
36+
<button onclick="location.reload()">Reset</button>
37+
</div>
38+
<div id="result">
39+
<h2>Result</h2>
40+
41+
</div>
42+
<div class="description">
43+
<h2 id="descTitle">Problem Description</h2>
44+
<br />
45+
<h3 id="theDesc">This 0/1 Knapsack Problem uses Greedy algorithm/method. Greedy algorithm will always take the items which maximized the profit of the knapsack. 0/1 Knapsack either takes the item as a whole or leave it and not take it. the algorithm chooses the items acording to the highest to the lowest profit by weight (profit/weight) of each item.</h3>
46+
<br />
47+
<h3>The limitation of knapsack greedy which will not give the optimal solution but will give the profit which is maximized.</h3>
48+
49+
<br />
50+
51+
<h3 id="descTitle">For Example:</h3>
52+
<p>Knapsack Weight: 50 KG</p>
53+
<p>Item 1: 10KG Profit : 60</p>
54+
<p>Item 2: 20KG Profit : 100</p>
55+
<p>Item 3: 30KG Profit : 120</p>
56+
57+
<p>Output: (1,1,0)</p>
58+
<br />
59+
<p>The output will not be (0,1,1) because if we calculate the profit by weight of this output it will be (220/50 = 4.4). Whereas if we take the profit by weight of the output (1,1,0) it is (160/30 = 5.3333) which is higher that the other one. therefore the profit is maximized when we take item 1 and item 2.</p>
60+
61+
</div>
62+
63+
64+
65+
</body>
66+
</html>

‎script.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2074,6 +2074,12 @@ let projectData = [{
20742074
projectImage: "assets/images/password-generator.jpg",
20752075
projectUrl: "public/password.html",
20762076
},
2077+
{
2078+
projectName: "0/1 Knapsack Solution",
2079+
projectImage: "assets/images/KnapsackProblem.png",
2080+
projectUrl: "public/KnapSackProblem.html",
2081+
2082+
},
20772083
];
20782084

20792085
var projectDetails = projectData.slice(0);

0 commit comments

Comments
 (0)