Best percentage calculator with 8 modes, visual bars, formula display and history
Percentage Calculator
8 calculation modes — instant results, formulas & visual breakdowns
Calculator
Result
Enter values above to see results
`;
def.fields.forEach(f => {
html += ``;
});
html += `
`;
document.getElementById('inputFields').innerHTML = html;
document.getElementById('hintText').textContent = def.hint;
}
function getVals() {
const def = tabDefs[tab];
const vals = {};
for (const f of def.fields) {
const el = document.getElementById('inp_' + f.id);
if (!el || el.value === '') return null;
const v = parseFloat(el.value);
if (isNaN(v)) return null;
vals[f.id] = v;
}
return vals;
}
function calc() {
const vals = getVals();
if (!vals) {
document.getElementById('resultArea').innerHTML = 'Enter values above to see results
';
return;
}
const res = tabDefs[tab].calc(vals);
if (!res) {
document.getElementById('resultArea').innerHTML = 'Invalid input (check for zeros or out-of-range values)
';
return;
}
let barsHtml = '';
if (res.bar && res.bar.length) {
res.bar.forEach(b => {
const w = Math.min(Math.max(b.val, 0), 100).toFixed(1);
barsHtml += ``;
});
}
let rowsHtml = '';
res.rows.forEach(([l,v]) => {
rowsHtml += `${l}${v}
`;
});
const boxClass = res.dir === 'up' ? 'up' : res.dir === 'down' ? 'down' : 'neutral';
document.getElementById('resultArea').innerHTML = `
${res.main}
${res.sentence}
${rowsHtml}
${res.formula}
${h.text}${h.time}
`
).join('');
}
function clearHistory() {
history = [];
renderHistory();
}
function resetFields() {
document.querySelectorAll('#inputFields input').forEach(el => el.value = '');
document.getElementById('resultArea').innerHTML = 'Enter values above to see results
';
}
renderInputs();