# Adding a simple calculator to site with HTML & Javascript

## Recommended Posts

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!

• Replies 2
• Views 393
• Created

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>
<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;
</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>```

Email me if you have need any help (free, of course.). Answer within 24 hours.
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

• 2 weeks later...

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

#### Archived

This topic is now archived and is closed to further replies.

### News

×
×
• Create New...

#### Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

#### Hire a Designer

Stand out online with the help of an experienced designer or developer.