Una calculadora de propinas es una calculadora que calcula una propina en función del porcentaje de la factura total.

Construyamos uno ahora.

Paso 1 - HTML:

Creamos un formulario para ingresar la cantidad preferida:

   Tip Calculator 
Tip Calculator
 $ Tip: 
Results
 Tip amount Total Bill with Tip 

Paso 2 - CSS:

Tu diseñas el estilo como quieras. También puede usar CSS para ocultar los resultados y mostrarlos a través de JavaScript después de que el usuario complete el formulario:

 #results { display:none; }

Paso 3: JavaScript:

Agregamos un evento onchange. El evento onchange ocurre cuando el usuario interactúa con el formulario.

Esta acción ejecutará una función que calcula el monto de la factura final en función del porcentaje de propina y luego devuelve los resultados.

document.querySelector('#tip-form').onchange = function(){ var bill = Number(document.getElementById('billTotal').value); var tip = document.getElementById('tipInput').value; document.getElementById('tipOutput').innerHTML = `${tip}%`; var tipValue = bill * (tip/100) var finalBill = bill + tipValue console.log(finalBill) var tipAmount = document.querySelector('#tipAmount') var totalBillWithTip = document.querySelector('#totalBillWithTip') tipAmount.value = tipValue.toFixed(2); totalBillWithTip.value =finalBill.toFixed(2); //Show Results document.getElementById('results').style.display='block' }

Puedes ver un ejemplo funcional y su código en Codepen.io.