JSFiddle - React, Tailwind, and code Playground

by dav sev

HTML

<!DOCTYPE html>
<html>
<body>
width:
<input type="number" id="width" onkeyup="NumOfRolls()"/>
<hr />

length:
<input type="number" id="length" onkeyup="NumOfRolls()"/>

<p ></p>

<h2>rollsAmmount:</h2>
<p id="rollsAmmount"></p>

<h2>lengthByMeter:</h2>
<p id="lengthByMeter"></p>

<h2>finalPrice:</h2>
<p id="demo"></p>

</body>
</html>

JavaScript

function NumOfRolls() {
var RequstedWidth =  document.getElementById("width").value;
var RequstedLength =  document.getElementById("length").value;
console.log('RequstedWidth ', RequstedWidth);
var fixedRollWidth = 130;
var rollsAmmount = Math.ceil(RequstedWidth/fixedRollWidth);
var lengthByMeter = RequstedLength/100;
var priceUsdPerSquareMeter = 10;




var finalPrice = rollsAmmount * lengthByMeter * priceUsdPerSquareMeter;
 document.getElementById("rollsAmmount").innerHTML =rollsAmmount;
 document.getElementById("lengthByMeter").innerHTML = lengthByMeter;
 document.getElementById("demo").innerHTML = Math.ceil(finalPrice);
  }