/* Encapsulated Custom styles to ensure basic elements are styled consistently within the calculator */
/* These styles are prefixed with #bbs-calculator-wrapper to prevent global conflicts */
#bbs-calculator-wrapper {
font-family: sans-serif; /* Fallback to generic sans-serif for the calculator itself */
box-sizing: border-box; /* Ensure padding and border are included in element’s total width/height */
/* Removed min-h-screen, flex, flex-col, items-center from here to avoid impacting Blogger layout */
}
#bbs-calculator-wrapper .input-group {
margin-bottom: 1rem; /* Add spacing between input groups */
}
#bbs-calculator-wrapper .input-group label {
font-weight: 500;
margin-bottom: 4px;
display: block; /* Ensure label takes full width */
color: #374151; /* Darker gray for labels */
}
#bbs-calculator-wrapper .input-group input {
border: 1px solid #d1d5db;
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
width: 100%;
box-sizing: border-box; /* Include padding and border in the element’s total width and height */
color: #1f2937; /* Dark text for inputs */
}
#bbs-calculator-wrapper .table-header {
background-color: #f3f4f6;
}
#bbs-calculator-wrapper .table-row:nth-child(even) {
background-color: #f9fafb;
}
/* Responsive table styles, strictly scoped to the container */
@media (max-width: 768px) {
#bbs-calculator-wrapper table,
#bbs-calculator-wrapper thead,
#bbs-calculator-wrapper tbody,
#bbs-calculator-wrapper th,
#bbs-calculator-wrapper td,
#bbs-calculator-wrapper tr {
display: block;
}
#bbs-calculator-wrapper thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#bbs-calculator-wrapper tr {
border: 1px solid #ccc;
margin-bottom: 0.5rem;
border-radius: 0.375rem;
overflow: hidden;
}
#bbs-calculator-wrapper td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
text-align: right;
}
#bbs-calculator-wrapper td:last-child {
border-bottom: 0;
}
#bbs-calculator-wrapper td:before {
position: absolute;
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
color: #4b5563;
}
/* Labeling the cells for small screens */
#bbs-calculator-wrapper td:nth-of-type(1):before { content: “Sr. No.”; }
#bbs-calculator-wrapper td:nth-of-type(2):before { content: “Bar Type”; }
#bbs-calculator-wrapper td:nth-of-type(3):before { content: “Diameter (mm)”; }
#bbs-calculator-wrapper td:nth-of-type(4):before { content: “No. of Bars”; }
#bbs-calculator-wrapper td:nth-of-type(5):before { content: “Shape”; }
#bbs-calculator-wrapper td:nth-of-type(6):before { content: “Cutting Length (mm)”; }
#bbs-calculator-wrapper td:nth-of-type(7):before { content: “Total Length (m)”; }
#bbs-calculator-wrapper td:nth-of-type(8):before { content: “Wt/m (kg)”; }
#bbs-calculator-wrapper td:nth-of-type(9):before { content: “Total Wt (kg)”; }
}

Beam Bar Bending Schedule Calculator

civilnotess.com

Created by Parag Pal

// Utility function to display messages
function showMessage(msg, type = ‘info’) {
const messageDiv = document.getElementById(‘message’);
messageDiv.textContent = msg;
messageDiv.classList.remove(‘hidden’, ‘bg-blue-100’, ‘text-blue-800’, ‘bg-red-100’, ‘text-red-800’, ‘bg-green-100’, ‘text-green-800’);
if (type === ‘error’) {
messageDiv.classList.add(‘bg-red-100’, ‘text-red-800’);
} else if (type === ‘success’) {
messageDiv.classList.add(‘bg-green-100’, ‘text-green-800’);
} else {
messageDiv.classList.add(‘bg-blue-100’, ‘text-blue-800’);
}
}

// Utility function to calculate weight per meter
const calculateWeightPerMeter = (diameter) => {
return (diameter * diameter) / 162; // D^2 / 162
};

// Function to generate SVG for bar shapes
const BarShapeSVG = (type, diameter, length, bendAngle = 45, bentUpLength = 0) => {
const strokeWidth = 2;
const scale = 0.1; // Scale down for display
const scaledLength = length * scale; // Total cutting length scaled for SVG

let svgPath = ”;
let viewBox = ‘0 0 200 100’; // Default viewBox

switch (type) {
case ‘Main Bar (Bottom)’:
case ‘Main Bar (Top)’:
svgPath = `M 10 50 H ${10 + scaledLength}`;
viewBox = `0 0 ${20 + scaledLength} 100`;
break;
case ‘Stirrup’:
const visualStirrupWidth = 50;
const visualStirrupHeight = 30;
const hookLength = 10;
svgPath = `M ${hookLength} 10 ` +
`H ${hookLength + visualStirrupWidth} ` +
`V ${10 + visualStirrupHeight} ` +
`H ${hookLength} ` +
`V 10 ` +
`M ${hookLength} 10 L 0 0 ` +
`M ${hookLength + visualStirrupWidth} 10 L ${hookLength + visualStirrupWidth + hookLength} 0`;
viewBox = `0 0 ${visualStirrupWidth + 2 * hookLength + 10} ${visualStirrupHeight + 20}`;
break;
case ‘Bent-up Bar’:
const visualBentUpHeight = bentUpLength * scale;
const visualHorizontalProjection = (bentUpLength * scale) / Math.tan(bendAngle * Math.PI / 180);
const effectiveVisualHorizontalProjection = Math.min(visualHorizontalProjection, scaledLength / 4);

const straightEndRatio = 0.2;
const middleStraightRatio = 0.4;

const straightEndSegment = scaledLength * straightEndRatio;
const middleStraightSegment = scaledLength * middleStraightRatio;

const s1 = Math.max(0, straightEndSegment);
const s2 = Math.max(0, effectiveVisualHorizontalProjection);
const s3 = Math.max(0, middleStraightSegment);
const s4 = Math.max(0, effectiveVisualHorizontalProjection);
const s5 = Math.max(0, straightEndSegment);

const start_x = 10;
const start_y = 50;
const top_y = start_y – visualBentUpHeight;

svgPath = `M ${start_x} ${start_y} ` +
`L ${start_x + s1} ${start_y} ` +
`L ${start_x + s1 + s2} ${top_y} ` +
`L ${start_x + s1 + s2 + s3} ${top_y} ` +
`L ${start_x + s1 + s2 + s3 + s4} ${start_y} ` +
`L ${start_x + s1 + s2 + s3 + s4 + s5} ${start_y}`;

viewBox = `0 0 ${start_x + s1 + s2 + s3 + s4 + s5 + 10} ${start_y + 10}`;
break;
default:
svgPath = ”;
}

return ``;
};

// Main calculation function
function calculateBBS() {
const beamWidth = parseFloat(document.getElementById(‘beamWidth’).value);
const beamDepth = parseFloat(document.getElementById(‘beamDepth’).value);
const beamLength = parseFloat(document.getElementById(‘beamLength’).value);
const clearCover = parseFloat(document.getElementById(‘clearCover’).value);
const mainBarTopDia = parseFloat(document.getElementById(‘mainBarTopDia’).value);
const mainBarTopNum = parseFloat(document.getElementById(‘mainBarTopNum’).value);
const mainBarBottomDia = parseFloat(document.getElementById(‘mainBarBottomDia’).value);
const mainBarBottomNum = parseFloat(document.getElementById(‘mainBarBottomNum’).value);
const stirrupDia = parseFloat(document.getElementById(‘stirrupDia’).value);
const stirrupSpacing = parseFloat(document.getElementById(‘stirrupSpacing’).value);
const bentUpBarDia = parseFloat(document.getElementById(‘bentUpBarDia’).value);
const bentUpBarNum = parseFloat(document.getElementById(‘bentUpBarNum’).value);
const bentUpBarBendAngle = parseFloat(document.getElementById(‘bentUpBarBendAngle’).value);
const bentUpBarProjection = parseFloat(document.getElementById(‘bentUpBarProjection’).value);

const data = [];
let totalWeight = 0;

// 1. Main Bars (Bottom)
const mainBarBottomLength = beamLength – (2 * clearCover);
const mainBarBottomWeightPerMeter = calculateWeightPerMeter(mainBarBottomDia);
const mainBarBottomTotalLength = (mainBarBottomLength * mainBarBottomNum) / 1000; // in meters
const mainBarBottomTotalWeight = mainBarBottomTotalLength * mainBarBottomWeightPerMeter;
data.push({
id: ‘main_bottom’,
type: ‘Main Bar (Bottom)’,
diameter: mainBarBottomDia,
number: mainBarBottomNum,
shape: ‘straight’,
cuttingLength: mainBarBottomLength.toFixed(2),
totalLength: mainBarBottomTotalLength.toFixed(2),
weightPerMeter: mainBarBottomWeightPerMeter.toFixed(3),
totalWeight: mainBarBottomTotalWeight.toFixed(3),
});
totalWeight += mainBarBottomTotalWeight;

// 2. Main Bars (Top)
const mainBarTopLength = beamLength – (2 * clearCover);
const mainBarTopWeightPerMeter = calculateWeightPerMeter(mainBarTopDia);
const mainBarTopTotalLength = (mainBarTopLength * mainBarTopNum) / 1000; // in meters
const mainBarTopTotalWeight = mainBarTopTotalLength * mainBarTopWeightPerMeter;
data.push({
id: ‘main_top’,
type: ‘Main Bar (Top)’,
diameter: mainBarTopDia,
number: mainBarTopNum,
shape: ‘straight’,
cuttingLength: mainBarTopLength.toFixed(2),
totalLength: mainBarTopTotalLength.toFixed(2),
weightPerMeter: mainBarTopWeightPerMeter.toFixed(3),
totalWeight: mainBarTopTotalWeight.toFixed(3),
});
totalWeight += mainBarTopTotalWeight;

// 3. Stirrups
const stirrupA = beamWidth – (2 * clearCover) – stirrupDia;
const stirrupB = beamDepth – (2 * clearCover) – stirrupDia;
const hookLength = 10 * stirrupDia; // 10D
const bendDeduction90 = 2 * stirrupDia; // 2D for 90-degree bend
const bendDeduction135 = 3 * stirrupDia; // 3D for 135-degree bend (for hooks)

const stirrupCuttingLength = (2 * (stirrupA + stirrupB) + 2 * hookLength – (2 * bendDeduction90) – (2 * bendDeduction135));

const numberOfStirrups = Math.ceil(beamLength / stirrupSpacing) + 1;
const stirrupWeightPerMeter = calculateWeightPerMeter(stirrupDia);
const stirrupTotalLength = (stirrupCuttingLength * numberOfStirrups) / 1000; // in meters
const stirrupTotalWeight = stirrupTotalLength * stirrupWeightPerMeter;
data.push({
id: ‘stirrup’,
type: ‘Stirrup’,
diameter: stirrupDia,
number: numberOfStirrups,
shape: ‘stirrup’,
cuttingLength: stirrupCuttingLength.toFixed(2),
totalLength: stirrupTotalLength.toFixed(2),
weightPerMeter: stirrupWeightPerMeter.toFixed(3),
totalWeight: stirrupTotalWeight.toFixed(3),
});
totalWeight += stirrupTotalWeight;

// 4. Bent-up Bars
if (bentUpBarNum > 0) {
const angleRad = bentUpBarBendAngle * Math.PI / 180;
const effectiveBeamLength = beamLength – (2 * clearCover);

const diagonalLength = bentUpBarProjection / Math.sin(angleRad);
const horizontalProjectionOfBend = bentUpBarProjection / Math.tan(angleRad);

const bendDeduction45 = 1 * bentUpBarDia; // 1D for 45-degree bend
const totalBendDeduction = 2 * bendDeduction45;

const bentUpCuttingLength = effectiveBeamLength + (2 * (diagonalLength – horizontalProjectionOfBend)) – totalBendDeduction;

const bentUpWeightPerMeter = calculateWeightPerMeter(bentUpBarDia);
const bentUpTotalLength = (bentUpCuttingLength * bentUpBarNum) / 1000; // in meters
const bentUpTotalWeight = bentUpTotalLength * bentUpWeightPerMeter;
data.push({
id: ‘bent_up’,
type: ‘Bent-up Bar’,
diameter: bentUpBarDia,
number: bentUpBarNum,
shape: ‘bent-up’,
cuttingLength: bentUpCuttingLength.toFixed(2),
totalLength: bentUpTotalLength.toFixed(2),
weightPerMeter: bentUpWeightPerMeter.toFixed(3),
totalWeight: bentUpTotalWeight.toFixed(3),
});
totalWeight += bentUpTotalWeight;
}

renderBBS(data);
showMessage(`Total Steel Weight: ${totalWeight.toFixed(3)} kg`, ‘info’);
}

// Function to render BBS data into the table
function renderBBS(bbsData) {
const tableBody = document.getElementById(‘bbsTableBody’);
tableBody.innerHTML = ”; // Clear previous data
if (bbsData.length > 0) {
document.getElementById(‘bbsTableContainer’).classList.remove(‘hidden’);
} else {
document.getElementById(‘bbsTableContainer’).classList.add(‘hidden’);
}

bbsData.forEach((bar, index) => {
const row = tableBody.insertRow();
row.className = ‘table-row’;

row.insertCell().textContent = index + 1;
row.insertCell().textContent = bar.type;
row.insertCell().textContent = bar.diameter;
row.insertCell().textContent = bar.number;

const shapeCell = row.insertCell();
shapeCell.innerHTML = BarShapeSVG(bar.type, bar.diameter, parseFloat(bar.cuttingLength), parseFloat(document.getElementById(‘bentUpBarBendAngle’).value), parseFloat(document.getElementById(‘bentUpBarProjection’).value));

row.insertCell().textContent = bar.cuttingLength;
row.insertCell().textContent = bar.totalLength;
row.insertCell().textContent = bar.weightPerMeter;
row.insertCell().textContent = bar.totalWeight;
});
}

// Event Listeners
document.addEventListener(‘DOMContentLoaded’, () => {
document.getElementById(‘calculateBBSBtn’).addEventListener(‘click’, calculateBBS);

// Initial calculation on page load
calculateBBS();
});