3 Quick Tools — Tube Weight · Square & Rectangle Diagonal

HTML Script

<!doctype html>

<head>

<title>3 Quick Tools — Tube Weight · Square & Rectangle Diagonal</title>

<style>

:root{

--bg:#0f1724; --card:#0b1220; --accent:#ff6b6b; --muted:#a9b3c2; --glass: rgba(255,255,255,0.03);

--radius:14px; --pad:16px;

}

*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,Arial}

body{margin:0;background:linear-gradient(180deg,#071229 0%, #081427 60%);color:#e6eef8;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:20px}

.wrap{width:100%;max-width:980px}

header{display:flex;align-items:center;gap:12px;margin-bottom:18px}

header .logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#ff9a6b);display:flex;align-items:center;justify-content:center;font-weight:700;color:#061124}

h1{font-size:18px;margin:0}

p.lead{margin:4px 0 0;color:var(--muted);font-size:13px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

@media(max-width:900px){.grid{grid-template-columns:1fr}}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:var(--pad);border-radius:var(--radius);box-shadow:0 6px 18px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}

label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}

input[type=text], input[type=number], select{width:100%;padding:10px;border-radius:10px;border:none;background:var(--glass);color:inherit;font-size:15px}

.row{display:flex;gap:10px}

.row .col{flex:1}

.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:none;background:var(--accent);color:#061124;font-weight:600;cursor:pointer}

.mutebtn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

.result{margin-top:12px;padding:10px;border-radius:10px;background:rgba(255,255,255,0.02);font-weight:600}

small.hint{color:#97a6b8}

.footer{margin-top:18px;color:var(--muted);font-size:13px;text-align:center}

.select-inline{display:flex;gap:8px;align-items:center}

.unit{min-width:110px}

.density-grid{display:flex;gap:8px;flex-wrap:wrap}

.density-grid button{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--muted);cursor:pointer}

.density-grid button.active{background:rgba(255,255,255,0.04);color:var(--accent);border-color:rgba(255,255,255,0.06)}

.note{font-size:12px;color:var(--muted);margin-top:8px}

</style>

</head>

<body>

<div>

<h1>3 Quick Tools — Tube Weight · Square & Rectangle Diagonal</h1>

<p class="lead">Mobile-friendly HTML/CSS/JS tools. Enter values, pick units — results update instantly.</p>

</div>

</header>

<h3>Tube Weight Calculator</h3>

<p class="note">Hollow circular tube — provide Outer Diameter, Wall Thickness and Length. Pick material or set custom density (g/cm³).</p>

<label>Outer Diameter (OD)</label>

</div>

<label>Wall Thickness</label>

</div>

<label>Length</label>

</div>

<label>Material / Density</label>

<button data-density="7.93" class="active">Austenitic (SS304) — 7.93 g/cm³</button>

<button data-density="7.70">Ferritic (SS430) — 7.70 g/cm³</button>

<button data-density="7.75">Martensitic (SS410) — 7.75 g/cm³</button>

<button data-density="0" id="customBtn">Custom</button>

</div>

<button id="calcTube" class="btn">Calculate Weight</button>

<button id="resetTube" class="mutebtn">Reset</button>

</div>

<div class="result" id="tubeResult">Weight: —</div>

<small class="hint">Note: Density values are approximate (g/cm³). 1 g/cm³ = 1000 kg/m³.</small>

</div>

<h3>Square — Diagonal</h3>

<label>Side length</label>

</div>

<button id="calcSquare" class="btn">Get Diagonal</button>

<button id="resetSquare" class="mutebtn">Reset</button>

</div>

<div class="result" id="squareResult">Diagonal: —</div>

</div>

<h3>Rectangle — Diagonal</h3>

<label>Width</label>

</div>

<label style="margin-top:8px">Height</label>

</div>

<button id="calcRect" class="btn">Get Diagonal</button>

<button id="resetRect" class="mutebtn">Reset</button>

</div>

<div class="result" id="rectResult">Diagonal: —</div>

</div>

<div class="footer">Copy Right 2025-2026 , Created By Syed Javed Akhter</div>

</div>

// Utility: convert unit values to millimeters

function toMM(value, unit){

value = Number(value);

if(!isFinite(value)) return NaN;

switch(unit){

case 'mm': return value;

case 'cm': return value*10;

case 'm': return value*1000;

case 'in': return value*25.4;

case 'ft': return value*304.8;

default: return value;

}

// Tube calc

const densityBtns = document.getElementById('densityBtns');

const densityButtons = densityBtns.querySelectorAll('button');

const customDensityInput = document.getElementById('customDensity');

const customBtn = document.getElementById('customBtn');

let selectedDensity = 7.93; // default g/cm3 (Austenitic SS304)

densityButtons.forEach(b=>{

b.addEventListener('click', ()=>{

densityButtons.forEach(x=>x.classList.remove('active'));

b.classList.add('active');

if(b.dataset.density && Number(b.dataset.density)>0){

selectedDensity = Number(b.dataset.density);

customDensityInput.style.display='none';

customDensityInput.value='';

} else { // custom

selectedDensity = null;

customDensityInput.style.display='block';

setTimeout(()=>customDensityInput.focus(),50);

}

});

document.getElementById('calcTube').addEventListener('click', ()=>{

const od = Number(document.getElementById('odVal').value);

const odUnit = document.getElementById('odUnit').value;

const thk = Number(document.getElementById('thkVal').value);

const thkUnit = document.getElementById('thkUnit').value;

const len = Number(document.getElementById('lenVal').value);

const lenUnit = document.getElementById('lenUnit').value;

if(!od || !thk || !len){

return showTube('Please enter OD, thickness and length.');

}

// convert to mm

const od_mm = toMM(od, odUnit);

const thk_mm = toMM(thk, thkUnit);

const len_mm = toMM(len, lenUnit);

const ro = od_mm/2;

const ri = ro - thk_mm;

if(ri<=0){ return showTube('Thickness too large — inner radius ≤ 0.'); }

// select density

let dens = selectedDensity;

if(!dens){

const cd = Number(customDensityInput.value);

if(!cd || cd<=0) return showTube('Enter a valid custom density (g/cm³).');

dens = cd;

}

// Area difference in mm^2

const area_mm2 = Math.PI*(ro*ro - ri*ri);

const vol_mm3 = area_mm2 * len_mm; // mm^3

const vol_cm3 = vol_mm3 / 1000; // 1 cm^3 = 1000 mm^3

const mass_g = vol_cm3 * dens; // grams

const mass_kg = mass_g / 1000;

// also show volume and mass in grams

// show density conversion to kg/m3 for clarity

const dens_kg_m3 = (dens * 1000).toFixed(0);

showTube(`Weight: ${mass_kg.toFixed(4)} kg (${mass_g.toFixed(1)} g) — Volume: ${vol_cm3.toFixed(2)} cm³ — Density: ${dens} g/cm³ (${dens_kg_m3} kg/m³)`);

});

function showTube(text){ document.getElementById('tubeResult').textContent = text; }

document.getElementById('resetTube').addEventListener('click', ()=>{

['odVal','thkVal','lenVal'].forEach(id=>document.getElementById(id).value='');

customDensityInput.value=''; customDensityInput.style.display='none';

densityButtons.forEach(x=>x.classList.remove('active'));

densityButtons[0].classList.add('active'); selectedDensity=7.93;

showTube('Weight: —');

});

// Square calc

document.getElementById('calcSquare').addEventListener('click', ()=>{

const side = Number(document.getElementById('sqSide').value);

const unit = document.getElementById('sqUnit').value;

if(!side) return document.getElementById('squareResult').textContent = 'Enter side length.';

const side_mm = toMM(side, unit);

const diag_mm = side_mm * Math.SQRT2;

const display = formatWithUnit(diag_mm, unit);

document.getElementById('squareResult').textContent = `Diagonal: ${display}`;

});

document.getElementById('resetSquare').addEventListener('click', ()=>{document.getElementById('sqSide').value='';document.getElementById('squareResult').textContent='Diagonal: —';});

// Rectangle calc

document.getElementById('calcRect').addEventListener('click', ()=>{

const w = Number(document.getElementById('rectW').value);

const h = Number(document.getElementById('rectH').value);

const unit = document.getElementById('rectUnit').value;

if(!w || !h) return document.getElementById('rectResult').textContent='Enter width and height.';

const w_mm = toMM(w, unit);

const h_mm = toMM(h, unit);

const diag_mm = Math.sqrt(w_mm*w_mm + h_mm*h_mm);

const display = formatWithUnit(diag_mm, unit);

document.getElementById('rectResult').textContent = `Diagonal: ${display}`;

});

document.getElementById('resetRect').addEventListener('click', ()=>{document.getElementById('rectW').value='';document.getElementById('rectH').value='';document.getElementById('rectResult').textContent='Diagonal: —';});

// Format mm back to chosen unit for display

function formatWithUnit(value_mm, originalUnit){

let val = value_mm;

let unitLabel = 'mm';

switch(originalUnit){

case 'mm': val = value_mm; unitLabel='mm'; break;

case 'cm': val = value_mm/10; unitLabel='cm'; break;

case 'm': val = value_mm/1000; unitLabel='m'; break;

case 'in': val = value_mm/25.4; unitLabel='in'; break;

}

if(Math.abs(val) >= 1000) return `${(val).toFixed(3)} ${unitLabel}`;

if(Math.abs(val) >= 1) return `${(val).toFixed(2)} ${unitLabel}`;

return `${(val).toFixed(4)} ${unitLabel}`;

}

// initialize

densityButtons[0].classList.add('active');

</script>

</body>

</html>

Free Best Themes

Ads Area

3 Quick Tools — Tube Weight · Square & Rectangle Diagonal

Top Post Ad

Below Post Ad

Ads Area

Ads Area

Popular Posts

Redirect Link Code For Blogger

Fake Video Player Script For Blogger

Money Management For Students

Join Us Script Paid $15

Age Verification Codes

Contact Us

Contact form

Free Best Themes

Ads Area

3 Quick Tools — Tube Weight · Square & Rectangle Diagonal

You may like these posts

Top Post Ad

Below Post Ad

Ads Area

Contact form