poojarsn/CalculateBlocksUsingJs.js

## CalculateBlocksUsingJs.js
<!DOCTYPE html>
<html>
<head><title>Study Hard for the Test</title></head>


<style>

  table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(5) {
  background-color: #dddddd;
}
</style>
<script>
function calculateTotalCostOfWoodenBlockType(unitCostOfBlock) {

  var numberOfBlock= document.getElementById("txtWoodenBlock").value;
  var totalCostOfBlock=numberOfBlock * unitCostOfBlock;
   document.getElementById("lblTotalCostOfWoodenBlock").textContent=numberOfBlock * unitCostOfBlock;
   CalculateTotalCostOfAllBlocks();


}

function calculateTotalCostOfPlasticBlock(unitCostOfBlock) {

    var numberOfBlock= document.getElementById("txtPlasticBlock").value;
  var totalCostOfBlock=numberOfBlock * unitCostOfBlock;
   document.getElementById("lblTotalCostOfPlasticBlock").textContent=numberOfBlock * unitCostOfBlock;
   CalculateTotalCostOfAllBlocks();
}

function calculateTotalCostOfRubberBlock(unitCostOfBlock) {
    var numberOfBlock= document.getElementById("txtRubberBlock").value;
  var totalCostOfBlock=numberOfBlock * unitCostOfBlock;
   document.getElementById("lblTotalCostOfRubberBlock").textContent=numberOfBlock * unitCostOfBlock;
   CalculateTotalCostOfAllBlocks();
}
function CalculateTotalCostOfAllBlocks()
{
  var costOfWoodenBlock=document.getElementById("lblTotalCostOfWoodenBlock").textContent;
     var costOfPlasticBlock=document.getElementById("lblTotalCostOfPlasticBlock").textContent;
      var costOfRubberBlock=document.getElementById("lblTotalCostOfRubberBlock").textContent;
    document.getElementById("lblTotalCostOfAllBlock").textContent= Number(costOfWoodenBlock) +Number(costOfPlasticBlock)+Number(costOfRubberBlock);
}

</script>
</head>
<body>


<h2>myName</h2>
<form>
<table>
  <tr>
    <th>Type of Blocks</th>
    <th>Number of Blocks</th>
    <th>Cost of each Block</th>
    <th>Total Cost</th>
  </tr>
  <tr>
    <td> <label for="wooden">Wooden Block:</label></td>
    <td>  <input oninput="calculateTotalCostOfWoodenBlockType(5)" type="text" id="txtWoodenBlock" name="Enter no. of wooden blocks"></td>
    <td>$ <label id="lblUnitCostOfWoodenBlock">5</label></td>
    <td><label id="lblTotalCostOfWoodenBlock"></label></td>

  </tr>

  <tr>
    <td> <label for="plastic">Plastic Block:</label></td>
    <td>  <input oninput="calculateTotalCostOfPlasticBlock(2)" type="text" id="txtPlasticBlock" name="Enter no. of Plastic blocks"></td>
    <td>$ <label id="lblUnitCostOfPlasticBlock">2</label></td>
    <td><label id="lblTotalCostOfPlasticBlock"></label></td>

  </tr>
   <tr>
    <td> <label for="Rubber">Rubber Block:</label></td>
    <td>  <input oninput="calculateTotalCostOfRubberBlock(4)" type="text" id="txtRubberBlock" name="Enter no. of Rubber blocks"></td>
    <td>$<label id="lblUnitCostOfRubberBlock">4</label></td>
    <td><label id="lblTotalCostOfRubberBlock"></label></td>

  </tr>
 <tr>
    <td> </td>
    <td> </td>
    <td> Total Cost of all blocks:</td>
    <td><label id="lblTotalCostOfAllBlock"></label></td>

  </tr>

</table>

</form>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head><title>Study Hard for the Test</title></head>


	<style>

	table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
	}

	td, th {
	border: 1px solid #dddddd;
	text-align: left;
	padding: 8px;
	}

	tr:nth-child(5) {
	background-color: #dddddd;
	}
	</style>
	<script>
	function calculateTotalCostOfWoodenBlockType(unitCostOfBlock) {

	var numberOfBlock= document.getElementById("txtWoodenBlock").value;
	var totalCostOfBlock=numberOfBlock * unitCostOfBlock;
	document.getElementById("lblTotalCostOfWoodenBlock").textContent=numberOfBlock * unitCostOfBlock;
	CalculateTotalCostOfAllBlocks();


	}

	function calculateTotalCostOfPlasticBlock(unitCostOfBlock) {

	var numberOfBlock= document.getElementById("txtPlasticBlock").value;
	var totalCostOfBlock=numberOfBlock * unitCostOfBlock;
	document.getElementById("lblTotalCostOfPlasticBlock").textContent=numberOfBlock * unitCostOfBlock;
	CalculateTotalCostOfAllBlocks();
	}

	function calculateTotalCostOfRubberBlock(unitCostOfBlock) {
	var numberOfBlock= document.getElementById("txtRubberBlock").value;
	var totalCostOfBlock=numberOfBlock * unitCostOfBlock;
	document.getElementById("lblTotalCostOfRubberBlock").textContent=numberOfBlock * unitCostOfBlock;
	CalculateTotalCostOfAllBlocks();
	}
	function CalculateTotalCostOfAllBlocks()
	{
	var costOfWoodenBlock=document.getElementById("lblTotalCostOfWoodenBlock").textContent;
	var costOfPlasticBlock=document.getElementById("lblTotalCostOfPlasticBlock").textContent;
	var costOfRubberBlock=document.getElementById("lblTotalCostOfRubberBlock").textContent;
	document.getElementById("lblTotalCostOfAllBlock").textContent= Number(costOfWoodenBlock) +Number(costOfPlasticBlock)+Number(costOfRubberBlock);
	}

	</script>
	</head>
	<body>



	<h2>myName</h2>
	<form>
	<table>
	<tr>
	<th>Type of Blocks</th>
	<th>Number of Blocks</th>
	<th>Cost of each Block</th>
	<th>Total Cost</th>
	</tr>
	<tr>
	<td> <label for="wooden">Wooden Block:</label></td>
	<td> <input oninput="calculateTotalCostOfWoodenBlockType(5)" type="text" id="txtWoodenBlock" name="Enter no. of wooden blocks"></td>
	<td>$ <label id="lblUnitCostOfWoodenBlock">5</label></td>
	<td><label id="lblTotalCostOfWoodenBlock"></label></td>

	</tr>

	<tr>
	<td> <label for="plastic">Plastic Block:</label></td>
	<td> <input oninput="calculateTotalCostOfPlasticBlock(2)" type="text" id="txtPlasticBlock" name="Enter no. of Plastic blocks"></td>
	<td>$ <label id="lblUnitCostOfPlasticBlock">2</label></td>
	<td><label id="lblTotalCostOfPlasticBlock"></label></td>

	</tr>
	<tr>
	<td> <label for="Rubber">Rubber Block:</label></td>
	<td> <input oninput="calculateTotalCostOfRubberBlock(4)" type="text" id="txtRubberBlock" name="Enter no. of Rubber blocks"></td>
	<td>$<label id="lblUnitCostOfRubberBlock">4</label></td>
	<td><label id="lblTotalCostOfRubberBlock"></label></td>

	</tr>
	<tr>
	<td> </td>
	<td> </td>
	<td> Total Cost of all blocks:</td>
	<td><label id="lblTotalCostOfAllBlock"></label></td>

	</tr>

	</table>

	</form>



	</body>
	</html>