Una colección de 12 herramientas web construidas en HTML, CSS y JavaScript puro — sin dependencias, sin build tools, sin backend.
✅ Bug resuelto — El error lógico en la calculadora de propinas fue identificado y corregido. Ver sección Bug Resuelto para más detalles.
Clona el repositorio y abre index.html directamente en cualquier navegador. No requiere servidor ni instalación.
git clone https://github.com/Jrgil20/GithubCopilotDevDays_reto2_tolkit.git
cd GithubCopilotDevDays_reto2_tolkit
open index.html # macOS
start index.html # Windows
xdg-open index.html # LinuxEste proyecto está preparado para desplegarse directamente en GitHub Pages sin configuración adicional:
- Ve a Settings → Pages en tu repositorio de GitHub.
- En Source, selecciona la rama
mainy la carpeta/ (root). - Haz clic en Save.
- Tu sitio estará disponible en
https://<tu-usuario>.github.io/GithubCopilotDevDays_reto2_tolkit/.
La estructura del proyecto usa index.html en la raíz junto con rutas relativas a css/ y js/, por lo que es totalmente compatible con GitHub Pages sin necesidad de herramientas de build.
| # | Página | Descripción |
|---|---|---|
| 1 | Inicio | Panel de navegación rápida |
| 2 | IMC / BMI | Calculadora de índice de masa corporal |
| 3 | Propinas | Cálculo de propinas y split de cuenta |
| 4 | Conversiones | Temperatura, distancia, peso y altura |
| 5 | Color Mixer | Mezcla dos colores y obtiene HEX / RGB / HSL |
| 6 | Contraseñas | Generador de contraseñas con opciones personalizables |
| 7 | Temporizador | Cuenta regresiva configurable (HH:MM:SS) |
| 8 | Notas | Bloc de notas persistente (localStorage) |
| 9 | To-Do | Lista de tareas con persistencia |
| 10 | Palabras | Contador de palabras, caracteres y oraciones |
| 11 | Calculadora de Edad | Edad exacta en años, meses y días |
| 12 | Acerca de | Info del proyecto y stack técnico |
La Calculadora de Propinas (página 3) contenía un error lógico en la fórmula de cálculo. Al dividir el porcentaje entre 10 en lugar de 100, las propinas calculadas resultaban 10 veces más altas de lo que deberían ser.
Con una cuenta de $100 y un porcentaje de propina del 15%:
| Valor | Con el bug (pct / 10) |
Correcto (pct / 100) |
|---|---|---|
| Propina | $150.00 | $15.00 |
| Total | $250.00 | $115.00 |
| Por persona (2) | $125.00 | $57.50 |
// ❌ BUG: divide entre 10, produce resultados 10x mayores
const tipAmount = bill * (pct / 10);// ✅ FIX: divide entre 100 para obtener el porcentaje real
const tipAmount = bill * (pct / 100);- Archivo:
js/app.js— funcióncalcTip()
GithubCopilotDevDays_reto2_tolkit/
├── index.html # Estructura HTML (punto de entrada)
├── css/
│ └── styles.css # Estilos de la aplicación
├── js/
│ └── app.js # Lógica JavaScript (con el bug corregido)
└── README.md # Documentación del proyecto
El proyecto fue reestructurado para seguir buenas prácticas de desarrollo web, separando las responsabilidades:
index.html— Contiene exclusivamente el markup HTML semántico.css/styles.css— Todos los estilos CSS (variables, layout, componentes).js/app.js— Toda la lógica JavaScript (navegación, cálculos, persistencia).
- HTML5 — estructura semántica
- CSS3 — variables, grid, flexbox, transiciones
- Vanilla JS — sin frameworks ni librerías
- LocalStorage API — persistencia de notas y tareas
- Date API — calculadora de edad
- Las funciones siguen una convención de nombres descriptiva:
calcBMI(),calcTip(),calcAge(), etc. - Cada "página" es una sección
<section>con toggle de visibilidad por JS, sin routing externo. - El estado de notas y tareas persiste en
localStorageentre sesiones. - Los archivos usan rutas relativas para garantizar compatibilidad con GitHub Pages.
Las contribuciones son bienvenidas. Para proponer cambios:
- Haz fork del repositorio.
- Crea una rama con un nombre descriptivo (
feature/nueva-herramienta). - Realiza tus cambios y haz commit con mensajes claros.
- Abre un Pull Request describiendo los cambios.
MIT — libre para usar, modificar y distribuir.