Skip to content

Instantly share code, notes, and snippets.

@DougCrossDesign

DougCrossDesign/Javascript Concrete Calculator

Last active July 16, 2024 12:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DougCrossDesign/f6962a7f895a9d5ae86140926d2de10c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DougCrossDesign/f6962a7f895a9d5ae86140926d2de10c to your computer and use it in GitHub Desktop.
Download ZIP
Concrete Calculator
Raw
index.html
<div style="">
<div class="serving">
<table style="" height="100%" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="top">
<td>
<div id="navsite">
<ul>
<li id="input1"><a class="current" href="javascript:;" onclick="cur(this); sh('slabs','footings','columns','getit'); test('input1','input2','input3','input4');">Slabs</a></li>
<li id="input2"><a class="" href="javascript:;" onclick="cur(this); sh('footings','slabs','columns','getit'); test('input2','input1','input3','input4');">Footings</a></li>
<li id="input3"><a class="" href="javascript:;" onclick="cur(this); sh('columns','slabs','footings','getit'); test('input3','input2','input1','input4');">Columns</a></li>
</ul>
</div>
<div class="form-fields">
<div class="list on" id="slabs">
<form name="SlabCalculator">
<table>
<tbody><tr>
<td class="calc-fields">
<table border="0">
<tbody><tr>
<td align="left" class="label">Thickness</td>
<td align="left" class="field"><input name="Thickness" size="1" type="text"></td>
<td><em>inches</em></td>
</tr>
<tr>
<td align="left" class="label">Width</td>
<td align="left" class="field"><input name="Width" size="1" type="text"></td>
<td><em>feet</em></td>
</tr>
<tr>
<td align="left" class="label">Length</td>
<td align="left" class="field"><input name="Length" size="1" type="text"></td>
<td><em>feet</em></td>
</tr>
<tr class="btns" >
<td class="btn" align="left"><input value="Reset" onclick="hidebags('bagsone');" type="reset"></td>
<td class="btn" align="left"><input onclick="showbags('bagsone'); calculateSlabPour()" value="Calculate" type="button"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="2">
<div class="list" id="bagsone">
<table>
<tbody><tr>
<td align="left" class="label field">Cubic Yards <input name="CubicYards" size="3" type="text"></td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td colspan="3" align="left"><strong>How many Pre-Mix Concrete Bags</strong></td>
</tr>
<tr>
<td class="label field">40# Bags:<br><input name="Bags40" size="3" type="text"></td>
<td class="label field">60# Bags:<br><input name="Bags60" size="3" type="text"></td>
<td class="label field">80# Bags:<br><input name="Bags80" size="3" type="text"></td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</form>
</div>
<div class="list" id="footings">
<form name="FootingCalculator">
<table>
<tbody><tr>
<td>
<table border="0">
<tbody><tr>
<td align="left" class="label">Depth</td>
<td align="left" class="field"><input name="Depth" size="1" type="text"></td>
<td><em>inches</em></td>
</tr>
<tr>
<td align="left" class="label">Width</td>
<td align="left" class="field"><input name="Width" size="1" type="text"></td>
<td><em>inches</em></td>
</tr>
<tr>
<td align="left" class="label">Length</td>
<td align="left" class="field"><input name="Length" size="1" type="text"></td>
<td><em>feet</em></td>
</tr>
<tr>
<td align="left"><input value="Reset" onclick="hidebags('bagstwo');" type="reset"></td>
<td align="left"><input onclick="showbags('bagstwo'); calculateFootingPour()" value="Calculate" type="button"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="2">
<div class="list" id="bagstwo">
<table>
<tbody><tr>
<td align="left" class="label field">Cubic Yards <input name="CubicYards" size="3" type="text"></td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td colspan="3" align="left"><strong>How many Pre-Mix Concrete Bags</strong></td>
</tr>
<tr>
<td class="label field">40# Bags:<br><input name="Bags40" size="3" type="text"></td>
<td class="label field">60# Bags:<br><input name="Bags60" size="3" type="text"></td>
<td class="label field">80# Bags:<br><input name="Bags80" size="3" type="text"></td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</form>
</div>
<div class="list" id="columns">
<form name="ColumnCalculator">
<table>
<tbody><tr>
<td>
<table border="0">
<tbody><tr>
<td align="left" class="label">Diameter</td>
<td align="left" class="field"><input name="Diameter" size="1" type="text"></td>
<td><em>inches</em></td>
</tr>
<tr>
<td align="left" class="label">Height</td>
<td align="left" class="field"><input name="Height" size="1" type="text"></td>
<td><em>inches</em></td>
</tr>
<tr>
<td align="left"><input onclick="hidebags('bagsthree');" value="Reset" type="reset"></td>
<td colspan="2" align="left"><input onclick="showbags('bagsthree'); calculateColumnPour()" value="Calculate" type="button"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="2">
<tr>
<td colspan="2">
<div class="list" id="bagsthree">
<table>
<tbody><tr>
<td align="left" class="label field">Cubic Yards <input name="CubicYards" size="3" type="text"></td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td colspan="3" align="left"><strong>How many Pre-Mix Concrete Bags</strong></td>
</tr>
<tr>
<td class="label field">40# Bags:<br><input name="Bags40" size="3" type="text"></td>
<td class="label field">60# Bags:<br><input name="Bags60" size="3" type="text"></td>
<td class="label field">80# Bags:<br><input name="Bags80" size="3" type="text"></td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</form>
</div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
Raw
Javascript Concrete Calculator
Javascript Concrete Calculator
-------------------
Javascript built form based calculator for estimating the needed material for contractors to purchase and lay concrete at a project site.
Created for client site intended as a conversation starter for potential customers to the business and educational for budgeting purposes.
A [Pen](https://codepen.io/DougCrossDesign/pen/LkoJpR) by [Doug Cross](https://codepen.io/DougCrossDesign) on [CodePen](https://codepen.io).
[License](https://codepen.io/DougCrossDesign/pen/LkoJpR/license).
Raw
script.js
function cur(elem) {
var a = document.getElementsByTagName('a')
for (i = 0; i < a.length; i++) {
a[i].classList.remove('current')
}
elem.classList.add('current');
}
function sh(on, off, off1, off2) {
$(on).className='list on';
$(off).className='list';
$(off1).className='list';
$(off2).className='list';
}
function $(id) {
return document.getElementById(id);
}
function test (a, b, c, d) {
$(a).className='current';
$(b).className='noncurrent';
$(c).className='noncurrent';
$(d).className='noncurrent';
}
function sClick(name) {
}
function showbags(e) {
$(e).className='list on';
}
function hidebags(f) {
$(f).className='list';
}
//initialize
var idepth
var ithickness
var iwidth
var idiam
var iheight
var ilength = 1; ilength <= 3; ilength
var icubicyards
function calculateSlabPour()
{
var form = document.SlabCalculator;
if (!validateField(form.Thickness,"Please enter a number value in inches for the depth."))
return false;
if (!validateField(form.Width,"Please enter a number value in feet for the width."))
return false;
if (!validateField(form.Length,"Please enter a number value in feet for the length."))
return false;
//starting values
ithickness = form.Thickness.value
iwidth = form.Width.value;
ilength = form.Length.value;
icubicyards = "";
//massage floating point values
ithickness = ithickness / 12;
icubicyards = floatFix(ithickness * iwidth * ilength / 27, 2);
iBags40 = floatFix((icubicyards * 90), 1);
iBags60 = floatFix((icubicyards * 60), 1);
iBags80 = floatFix((icubicyards * 45), 1);
//assign
form.CubicYards.value = icubicyards;
form.Bags40.value = iBags40;
form.Bags60.value = iBags60;
form.Bags80.value = iBags80;
return true;
}
function calculateFootingPour()
{
var form = document.FootingCalculator;
if (!validateField(form.Depth,"Please enter a number value in inches for the depth."))
return false;
if (!validateField(form.Width,"Please enter a number value in inches for the width."))
return false;
if (!validateField(form.Length,"Please enter a number value in feet for the length."))
return false;
//starting values
idepth = form.Depth.value;
iwidth = form.Width.value;
ilength = form.Length.value;
icubicyards = "";
//massage floating point values
idepth = floatFix(idepth / 12, 2);
iwidth = floatFix(iwidth / 12, 2);
icubicyards = floatFix(((iwidth * idepth) * ilength) / 27, 2);
iBags40 = floatFix((icubicyards * 90), 1);
iBags60 = floatFix((icubicyards * 60), 1);
iBags80 = floatFix((icubicyards * 45), 1);
//assign
form.CubicYards.value = icubicyards;
form.Bags40.value = iBags40;
form.Bags60.value = iBags60;
form.Bags80.value = iBags80;
return true;
}
function calculateColumnPour()
{
var form = document.ColumnCalculator;
if (!validateField(form.Diameter,"Please enter a number value in inches for the diameter."))
return false;
if (!validateField(form.Height,"Please enter a number value in inches for the height."))
return false;
//starting values
idiam = form.Diameter.value;
iheight = form.Height.value;
icubicyards = "";
icubicyards = floatFix(((idiam / 2)*(idiam / 2) * Math.PI * iheight * .0000214334705),2);
iBags40 = floatFix((icubicyards * 90), 1);
iBags60 = floatFix((icubicyards * 60), 1);
iBags80 = floatFix((icubicyards * 45), 1);
//assign
form.CubicYards.value = icubicyards;
form.Bags40.value = iBags40;
form.Bags60.value = iBags60;
form.Bags80.value = iBags80;
return true;
}
function validateField(field, errormsg) {
var value = field.value;
if ((isNaN(value) == true) || (value == ''))
{
alert (errormsg);
field.value = '';
field.focus();
return false;
}
return true;
}
function floatFix(value, places)
{
outstring = Math.round(value*100)/100
return (outstring);
}
Raw
style.css
* {
padding:0;
margin:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
width:100%;
padding:0;
margin:0;
}
.forms{
top:24px;
position:relative;
}
#slabs, #footings, #columns{
width: 100%;
padding: 4% 0%;
margin: 0;
}
.form-img{
width:20%
}
.form-fields, .result-fields{
width: 100%;
text-align: left;
font-size: 1.25em;
line-height: 2em;
}
.form-fields table, .result-fields table{
width: 100% !important;
}
.form-fields table td, .result-fields table td{
padding: 1% 0% 1% 1%;
}
.diagram{ width: 20% !important; }
#bagsone table, #bagstwo table, #bagsthree table{
width:100%;
}
#bagsone td.field input, #bagsotwo td.field input, #bagsthree td.field input{
width:33.33%
}
#bagsone table td.field, #bagstwo table td.field, #bagsthree table td.field {
width: 25% !important;
display: inline-block;
}
.form-fields table td.label, .result-fields table td.label {
width: 10% !important;
padding-bottom: 2% !important;
}
.form-fields table td.field, .result-fields table td.field {
width: 75% !important;
}
.form-fields table td.field input, .result-fields table td.field input {
width: 80%;
padding: 0px 8%;
text-align:center;
margin-bottom: 20px;
font-size: 14px;
line-height: 50px;
color: #5f5f5f;
background-color: #eeeeee;
border: none;
border-radius: 0;
background-image: none;
webkit-transition: all 400ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
-moz-transition: all 400ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
-o-transition: all 400ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition: all 400ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
}
em{
top: -8%;
position: relative;
}
input[type="reset"], input[type="button"] {
font-weight: bold !important;
text-transform: uppercase;
color: #fff;
background-color: rgb(151, 14, 31);
line-height: 40px;
width: auto;
padding: 0px 30px;
margin: 0 auto;
border: none;
}
h1 {
margin:0;
font-size:1em;
text-align:center;
color:#333333;
}
form img{
width:80%;
height:auto;
}
a:link {
color:#036;
}
a:visited {
color:#369;
}
a:hover {
color:#39c;
}
a img {
border:0;
}
.left {
float:left;
margin-right:1em;
margin-bottom:5px;
}
.left p, .right p, .clear p {
margin:0;
}
.right {
float:right;
margin-left:1em;
margin-bottom:5px;
}
.clear {
clear:both;
margin-bottom:5px;
}
.imgborder img {
border:1px solid #036;
}
.small {
font-size:.8em;
}
.center {
text-align:center;
}
input {
text-align:right;
}
/*Show/Hide------------------------------------------------------*/
.serving {
clear:both;
width: 100%;
margin: 0px auto;
}
.serving table form{
background: #FFFFFF;
}
.serving .list {
display:none;
margin:10px;
}
.serving .on {
display:block;
}
.serving label {
color:#036;
text-decoration:underline;
cursor:pointer;
}
/* Nav---------------------------------------------------------*/
#navsite {
list-style:none;
padding:0;
margin: 0;
width:100%;
}
#navsite ul {
padding:0;
margin:0;
list-style:none;
display:block;
}
#navsite ul li a {
display:block;
float:left;
background:#181818;
text-decoration:none;
font-weight:200;
color:#ffffff !important;
line-height: 1em;
font-size:1em;
padding:1em .5em;
text-align:center;
text-transform:uppercase;
margin:0 auto;
width:30%;
border:1px #ffffff solid;
}
#navsite a:link, #navsite a:visited {
color:#000;
}
#navsite li a.current {
background: #970E1F !important;
}
#navsite li.current a {
color:#ffffff;
line-height: 1em;
font-size:1em;
text-transform:uppercase;
margin:0 auto;
background: #970E1F !important;
}
/* Search
--------------------------------------------------*/
#srchUtil .search-txt {
width:7em;
vertical-align:middle;
font-size: .8em;
}
#srchUtil .search-btn {
vertical-align:middle;
}
@concretecal
Copy link

concretecal commented Jul 16, 2024

That's great..! you can use our online concrete calculator for Free. For More Information contact us..! Thank You..!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment