Inventory system by using HTML, CSS and javascript
<html>
<head>
<title>Product Price</title>
<style type="text/css">
#p1
{
font-family:Times New Roman;
}
#p2
{
font-family:Times New Roman;
}
#p2
{
font-family:Times New Roman;
}
#p2
{
font-family:Times New Roman;
}
#p2
{
font-family:Times New Roman;
}
#price
{
font-family:Times New Roman;
}
#table
{
border:1;
}
#f
{
background-color:Yellow;
}
#total
{
background-color:White;
}
</style>
</head>
<body>
<center>
<form name="f" id="f">
<select name="product">
<option value="-1" >Select Product</option>
<option value="0" id="p1" onclick="rvalue('p1')">Bread 40</option>
<option value="1" id="p2" onclick="rvalue('p2')">Egg 12</option>
<option value="2" id="p3" onclick="rvalue('p3')">Milk Packet 50</option>
<option value="3" id="p4" onclick="rvalue('p4')">Burgger 60</option>
<option value="4" id="p5" onclick="rvalue('p5')">Shwarma 40</option>
</select>
<br />
<input type="text" placeholder="Quantity" id="price" />
<button type="button" onclick="sum()">Add</button><br />
</form>
<br />
<table id="table" border="1">
<tr>
<th>Sr.</th>
<th>Name</th>
<th>unit Price</th>
<th>Quanity</th>
<th>Total Price</th>
</tr>
</table>
<input type="text" id="total" />
<button type="button" onclick= "totall()">Total</button>
</center>
<script type="text/javascript">
pname = new Array(5);
pprice = new Array(5);
pname[0] = "Bread";
pprice[0] = 40;
pname[1] = "Eggs";
pprice[1] = 12;
pname[2] = "Milk packet";
pprice[2] = 50;
pname[3] = "Burgger";
pprice[3] = 60;
pname[4] = "Shawarma";
pprice[4] = 70;
var index;
var p=0, total=0, price=0,count=0;
function rvalue(Pid) {
index = document.getElementById(Pid).value;
}
function sum() {
p = Number(document.getElementById("price").value);
price = p * pprice[index];
total += price;
count++;
var table = document.getElementById("table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = count;
var cell2 = row.insertCell(1);
cell2.innerHTML = pname[index];
var cell3 = row.insertCell(2);
cell3.innerHTML = pprice[index];
var cell4 = row.insertCell(3);
cell4.innerHTML = p;
var cell5 = row.insertCell(4);
cell5.innerHTML = price;
document.getElementById("f").reset();
index = 0;
}
function totall() {
document.getElementById("total").value = total;
}
</script>
</body>
</html>
