Volume to Tons

Calculator for driveways

by Charles Moon

HTML

<body>
<div class="toolform">
  <p>
    <input type="Text" id="width" name="width" placeholder="Enter Width of Driveway">
    <br>FEET</p>
  <p>
    <input type="Text" id="length" name="length" size="4" placeholder="Enter Length of Driveway">
    <br>FEET</p>
  <p>
    <input type="Text" id="depth" name="depth" size="4" placeholder="Enter Depth of Driveway">
    <br>INCHES</p>
  <input type="button" name="calculate" id="volume2" size="4" onClick="calculateTons()" value="calculate">
  <p><span class="toolresult"><input type="Text" name="volume" disabled="disabled" id="volume" size="4" value=" "></span></p>
</div>

</body>

CSS

.toolform input[type="text"] {
  width: 48.2%;
  font-size: 18px;
  color: #999;
  background: #f3f3f3;
  padding: 10px 15px;
  outline: none;
  border: solid;
  border-width: thin;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
}

.toolform {
  font-size: 11px;
  text-align: center;
  padding-top: 5em;
  padding-bottom: 2em;
  background-color: #DCD9C2;
  font-family: 'Open Sans', sans-serif;
}

.toolform p {
  color: #666;
}

.toolform input[type=button] {
  color: #414141;
  padding: 10px 15px;
  font-size: 18px;
  cursor: pointer;
  font-weight: 700;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border: 2px solid #282828;
  background: #fff;
}

.toolform input[type=button]:hover {
  background: #45b887;
  border: 2px solid #fff;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -ms-transition: 0.5s all;
  -o-transition: 0.5s all;
}

.toolresult input[type=text] {
  background: #DCD9C2;
  color: #000;
  border-color: #999;
  font-weight: 600;
  text-align: center;
}

JavaScript

function calculateTons() {
  var width = +document.getElementById("width").value;
  var length = +document.getElementById("length").value;
  var depth = +document.getElementById("depth").value;
  var volume = (((width * length * (depth / 12)) / 27) * 1.75).toFixed(2) + " " + "tons";
  document.getElementById("volume").value = volume;
}