Loading repository data…
Seb-RM / repository
Una aplicación interactiva para calcular propinas y dividir el total entre comensales de manera justa y sencilla.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Una aplicación interactiva para calcular propinas y dividir el total entre comensales de manera justa y sencilla.
La aplicación permite a los usuarios:
const sliders = document.querySelectorAll("input[type='range']");
sliders.forEach(function(slider){
slider.addEventListener("input", calculateTip)
});
const billInput = document.getElementById("bill");
billInput.addEventListener("change",calculateTip);
Este fragmento:
Selecciona todos los controles deslizantes (range inputs)
Añade event listeners para ejecutar la función calculateTip cuando cambian
También detecta cambios en el input del monto de la cuenta
function calculateTip() {
let bill = parseFloat(billInput.value);
let tipPercent = document.getElementById("tip").value;
let noOfPeople = document.getElementById("no-of-people").value;
billInput.value = bill.toFixed(2);
let totalTip = parseFloat((bill * (tipPercent/100)).toFixed(2));
let total = parseFloat((bill + totalTip).toFixed(2));
let tipPerPerson = (totalTip/noOfPeople).toFixed(2);
let totalPerPerson = (total/noOfPeople).toFixed(2);
// Actualización de los elementos del DOM
document.getElementById("tip-amount").textContent = `$${totalTip}`;
// ... más actualizaciones ...
}
Esta función:
Obtiene los valores de entrada (monto, porcentaje de propina, número de personas)
Realiza los cálculos matemáticos necesarios
Actualiza todos los elementos visuales con los nuevos resultados
La aplicación cuenta con efectos visuales atractivos:
@keyframes slideIn {
from { top: -50%; }
to { top: 50%; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
slideIn: Animación de entrada del contenedor principal
fadeIn: Efecto de aparición gradual para la sección de resultados
Transiciones suaves para cambios de color y estado
git clone https://github.com/Seb-RM/Javascript_Html_Css-Tip-Calculator.git
Abre el proyecto en tu editor de código favorito
Abre el archivo index.html en tu navegador web favorito
¡Listo! La aplicación está lista para usar
Personaliza según tus necesidades
Ingresa el monto total de la cuenta en el campo "Bill"
Ajusta el porcentaje de propina usando el deslizador (o escribe directamente)
Selecciona el número de personas que compartirán la cuenta
Observa los resultados que se actualizan en tiempo real:
Propina total
Total a pagar (cuenta + propina)
Monto por persona
Manipulación del DOM: Selección y actualización dinámica de elementos
Event Listeners: Detección de cambios en controles de entrada
Cálculos matemáticos: Operaciones con porcentajes y divisiones
Formateo de números: Mostrar valores monetarios con 2 decimales
Animaciones CSS: Mejora de la experiencia de usuario
Selected from shared topics, language and repository description—not editorial ratings.
Seb-RM /
Blob Maker es una aplicación web interactiva que permite crear formas orgánicas (blobs) personalizables y obtener el código CSS correspondiente.
33/100 health