An engineering calculated

<!DOCTYPE html>

<head>

<style>

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {

–crt-green: #00ff41;

–crt-dim: #00c032;

–crt-dark: #003a0f;

–crt-bg: #020c03;

–amber: #ffb000;

–amber-dim: #cc8a00;

–red: #ff3a3a;

–blue: #00cfff;

–panel-bg: #0a0f0a;

–border: #1a2e1a;

–bezel: #1c1f1c;

}

html, body {

height: 100%;

background: #0e110e;

display: flex;

align-items: center;

justify-content: center;

font-family: ‘IBM Plex Mono’, monospace;

overflow: hidden;

}

body::before {

content: ”;

position: fixed; inset: 0;

background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);

pointer-events: none; z-index: 9999;

}

body::after {

content: ”;

position: fixed; inset: 0;

background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.7) 100%);

pointer-events: none; z-index: 9998;

}

/* BEZEL */

.bezel {

background: linear-gradient(145deg, #252825, #161916, #1e221e);

border-radius: 10px;

padding: 22px 18px 18px;

box-shadow:

0 0 0 2px #2e322e,

0 0 0 4px #111,

0 25px 80px rgba(0,0,0,0.9),

inset 0 1px 0 rgba(255,255,255,0.05);

width: 560px;

position: relative;

}

.bezel-label {

position: absolute;

top: 7px; left: 50%; transform: translateX(-50%);

font-family: ‘Orbitron’, monospace;

font-size: 8px; font-weight: 700;

letter-spacing: 6px; color: #2e342e;

white-space: nowrap;

}

/* SCREEN */

.screen-surround {

background: #070c07;

border-radius: 5px; padding: 3px;

box-shadow: inset 0 0 24px rgba(0,0,0,0.9), 0 0 20px rgba(0,255,65,0.04);

margin-bottom: 14px;

}

.screen {

background: var(–crt-bg);

border-radius: 3px;

padding: 13px 15px 10px;

position: relative; overflow: hidden;

min-height: 148px;

}

.screen::before {

content: ”;

position: absolute; inset: 0;

background: radial-gradient(ellipse at 50% 0%, rgba(0,255,65,0.07) 0%, transparent 70%);

pointer-events: none;

}

.screen-header {

display: flex; justify-content: space-between; align-items: center;

margin-bottom: 9px; padding-bottom: 7px;

border-bottom: 1px solid #0d1e0d;

}

.screen-id {

font-family: ‘VT323’, monospace; font-size: 14px;

color: var(–crt-dim); letter-spacing: 3px;

}

.screen-status { display: flex; gap: 10px; }

.st {

font-size: 9px; letter-spacing: 1px;

color: var(–crt-dark);

}

.st.on { color: var(–crt-dim); }

.st.amb { color: var(–amber-dim); }

.mode-row { display: flex; gap: 5px; margin-bottom: 8px; }

.mode-pill {

font-family: ‘VT323’, monospace; font-size: 13px;

padding: 1px 9px;

border: 1px solid var(–crt-dark); color: var(–crt-dark);

background: none; cursor: pointer; letter-spacing: 1px;

transition: all 0.1s;

}

.mode-pill:hover { color: var(–crt-dim); border-color: var(–crt-dim); }

.mode-pill.active {

border-color: var(–crt-green); color: var(–crt-green);

text-shadow: 0 0 8px var(–crt-green);

background: rgba(0,255,65,0.05);

}

.expr-line {

font-family: ‘VT323’, monospace; font-size: 16px;

color: var(–crt-dim); text-align: right;

min-height: 20px; letter-spacing: 1px;

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.result-line {

font-family: ‘VT323’, monospace; font-size: 54px;

color: var(–crt-green); text-align: right; line-height: 1;

letter-spacing: 3px;

text-shadow: 0 0 10px rgba(0,255,65,0.8), 0 0 30px rgba(0,255,65,0.25);

transition: color 0.1s; word-break: break-all;

min-height: 58px; display: flex; align-items: center; justify-content: flex-end;

}

.result-line.error { color: var(–red); font-size: 22px; text-shadow: 0 0 10px rgba(255,58,58,0.5); }

.cursor-block {

display: inline-block; width: 3px; height: 40px;

background: var(–crt-green); margin-left: 3px; vertical-align: middle;

animation: blink 1s step-end infinite;

}

@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

.mem-strip {

display: flex; gap: 14px; margin-top: 5px;

padding-top: 5px; border-top: 1px solid #0d1e0d;

}

.mem-lbl { font-size: 9px; letter-spacing: 1px; color: var(–crt-dark); }

.mem-lbl.lit { color: var(–amber); text-shadow: 0 0 6px var(–amber); }

/* BUTTON GRID */

.btn-grid {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 3px;

}

.key { background: none; border: none; cursor: pointer; padding: 0; }

.key-face {

background: linear-gradient(155deg, #1e231e, #131713, #181c18);

border: 1px solid #262e26;

border-bottom: 3px solid #0c110c;

border-radius: 3px;

padding: 9px 4px 7px;

width: 100%; transition: all 0.06s;

box-shadow: 0 2px 0 #080b08;

}

.key:active .key-face {

transform: translateY(2px);

border-bottom-width: 1px; box-shadow: none;

}

.key:hover .key-face { filter: brightness(1.18); }

.key-top {

font-family: ‘VT323’, monospace; font-size: 9px;

color: var(–crt-dark); letter-spacing: 1px;

display: block; text-align: center; line-height: 1; margin-bottom: 2px;

}

.key-main {

font-family: ‘Orbitron’, monospace; font-size: 10px; font-weight: 600;

display: block; text-align: center; line-height: 1.2;

}

.key.num .key-main { color: #bccbbc; }

.key.op .key-main { color: var(–amber); }

.key.op .key-face { border-color: #2e2400; }

.key.fn .key-main { color: var(–blue); font-size: 9px; letter-spacing: 0.3px; }

.key.fn .key-face { border-color: #00253a; }

.key.eq .key-face { background: linear-gradient(155deg,#003a10,#002a0b,#003010); border-color: var(–crt-green); border-bottom-color: #001a06; }

.key.eq .key-main { color: var(–crt-green); font-size: 18px; text-shadow: 0 0 8px var(–crt-green); }

.key.clr .key-main { color: var(–red); }

.key.clr .key-face { border-color: #3a0000; }

.key.mem .key-main { color: var(–amber); font-size: 9px; }

.key.mem .key-face { background: linear-gradient(155deg,#1a1500,#110f00,#161200); }

.key.span2 { grid-column: span 2; }

/* CONVERTER */

.converter-panel { display: none; }

.converter-panel.active { display: block; }

.cat-strip { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 9px; }

.cat-key {

font-family: ‘VT323’, monospace; font-size: 13px;

padding: 2px 10px;

background: #0c100c; border: 1px solid #1a251a;

color: #2a3e2a; cursor: pointer; letter-spacing: 1px; transition: all 0.1s;

}

.cat-key:hover { color: var(–crt-dim); }

.cat-key.active { border-color: var(–amber); color: var(–amber); background: #1a1200; }

.conv-fields {

display: grid;

grid-template-columns: 1fr 26px 1fr;

gap: 5px; align-items: end;

margin-bottom: 6px;

}

.conv-grp { display: flex; flex-direction: column; gap: 3px; }

.conv-lbl { font-family: ‘VT323’, monospace; font-size: 12px; color: var(–crt-dim); letter-spacing: 2px; }

.conv-sel, .conv-inp {

background: var(–crt-bg); border: 1px solid var(–crt-dark);

color: var(–crt-green); font-family: ‘VT323’, monospace; font-size: 18px;

padding: 6px 7px; outline: none; width: 100%;

}

.conv-sel:focus, .conv-inp:focus { border-color: var(–crt-green); }

.conv-sel option { background: #020c03; color: var(–crt-green); }

.conv-arrow-mid { font-family: ‘VT323’, monospace; font-size: 22px; color: var(–crt-dim); text-align: center; padding-bottom: 5px; }

/* FORMULAS */

.formulas-panel { display: none; max-height: 315px; overflow-y: auto; }

.formulas-panel.active { display: block; }

.formulas-panel::-webkit-scrollbar { width: 3px; }

.formulas-panel::-webkit-scrollbar-track { background: #0c100c; }

.formulas-panel::-webkit-scrollbar-thumb { background: var(–crt-dark); }

.fcard {

border: 1px solid #1a251a; margin-bottom: 4px;

cursor: pointer; background: #080c08; transition: border-color 0.15s;

}

.fcard:hover { border-color: var(–crt-dim); }

.fcard.open { border-color: var(–crt-green); }

.fcard-head {

display: flex; justify-content: space-between; align-items: baseline;

padding: 7px 10px;

}

.fcard-title { font-family: ‘Orbitron’, monospace; font-size: 8px; font-weight: 700; color: #7aaa7a; letter-spacing: 1px; text-transform: uppercase; }

.fcard-eq { font-family: ‘VT323’, monospace; font-size: 15px; color: var(–amber); letter-spacing: 1px; }

.fcard-cat { font-family: ‘VT323’, monospace; font-size: 11px; color: var(–blue); letter-spacing: 1px; }

.fcard-body { display: none; padding: 0 10px 10px; display: none; grid-template-columns: 1fr 1fr; gap: 5px; }

.fcard.open .fcard-body { display: grid; }

.finp-grp { display: flex; flex-direction: column; gap: 3px; }

.finp-lbl { font-family: ‘VT323’, monospace; font-size: 11px; color: var(–crt-dim); letter-spacing: 1px; }

.finp {

background: var(–crt-bg); border: 1px solid var(–crt-dark);

color: var(–crt-green); font-family: ‘VT323’, monospace; font-size: 15px;

padding: 4px 7px; outline: none; width: 100%;

}

.finp:focus { border-color: var(–crt-green); }

.fcard-go {

grid-column: span 2; padding: 6px;

background: #001a07; border: 1px solid var(–crt-green); color: var(–crt-green);

font-family: ‘Orbitron’, monospace; font-size: 8px; font-weight: 700;

letter-spacing: 3px; cursor: pointer; transition: all 0.1s;

}

.fcard-go:hover { background: #002e0e; }

.fcard-ans {

grid-column: span 2;

font-family: ‘VT323’, monospace; font-size: 18px; color: var(–amber);

background: #1a1200; border: 1px solid #3a2a00;

padding: 6px 8px; display: none; letter-spacing: 1px;

}

.fcard.has-ans .fcard-ans { display: block; }

/* FOOTER */

.footer {

display: flex; justify-content: space-between; align-items: center;

margin-top: 11px; padding-top: 8px;

border-top: 1px solid #1a221a;

}

.footer-info { font-family: ‘VT323’, monospace; font-size: 13px; color: #2a3e2a; letter-spacing: 2px; }

.angle-toggle { display: flex; gap: 2px; }

.ang-btn {

font-family: ‘VT323’, monospace; font-size: 13px; padding: 2px 10px;

background: #0c100c; border: 1px solid #1a251a; color: #2a3e2a;

cursor: pointer; letter-spacing: 1px; transition: all 0.1s;

}

.ang-btn.active { border-color: var(–crt-green); color: var(–crt-green); }

@keyframes flash { 0%{opacity:1}50%{opacity:0.5}100%{opacity:1} }

.flash { animation: flash 0.15s; }

</style>

</head>

<body>

<!– Screen –>

<span class=”screen-id”>ENGCALC::4.1</span>

<span class=”st on”>FLOAT</span>

</div>

<button class=”mode-pill” onclick=”switchTab(‘units’)”>UNITS</button>

<button class=”mode-pill” onclick=”switchTab(‘formulas’)”>FORMULAS</button>

</div>

</div>

<!– CALCULATOR PANEL –>

<button class=”key fn” onclick=”ins(”)”><div class=”key-face”><span class=”key-top”>CONST</span><span class=”key-main”></span></div></button>

<button class=”key clr” onclick=”clearAll()”><div class=”key-face”><span class=”key-top”>RESET</span><span class=”key-main”>AC</span></div></button>

<button class=”key clr” onclick=”ce()”><div class=”key-face”><span class=”key-top”>ENTRY</span><span class=”key-main”>CE</span></div></button>

<button class=”key fn” onclick=”ins(‘e’)”><div class=”key-face”><span class=”key-top”>EULER</span><span class=”key-main”>e</span></div></button>

<button class=”key fn” onclick=”ins(‘)’)”><div class=”key-face”><span class=”key-top”>CLOSE</span><span class=”key-main”>)</span></div></button>

</div>

<!– UNIT CONVERTER –>

</div>

</div>

<!– FORMULAS –>

<!– Footer –>

<span class=”footer-info” id=”statusBar”>READY </span>

</div>

// STATE

let expr = ”, mem = 0, lastAns = null, angleMode = ‘deg’, hasResult = false;

// DISPLAY

function render() {

document.getElementById(‘memInd’).className = ‘mem-lbl’ + (mem!==0?’ lit’:”);

document.getElementById(‘memInd’).textContent = mem!==0?`MEM ${fmt(mem)}`:’MEM ‘;

document.getElementById(‘ansInd’).textContent = lastAns!==null?`ANS ${fmt(lastAns)}`:’ANS ‘;

document.getElementById(‘memStatus’).textContent = `MEM:${mem!==0?String(fmt(mem)).slice(0,8):’0′}`;

}

function showResult(val, isErr) {

const el = document.getElementById(‘resultLine’);

el.className = ‘result-line’ + (isErr?’ error’:”);

el.innerHTML = val + ‘<span class=”cursor-block”></span>’;

}

function fmt(n) {

if (!isFinite(n)) return ‘OVERFLOW’;

if (Math.abs(n)>=1e13||(Math.abs(n)<1e-7&&n!==0)) return n.toExponential(6).toUpperCase();

return parseFloat(n.toPrecision(10)).toString();

}

// INPUT

function ins(t) {

if (hasResult && /^[0-9e.]$/.test(t)) expr = ”;

hasResult = false;

expr += t;

showResult(expr.slice(-26)||’0′);

render();

}

function clearAll() { expr=”; hasResult=false; showResult(‘0’); render(); setStatus(‘CLEARED’); }

function ce() { expr=expr.slice(0,-1); showResult(expr||’0′); render(); }

function bksp() { ce(); }

// CALCULATE

function calculate() {

if (!expr.trim()) return;

try {

let e = expr;

e = e.replace(//g,’Math.PI’);

e = e.replace(/beb/g,’Math.E’);

if (angleMode===’deg’) {

e = e.replace(/sin(/g,’Math.sin(Math.PI/180*’);

e = e.replace(/cos(/g,’Math.cos(Math.PI/180*’);

e = e.replace(/tan(/g,’Math.tan(Math.PI/180*’);

} else {

e = e.replace(/sin(/g,’Math.sin(‘);

e = e.replace(/cos(/g,’Math.cos(‘);

e = e.replace(/tan(/g,’Math.tan(‘);

}

e = e.replace(/ln(/g,’Math.log(‘);

e = e.replace(/log(/g,’Math.log10(‘);

e = e.replace(/(/g,’Math.sqrt(‘);

e = e.replace(/abs(/g,’Math.abs(‘);

e = e.replace(/^/g,’**’);

e = e.replace(/(d+(?:.d+)?)E(-?d+)/g,(_,a,b)=>`(${a}*1e${b})`);

e = e.replace(/(d+(?:.d+)?)%/g,(_,n)=>`(${n}/100)`);

const r = Function(‘”use strict”;return(‘+e+’)’)();

if (!isFinite(r)) throw 0;

document.getElementById(‘exprLine’).textContent = expr + ‘ =’;

const f = fmt(r);

showResult(f);

lastAns = r; hasResult = true; expr = f;

render();

setStatus(‘OK ‘+new Date().toLocaleTimeString());

document.getElementById(‘resultLine’).classList.add(‘flash’);

setTimeout(()=>document.getElementById(‘resultLine’).classList.remove(‘flash’),180);

} catch(err) {

showResult(‘SYNTAX ERR’,true);

setStatus(‘ERR CHECK INPUT’);

hasResult = false;

}

document.addEventListener(‘keydown’, ev => {

const tag = document.activeElement.tagName;

if (tag===’INPUT’||tag===’SELECT’) return;

if (/^[0-9]$/.test(ev.key)) ins(ev.key);

else if (‘+-*/’.includes(ev.key)) ins(ev.key);

else if (ev.key===’.’) ins(‘.’);

else if (ev.key===’Enter’||ev.key===’=’) calculate();

else if (ev.key===’Backspace’) bksp();

else if (ev.key===’Escape’) clearAll();

else if (ev.key==='(‘) ins(‘(‘);

else if (ev.key===’)’) ins(‘)’);

else if (ev.key===’^’) ins(‘^’);

});

// MEMORY

function ms() { if(lastAns!==null){mem=lastAns;render();} }

function mr() { if(mem!==0) ins(String(mem)); }

function mc() { mem=0; render(); }

function mplus() { if(lastAns!==null){mem+=lastAns;render();} }

function mminus() { if(lastAns!==null){mem-=lastAns;render();} }

// ANGLE

function setAngle(m) {

angleMode = m;

document.getElementById(‘degBtn’).className=’ang-btn’+(m===’deg’?’ active’:”);

document.getElementById(‘radBtn’).className=’ang-btn’+(m===’rad’?’ active’:”);

document.getElementById(‘angleStatus’).textContent = m.toUpperCase();

}

function setStatus(msg) { document.getElementById(‘statusBar’).textContent = msg+’ ‘; }

// TABS

function switchTab(name) {

[‘calc’,’units’,’formulas’].forEach((n,i)=>{

document.querySelectorAll(‘.mode-pill’)[i].classList.toggle(‘active’,n===name);

});

document.getElementById(‘panel-calc’).style.display = name===’calc’?”:’none’;

const up = document.getElementById(‘panel-units’);

up.style.display = name===’units’?’block’:’none’;

up.className = name===’units’?’converter-panel active’:’converter-panel’;

const fp = document.getElementById(‘panel-formulas’);

fp.style.display = name===’formulas’?’block’:’none’;

fp.className = name===’formulas’?’formulas-panel active’:’formulas-panel’;

}

// UNIT CONVERTER

const UNITS = {

length: {label:’LENGTH’, u:[‘meter’,’kilometer’,’centimeter’,’millimeter’,’mile’,’yard’,’foot’,’inch’,’nautical mi’],b:[1,1000,.01,.001,1609.344,.9144,.3048,.0254,1852]},

mass: {label:’MASS’, u:[‘kilogram’,’gram’,’milligram’,’tonne’,’pound’,’ounce’],b:[1,.001,1e-6,1000,.453592,.0283495]},

temp: {label:’TEMP’, u:[‘Celsius’,’Fahrenheit’,’Kelvin’],b:null},

area: {label:’AREA’, u:[‘m’,’km’,’cm’,’hectare’,’acre’,’ft’],b:[1,1e6,1e-4,1e4,4046.86,.092903]},

pressure: {label:’PRESSURE’, u:[‘pascal’,’kPa’,’MPa’,’bar’,’psi’,’atm’],b:[1,1000,1e6,1e5,6894.76,101325]},

energy: {label:’ENERGY’, u:[‘joule’,’kJ’,’MJ’,’calorie’,’kcal’,’kWh’,’BTU’],b:[1,1000,1e6,4.184,4184,3.6e6,1055.06]},

power: {label:’POWER’, u:[‘watt’,’kilowatt’,’megawatt’,’horsepower’],b:[1,1000,1e6,745.7]},

speed: {label:’SPEED’, u:[‘m/s’,’km/h’,’mph’,’knot’,’ft/s’],b:[1,.277778,.44704,.514444,.3048]},

};

let curCat = ‘length’;

function buildCatStrip() {

document.getElementById(‘catStrip’).innerHTML = Object.keys(UNITS).map(k=>

`<button class=”cat-key${k===curCat?’ active’:”}” onclick=”setCat(‘${k}’)”>${UNITS[k].label}</button>`

).join(”);

}

function setCat(cat) { curCat=cat; buildCatStrip(); fillUnits(); doConvert(); }

function fillUnits() {

const u = UNITS[curCat].u;

const html = u.map((n,i)=>`<option value=”${i}”>${n}</option>`).join(”);

document.getElementById(‘fromUnit’).innerHTML = html;

document.getElementById(‘toUnit’).innerHTML = html;

document.getElementById(‘toUnit’).value = 1;

}

function doConvert() {

const val = parseFloat(document.getElementById(‘fromVal’).value);

if (isNaN(val)) { document.getElementById(‘toVal’).value=”; return; }

const fi = +document.getElementById(‘fromUnit’).value;

const ti = +document.getElementById(‘toUnit’).value;

const cat = UNITS[curCat];

let r;

if (curCat===’temp’) {

let c = fi===0?val:fi===1?(val-32)*5/9:val-273.15;

r = ti===0?c:ti===1?c*9/5+32:c+273.15;

} else {

r = val*cat.b[fi]/cat.b[ti];

}

document.getElementById(‘toVal’).value = parseFloat(r.toPrecision(8));

}

buildCatStrip(); fillUnits();

// FORMULAS

const FORMULAS = [

{name:”Ohm’s Law”,cat:”ELEC”,eq:”V = I R”,

f:[{id:’I’,l:’Current I (A)’},{id:’R’,l:’Resistance R ()’}],

fn:v=>`V = ${fmt(v.I*v.R)} V`},

{name:”Electric Power”,cat:”ELEC”,eq:”P = V I”,

f:[{id:’V’,l:’Voltage V (V)’},{id:’I’,l:’Current I (A)’}],

fn:v=>`P = ${fmt(v.V*v.I)} W`},

{name:”Capacitor Energy”,cat:”ELEC”,eq:”E = CV”,

f:[{id:’C’,l:’Capacitance C (F)’},{id:’V’,l:’Voltage V (V)’}],

fn:v=>`E = ${fmt(.5*v.C*v.V**2)} J`},

{name:”Kinetic Energy”,cat:”MECH”,eq:”KE = mv”,

f:[{id:’m’,l:’Mass m (kg)’},{id:’v’,l:’Velocity v (m/s)’}],

fn:v=>`KE = ${fmt(.5*v.m*v.v**2)} J`},

{name:”Gravitational PE”,cat:”MECH”,eq:”PE = mgh”,

f:[{id:’m’,l:’Mass m (kg)’},{id:’g’,l:’g (m/s)’},{id:’h’,l:’Height h (m)’}],

fn:v=>`PE = ${fmt(v.m*v.g*v.h)} J`},

{name:”Newton 2nd Law”,cat:”MECH”,eq:”F = ma”,

f:[{id:’m’,l:’Mass m (kg)’},{id:’a’,l:’Accel a (m/s)’}],

fn:v=>`F = ${fmt(v.m*v.a)} N`},

{name:”Torque”,cat:”MECH”,eq:” = F r”,

f:[{id:’F’,l:’Force F (N)’},{id:’r’,l:’Radius r (m)’}],

fn:v=>` = ${fmt(v.F*v.r)} Nm`},

{name:”Pressure”,cat:”FLUID”,eq:”P = F / A”,

f:[{id:’F’,l:’Force F (N)’},{id:’A’,l:’Area A (m)’}],

fn:v=>`P = ${fmt(v.F/v.A)} Pa`},

{name:”Reynolds Number”,cat:”FLUID”,eq:”Re = vL/”,

f:[{id:’rho’,l:’Density (kg/m)’},{id:’v’,l:’Velocity v’},{id:’L’,l:’Length L (m)’},{id:’mu’,l:’Viscosity (Pas)’}],

fn:v=>`Re = ${fmt(v.rho*v.v*v.L/v.mu)}`},

{name:”Stress”,cat:”STRUCT”,eq:” = F / A”,

f:[{id:’F’,l:’Force F (N)’},{id:’A’,l:’Area A (m)’}],

fn:v=>` = ${fmt(v.F/v.A)} Pa`},

{name:”Young’s Modulus”,cat:”STRUCT”,eq:”E = /”,

f:[{id:’sigma’,l:’Stress (Pa)’},{id:’eps’,l:’Strain ‘}],

fn:v=>`E = ${fmt(v.sigma/v.eps)} Pa`},

{name:”Ideal Gas Law”,cat:”THERMO”,eq:”PV = nRT”,

f:[{id:’n’,l:’Moles n’},{id:’T’,l:’Temp T (K)’},{id:’V’,l:’Volume V (m)’}],

fn:v=>`P = ${fmt(v.n*8.314*v.T/v.V)} Pa`},

{name:”Heat Transfer”,cat:”THERMO”,eq:”Q = mcT”,

f:[{id:’m’,l:’Mass m (kg)’},{id:’c’,l:’Sp. heat (J/kgK)’},{id:’dT’,l:’T (K)’}],

fn:v=>`Q = ${fmt(v.m*v.c*v.dT)} J`},

{name:”Decibels”,cat:”SIGNAL”,eq:”dB = 20log(V/V)”,

f:[{id:’V’,l:’Signal V’},{id:’V0′,l:’Reference V’}],

fn:v=>`${fmt(20*Math.log10(v.V/v.V0))} dB`},

];

function buildFormulas() {

document.getElementById(‘panel-formulas’).innerHTML = FORMULAS.map((f,i)=>`

</div>

${f.f.map(fi=>`

</div>`).join(”)}

<button class=”fcard-go” onclick=”event.stopPropagation();calcF(${i})”>CALCULATE</button>

</div>

</div>`).join(”);

}

function toggleF(i) { document.getElementById(‘fc’+i).classList.toggle(‘open’); }

function calcF(i) {

const f = FORMULAS[i]; const vals = {}; let ok = true;

f.f.forEach(fi=>{ const v=parseFloat(document.getElementById(`fi${i}_${fi.id}`).value); if(isNaN(v)){ok=false;}else vals[fi.id]=v; });

if (!ok) return;

try {

document.getElementById(‘fa’+i).textContent = ‘ ‘+f.fn(vals);

document.getElementById(‘fc’+i).classList.add(‘has-ans’);

} catch(e) {

document.getElementById(‘fa’+i).textContent = ‘ERROR’;

document.getElementById(‘fc’+i).classList.add(‘has-ans’);

}

buildFormulas();

render();

</script>

</body>

</html>

WRITE MY PAPER

Comments

Leave a Reply Cancel reply

More posts

Business ethics

Geometry Question

Literature Review Leadership Strategies for Effective Digita…

Why companies make misleading ads that hook consumers on add…