🌿 Palindrome Number Visualizer - Enfoque Matemático
Un visualizador interactivo y orgánico que muestra cómo determinar si un número es palíndromo utilizando únicamente operaciones matemáticas, sin convertirlo a string.
📱 Imágenes de la Aplicación 📱
![Palindrome Number Visualizer - Interfaz Principal]
Imagen de captura de pantalla real de la aplicación desplegada.
✨ Características
- 🧮 Visualización paso a paso del algoritmo para determinar si un número es palíndromo
- 🔢 Enfoque matemático puro (sin conversión a string) para mostrar la lógica del algoritmo
- 🌱 Diseño orgánico e inspirado en la naturaleza con hojas animadas
- 📱 Diseño responsive adaptable a todos los dispositivos
- 🎬 Controles interactivos (anterior, siguiente, automático)
- 🔍 Visualización detallada de cada operación matemática
- 📊 Animaciones para cada paso con efectos visuales atractivos
- 🌿 Explicación completa de la lógica y la eficiencia del algoritmo
🛠️ Tecnologías utilizadas
- 💻 HTML5, CSS3 y JavaScript (ES6+)
- 🎨 CSS avanzado (animaciones, transformaciones 3D, glassmorphism)
- 📱 Diseño responsivo con media queries
- 🎭 JavaScript para animaciones y lógica del algoritmo
- 🐍 Python para implementación de referencia
- 🎯 Animaciones y transiciones fluidas para una experiencia interactiva
✨ Efectos y Animaciones
- 🍃 Hojas animadas flotando en el fondo con movimiento aleatorio
- 🌀 Logo 3D rotativo con efecto de perspectiva
- 🎭 Efectos de tarjetas con hover para elevación y resplandor
- 💦 Efecto de ondas (ripple) en botones al hacer clic
- 🏃♂️ Animación de entrada fadeInUp en cascada para los elementos principales
- 🔄 Transiciones suaves entre cada paso del algoritmo
- 💫 Efecto pulsante animado para el nombre del autor
- 🌈 Efectos de hover en iconos sociales con rotación y desplazamiento
- 🎯 Resaltado visual de los pasos activos con cambios de escala y color
- 📌 Efecto de scroll automático hacia el paso actual
🚀 Instalación
Clona el repositorio:
git clone https://github.com/Lizzy0981/PalindromeNumber-Visualizer.gitAbre el archivo index.html en tu navegador o usa un servidor local como Live Server de VSCode.
También puedes acceder a la versión desplegada aquí.
💡 Uso
- Ingresa un número entero en el campo de entrada.
- Haz clic en "Verificar palíndromo" para iniciar la visualización.
- Utiliza los controles "Anterior", "Siguiente" o "Auto" para ver la ejecución del algoritmo.
- Observa cómo se procesa matemáticamente el número original y se construye la mitad invertida.
- Al final, verás la comparación que determina si el número es un palíndromo.
📝 Descripción del problema
Palindrome Number es un problema que consiste en:
Dado un número entero x, determinar si es un palíndromo. Un número es un palíndromo si se lee igual de izquierda a derecha y de derecha a izquierda.
- No puedes convertir el número a string.
- Debes resolverlo usando operaciones matemáticas.
Ejemplos:
Entrada: x = 121
Salida: true (121 leído al revés sigue siendo 121)Entrada: x = -121
Salida: false (-121 leído al revés es 121-, no es un palíndromo)Entrada: x = 10
Salida: false (10 leído al revés es 01, no es un palíndromo)
🗂️ Estructura del proyecto
palindrome-number-visualizer/
│
├── index.html # Página principal con el visualizador interactivo
├── styles.css # Estilos CSS con efectos y animaciones
├── script.js # Lógica JavaScript para la visualización y animación
├── vercel.json # Configuración para despliegue en Vercel
├── python/
│ └── palindrome_number.py # Implementación del algoritmo en Python
└── README.md # Documentación del proyecto
📄 Licencia
Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.
👩💻 Créditos
Desarrollado con 💚 por Elizabeth Diaz Familia
🙏 Agradecimientos
- 🎓 Oracle Next Education por el apoyo educativo
- 🚀 Alura Latam por la formación y los desafíos
- 👨🏫 A los creadores del desafío Palindrome Number por su aporte a la comunidad
- 🌟 A todos los usuarios que utilizan esta herramienta para aprender
Log in or sign up for Devpost to join the conversation.