https://i.sstatic.net/9fVwA.jpg
I have created a code for an average calculator using HTML, CSS, Bootstrap, and JavaScript.
The problem I am facing is with the alignment of the input text boxes. How can I adjust them properly?
The user should enter the quantity and price of the first four purchases. When they click on calculate, they should receive the average buying price of all quantities combined.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css">
<style type="text/css">
</style>
<script type="text/javascript">
function doadd()
{
var no1= document.getElementById('txtno1');
var no2= document.getElementById('txtno2');
var no3= document.getElementById('txtno3');
var no4= document.getElementById('txtno4');
var no5= document.getElementById('txtno5');
var no6= document.getElementById('txtno6');
var no7= document.getElementById('txtno7');
var no8= document.getElementById('txtno8');
var result=document.getElementById('txtresult');
var A =Number(no1.value)*Number(no2.value);
var B =Number(no3.value)*Number(no4.value);
var C =Number(no5.value)*Number(no6.value);
var D =Number(no7.value)*Number(no8.value);
var F =Number(no1.value)+Number(no3.value)+Number(no5.value)+Number(no7.value);
var E = A+B+C+D;
result.value = E/F;
}
</script>
<title>Average Calculator</title>
</head>
<body>
<div class="container bg-success text-white">
<div class="row">
<div class="col-4">
<span class="badge bg-dark"></span>
</div>
<div class="col-4 text-center fw-bold">
Average Calculator
</div>
<div class="col-2">
</div>
</div>
</div>
<div class="container fst-italic">
<br>
<br>
<p>You can use this tool to calculate the average price of stocks you bought at different prices and quantities.
</p>
<br>
<p>Enter 1st Purchase quantity: <input type="text" id='txtno1' ><p/>
<p>Enter 1st Purchase price : <input type="text" id='txtno2'></p>
<p>Enter 2nd Purchase quantity: <input type="text" id='txtno3'></p>
<p>Enter 2nd Purchase price : <input type="text" id='txtno4'></p>
<p>Enter 3rd Purchase quantity: <input type="text" id='txtno5'></p>
<p>Enter 3rd Purchase price : <input type="text" id='txtno6'></p>
<p>Enter 4th Purchase quantity: <input type="text" id='txtno7'></p>
<p>Enter 4th Purchase price : <input type="text" id='txtno8'></p>
<input type="button" id="btnsum" value="Calculte"
onclick="doadd();">
<p>Average Buying Price <input type="text" id="txtresult"/></p>
</div>
</body>
</html>
Heading
=======