TwoSum-II-Visualizer

Visualizador de algoritmo

Comment

🌌 Two Sum II Visualizer - Algoritmo Two Pointers

Un visualizador futurista e interactivo para el algoritmo "Two Sum II", optimizado para arrays ordenados, con una explicación paso a paso de cómo funciona la técnica de dos punteros.

📱 Imágenes de la Aplicación 📱

![Two Sum II Visualizer - Interfaz Principal] Captura de pantalla_25-2-2025_173932_

Captura de pantalla de la interfaz principal de Two Sum II Visualizer, mostrando el diseño futurista con efectos neón.

✨ Características

  • 🎯 Visualización paso a paso del algoritmo Two Sum II con arrays ordenados
  • 🧠 Implementación de la técnica "Two Pointers" con O(n) temporal y O(1) espacial
  • 🌠 Diseño futurista con fondo de estrellas y efectos neón
  • 📱 Diseño responsive adaptable a todos los dispositivos
  • 🎬 Controles interactivos (anterior, siguiente, auto, reiniciar)
  • 👆 Punteros visuales que se mueven en tiempo real
  • 📋 Ejemplos predefinidos para pruebas rápidas
  • 📝 Explicación detallada de cada paso del algoritmo
  • 🏆 Destacado visual de la solución encontrada

🛠️ Tecnologías utilizadas

  • 💻 HTML5, CSS3 y JavaScript (ES6+)
  • 🎨 CSS avanzado (gradientes, animaciones, efectos neón)
  • 📱 Diseño responsivo con media queries
  • 🎭 JavaScript para animaciones y lógica del algoritmo
  • 🐍 Python para implementación de referencia
  • 🌈 Variables CSS para una personalización flexible

✨ Efectos y Animaciones

  • 🌠 Fondo animado con estrellas moviéndose a diferentes velocidades
  • 🌈 Gradientes dinámicos para títulos, botones y elementos visuales
  • ✨ Efecto de brillo (glow) en botones principales
  • 💫 Animación pulsante para el nombre del autor
  • 👆 Efectos hover con transformaciones y brillos en todos los elementos interactivos
  • 🔄 Animación de movimiento para los punteros izquierdo y derecho
  • 🌟 Efectos de escala y resplandor para destacar elementos del array
  • 📊 Transiciones suaves entre cada paso del algoritmo
  • 💎 Efectos de profundidad con glassmorphism y sombras dinámicas

🚀 Instalación

  1. Clona el repositorio:

    git clone https://github.com/Lizzy0981/TwoSum-II-Visualizer.git

  2. Abre el archivo index.html en tu navegador o usa un servidor local como Live Server de VSCode.

  3. También puedes acceder a la versión desplegada aquí.

💡 Uso

  1. Ingresa un array ordenado de números separados por comas en el campo "Array ordenado".
  2. Ingresa el valor objetivo en el campo "Valor objetivo (target)".
  3. Haz clic en "Iniciar búsqueda" para comenzar la visualización.
  4. Utiliza los controles "Anterior", "Siguiente" o "Auto" para ver la ejecución del algoritmo.
  5. Observa cómo los punteros izquierdo y derecho se mueven para encontrar la solución.
  6. Sigue la explicación detallada de cada paso en la sección inferior.

📝 Descripción del problema

Two Sum II - Input Array is Sorted es una variante del problema clásico Two Sum:

Dado un array ordenado de enteros numbers y un entero target, encuentra los índices de los dos números que suman target.

  • El array está ordenado en orden ascendente.
  • Los índices empiezan desde 1 (no desde 0).
  • Debe haber exactamente una solución.
  • No puedes usar el mismo elemento dos veces.
  • Tu solución debe utilizar solo espacio constante O(1).

🗂️ Estructura del proyecto

two-sum-ii-visualizer/
│
├── index.html          # Página principal con el visualizador interactivo
├── styles.css          # Estilos CSS con efectos futuristas
├── script.js           # Lógica JavaScript para la visualización y algoritmo
├── vercel.json         # Configuración para despliegue en Vercel
├── python/
│   └── two_sum_ii.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 Two Sum II por su aporte a la comunidad
  • 🌟 A todos los usuarios que utilizan esta herramienta para aprender
Share this project:

Updates