🎨 Etch-a-Sketch Web
Versión web interactiva del clásico juguete “Etch-a-Sketch”, desarrollada como ejercicio práctico para el Proyecto Odin. Permite al usuario dibujar en una cuadrícula dinámica usando el cursor del ratón.
📑 Tabla de Contenidos
✨ Características
- Cuadrícula personalizable de hasta 100x100 celdas.
- Colores aleatorios en formato RGB generados al pasar el cursor por primera vez.
- Aumento progresivo de opacidad en pasadas sucesivas sobre una celda.
- Botón para reiniciar el dibujo y establecer un nuevo tamaño de cuadrícula.
- Interfaz simple, moderna y responsive adaptada a múltiples dispositivos.
🧰 Tecnologías
- HTML5
- CSS3
- JavaScript (ES6+)
- Git y GitHub para control de versiones
⚙️ Instalación
- Clona el repositorio desde GitHub:
git clone https://github.com/Ayfos/etch-a-sketch-proyect
🕹️ Uso
- Al cargar la página, aparecerá una cuadrícula por defecto.
- Puedes dibujar simplemente pasando el cursor por encima de las celdas.
- Haz clic en el botón “Reiniciar” para cambiar el tamaño de la cuadrícula o borrar el lienzo.
📁 Estructura de Archivos
etch-a-sketch-proyect/
├── index.html
├── style.css
├── script.js
└── README.md
📘 Aprendizaje
Este proyecto me permitió reforzar conocimientos de:
- Manipulación del DOM
- Gestión de eventos en JavaScript
- Diseño CSS usando FlexBox en lugar de Grid
- Buenas prácticas en Git y GitHub
- Documentación clara y estructurada
🧑💻 Autor
Creado por Ayfos como parte del curso JavaScript del Proyecto Odin.
¡Con ganas de seguir aprendiendo y compartiendo!