Adding a simple calculator to site with HTML & Javascript

I need a cubic yard calculator on my site and have found the code that I want to use here: https://codepen.io/dwill/pen/WqwGeG

I am just trying to figure out how to put the JS code onto my Squarespace site. I can put in the HTML into a code block fine but then obviously the calculation doesn't work without the JS.

How do I put the JS code into my site and link it to the HTML code block?

Or if there is an easier built-for-you way of doing this please let me know!

Add a Code Block > Paste this code

<h1>Construction Materials Calculator</h1>
<p>This calculator will round up in 1/4 cubic yard increments:</p>
<form name="volcalc">
	<fieldset>
	    <legend>Enter your dimensions</legend>
	    <label class="field_name">Enter Length (Ft)</label>
	    <input name="length" class="field" onkeyup="calc();" type="text" />
	    <br /><br />
	    <label class="field_name">Enter Width (Ft)</label>
	    <input name="width" class="field" onkeyup="calc();" type="text" />
	    <br /><br />
	    <label class="field_name">Enter Depth (In)</label>
	    <input name="depth" class="field" onkeyup="calc();" type="text" />
	    <br />
	</fieldset>

	<fieldset>
	    <legend>Total</legend>
	    <label class="field_name">Total yards needed</label>
	    <input name="vol" class="field_total" type="text" />
	</fieldset>

	</form>	

<h2>How to Use this Construction Materials Calculator</h2>

<p>A cubic yard is the volume of material which fits in a space one yard wide by one yard deep by one yard high. Cubic yards are used to measure materials ranging from concrete to mulch for your garden.</p>

<ul>
<li><strong>Coverage Area Length</strong> – First you need to carefully measure the length of your project's coverage area. The calculator requires this measurement to be taken in Feet (ft). Double check your measurement, then enter that number.</li>
<li><strong>Coverage Area Width</strong> – Next, enter the width of your coverage area into the calculator. Just like the length, this number also needs to be in Feet.</li>
<li><strong>Coverage Area Depth</strong> – The final number the calculator will need, is the depth. However, this number will need to be supplied in Inches (In). Enter this number into the 3rd box and your calculation will then be complete.</li>
</ul>
<style>
  fieldset{border: 1px solid #214261;}

input[type="text"] {color: #214261;font-size: 16px;
padding: 5px;}
</style>
<script>
  function calc() {
		  /*info:
		    1 yard   = 3 feet  = 36 inches
		    1 foot   = 12 inches
		    N feet   = (N/3) yards
		    N inches = (N/12) feet
		    N inches = (N/36) yards
		  */

		  //get inputs
		  var l = document.volcalc.length.value; //in feet
		  var w = document.volcalc.width.value; //in feet
		  var d = document.volcalc.depth.value; //in inches

		  //convert length feet to yards
		  l = l/3;

		  //convert width feet to yards
		  w = w/3;

		  //convert depth inches to yards
		  d = d/36;

		  //calculate volume in yards
		  var v = l * w * d;

		  // round numbers up to nearest whole number
		  // var v = Math.ceil( v );

		  // round to 2 decimal places
		  // var v = Math.round( v * 100) / 100;

		  // round numbers in increments of .25
		  var v = Math.round( v * 4 ) / 4 ;

		  document.volcalc.vol.value = v; //in yards

}
</script>

@tuanphan that worked perfectly, thank you so much!!