Tip Calculator

`; } if ( type.value === "whatPercent" ) { html = ` `; } if ( type.value === "percentChange" ) { html = ` `; } if ( type.value === "increaseBy" || type.value === "decreaseBy" ) { html = ` `; } inputs.innerHTML = html; const a = document.getElementById("pcA"); const b = document.getElementById("pcB"); a.addEventListener( "input", calculate ); b.addEventListener( "input", calculate ); a.addEventListener( "keydown", enterCalculate ); b.addEventListener( "keydown", enterCalculate ); calculate(); } function enterCalculate(event) { if ( event.key === "Enter" ) { event.preventDefault(); calculate(); } } function calculate() { const aInput = document.getElementById("pcA"); const bInput = document.getElementById("pcB"); if ( !aInput || !bInput ) { return; } const a = parseFloat( aInput.value ); const b = parseFloat( bInput.value ); if ( !Number.isFinite(a) || !Number.isFinite(b) ) { result.textContent = "Enter valid numbers"; formula.textContent = ""; status.textContent = "⚠️ Please complete both fields."; status.style.color = "#c0392b"; return; } let answer = 0; let resultText = ""; let formulaText = ""; /* * WHAT IS X% OF Y? */ if ( type.value === "percentOf" ) { answer = ( a / 100 ) * b; resultText = formatNumber(a) + "% of " + formatNumber(b) + " = " + formatNumber(answer); formulaText = formatNumber(a) + " ÷ 100 × " + formatNumber(b) + " = " + formatNumber(answer); } /* * X IS WHAT % OF Y? */ if ( type.value === "whatPercent" ) { if ( b === 0 ) { showError( "The second number cannot be zero." ); return; } answer = ( a / b ) * 100; resultText = formatNumber(a) + " is " + formatNumber(answer) + "% of " + formatNumber(b); formulaText = formatNumber(a) + " ÷ " + formatNumber(b) + " × 100 = " + formatNumber(answer) + "%"; } /* * PERCENT CHANGE */ if ( type.value === "percentChange" ) { if ( a === 0 ) { showError( "The original value cannot be zero for percentage change." ); return; } answer = ( ( b - a ) / Math.abs(a) ) * 100; const direction = answer > 0 ? "increase" : answer < 0 ? "decrease" : "change"; resultText = formatNumber( Math.abs(answer) ) + "% " + direction; formulaText = "(" + formatNumber(b) + " − " + formatNumber(a) + ") ÷ " + formatNumber( Math.abs(a) ) + " × 100 = " + formatNumber(answer) + "%"; } /* * INCREASE BY */ if ( type.value === "increaseBy" ) { answer = a * ( 1 + b / 100 ); resultText = formatNumber(a) + " increased by " + formatNumber(b) + "% = " + formatNumber(answer); formulaText = formatNumber(a) + " × (1 + " + formatNumber(b) + " ÷ 100) = " + formatNumber(answer); } /* * DECREASE BY */ if ( type.value === "decreaseBy" ) { answer = a * ( 1 - b / 100 ); resultText = formatNumber(a) + " decreased by " + formatNumber(b) + "% = " + formatNumber(answer); formulaText = formatNumber(a) + " × (1 − " + formatNumber(b) + " ÷ 100) = " + formatNumber(answer); } result.textContent = resultText; formula.textContent = formulaText; status.textContent = "✅ Percentage calculated"; status.style.color = "#198754"; } function showError(message) { result.textContent = "Unable to calculate"; formula.textContent = ""; status.textContent = "⚠️ " + message; status.style.color = "#c0392b"; } /* * CALCULATE BUTTON */ button.addEventListener( "click", calculate ); /* * TYPE CHANGE */ type.addEventListener( "change", renderInputs ); /* * QUICK EXAMPLES */ document .querySelectorAll( "#percentage-calculator .pc-quick-grid button" ) .forEach( function(quickButton) { quickButton.addEventListener( "click", function () { type.value = this.dataset.type; renderInputs(); document .getElementById("pcA") .value = this.dataset.a; document .getElementById("pcB") .value = this.dataset.b; calculate(); } ); } ); /* * INITIALIZE */ renderInputs(); })();