Ver todos los proyectos

Roman Numeral Converter

  • HTML
  • CSS

Descripción breve del proyecto.

Descripción de la imagen
Ver Proyecto Ver código

Los números romanos son un sistema de numeración que utiliza combinaciones de letras del alfabeto latino para representar valores numéricos. Este proyecto consiste en una aplicación que convierte números arábigos (como 1, 2, 3) en números romanos (como I, II, III), respetando las reglas de este sistema. La aplicación fue desarrollada utilizando HTML, CSS y JavaScript, y cuenta con un diseño inspirado en el manga Vagabond, con colores rojos y tipografías de estilo japonés.

Conocimientos Aplicados

  • Estructura semántica y diseño temático: Uso de HTML semántico y CSS para crear una interfaz visualmente atractiva y coherente con la temática inspirada en el manga Vagabond.

  • Lógica de programación: Implementación de algoritmos para convertir números arábigos a romanos, respetando las reglas de combinación de símbolos (por ejemplo, IV para 4, IX para 9).

  • Validación de entradas: Uso de condicionales para asegurar que el número ingresado esté dentro del rango válido (1 a 3999) y manejo de mensajes de error personalizados.

  • Manipulación del DOM: Métodos como getElementById(), addEventListener() y textContent para interactuar con la interfaz y mostrar resultados dinámicamente.

  • Diseño responsivo: Asegurar que la aplicación sea funcional y visualmente atractiva en diferentes dispositivos y tamaños de pantalla.

  • Pruebas y depuración: Validación de casos extremos, como números fuera de rango, entradas vacías y conversiones precisas (por ejemplo, 649 → DCXLIX).

Conclusión

Este proyecto no solo me permitió profundizar en la lógica de programación y manipulación del DOM, sino también explorar la creación de diseños temáticos y personalizados utilizando CSS. La combinación de un desafío técnico (la conversión de números) con un enfoque creativo en el diseño resultó en una aplicación funcional y visualmente impactante.

Además, reforcé mis habilidades en validación de entradas, manejo de errores y diseño responsivo, lo que me permitió crear una experiencia de usuario sólida y atractiva. Este proyecto es un ejemplo de cómo la programación y el diseño pueden trabajar juntos para crear soluciones únicas y memorables.