Untitled

<html>
<head>
    <title>3D Printer Calculator</title>
</head>

<body bgcolor="#009FB7">

  <div id="content">
    <p id="demo" >$$$</p>
     <input type="text" name="length" id="lengthForm" value="Length of Filament" />
  <br>
  <button onclick="myFunction()">Enter</button>
  </div>

    <script>
  function myFunction() {
      var lengthValue = document.getElementById("lengthForm").value;
      document.getElementById("demo").innerHTML =  "This print will cost $" + (lengthValue * 0.00022513).toFixed(2) + " !";
    document.getElementById("lengthForm").innerHTML = "Length of Filament";
  }
  </script>

  <style>
    #content {
  padding: 100px;

}

#content button {
  margin: auto;
  display: block;

  background-color: #4CAF50; /* Green */
  border: none;
  border-radius: 12px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

#content input {
  margin: auto;
  display: block;
  text-align: center;
  height: 50px;
  width: 250px;
  font-size: 16pt;
}

#content p {
  text-align: center;
  font-size: 36pt;
  font-family: Verdana
}
  </style>
</body>
</html>