https://github.com/juliorom/traffic-light-react
Una simulación interactiva de un semáforo construido con React. El proyecto permite seleccionar luces (roja, amarilla, verde) para encenderlas, alternar colores de forma secuencial con un botón y añadir dinámicamente un color extra (púrpura). Utiliza manejo de estado con useState, y estilización dinámica con CSS. 🚦
https://github.com/juliorom/traffic-light-react
nodejs react webpack
Last synced: 3 months ago
JSON representation
Una simulación interactiva de un semáforo construido con React. El proyecto permite seleccionar luces (roja, amarilla, verde) para encenderlas, alternar colores de forma secuencial con un botón y añadir dinámicamente un color extra (púrpura). Utiliza manejo de estado con useState, y estilización dinámica con CSS. 🚦
- Host: GitHub
- URL: https://github.com/juliorom/traffic-light-react
- Owner: JulioRom
- Created: 2025-01-08T21:25:24.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-08T21:57:05.000Z (5 months ago)
- Last Synced: 2025-01-26T06:14:20.969Z (5 months ago)
- Topics: nodejs, react, webpack
- Language: JavaScript
- Homepage:
- Size: 53.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Simulación de semáforo
Este proyecto es una simulación de un semáforo creado con React. Permite a los usuarios interactuar con el semáforo haciendo clic en las luces para encenderlas y apagarlas. Las características adicionales incluyen alternar entre colores y agregar dinámicamente un nuevo color de luz.
## Características
- **Semáforo interactivo**: haz clic en cualquier luz (roja, amarilla, verde) para encenderla y apagar las demás.
- **Botón de alternancia**: un botón que alterna entre los colores de la luz en secuencia.
- **Agregar nueva luz**: un botón para agregar dinámicamente una luz violeta al semáforo.
- **Efectos visuales mejorados**: las luces se iluminan y agrandan levemente cuando están activas, para una mejor visibilidad.
## Instalación
Para ejecutar este proyecto localmente, siga estos pasos:
1. Clone el repositorio:
```bash
git clone https://github.com/JulioRom/traffic-light-react
```
2. Navegue hasta el directorio del proyecto:
```bash
cd traffic-light-simulation
```
3. Instale las dependencias:
```bash
npm install
```
4. Inicie el servidor de desarrollo:
```bash
npm run start
```
5. Abra su navegador y navegue hasta:
```
http://localhost:3000
```
## Descripción general del código
### Componente principal: `TrafficLight`
- **Administración de estado**:
- `color`: rastrea el color activo actualmente.
- `colors`: una matriz de colores de luz disponibles (inicialmente rojo, amarillo, verde).
- **Funciones**:
- `toggleColor`: recorre los colores de luz secuencialmente.
- `addPurple`: Agrega una luz violeta al semáforo si aún no existe.
- **Renderizado**:
- Un `div` representa cada luz, con un estilo dinámico para indicar la luz activa.
### Estilo
- El contenedor del semáforo tiene un estilo que se asemeja a un semáforo del mundo real.
- Las luces son circulares y cambian de apariencia (brillo y tamaño) cuando están activas.
- El contenedor se centra en la pantalla mediante CSS flexbox.
### Botones
- **Alternar color**: Cambia de luces.
- **Agregar púrpura**: Agrega una luz violeta de manera dinámica.
## Estructura de archivo
```plaintext
.
├── src
│ ├── index.js # Punto de entrada para la aplicación
│ ├── TrafficLight.js # Componente principal con todas las funciones
│ └── styles.css # Estilos para la aplicación
├── public
│ └── index.html # Plantilla HTML
├── package.json # Dependencias y scripts del proyecto
└── README.md # Documentación del proyecto
```
## Mejoras futuras
- **Colores personalizados**: permite a los usuarios agregar cualquier color ingresando un código hexadecimal o seleccionando de un selector de color.
- **Automatización temporizada**: alterna automáticamente las luces a intervalos fijos.
- **Optimización móvil**: mejora el diseño y la interacción táctil para dispositivos móviles.
## Licencia
Este proyecto es de código abierto y está disponible bajo la licencia MIT.
## Contribución
No dudes en bifurcar el repositorio y enviar solicitudes de incorporación de mejoras o correcciones de errores. ¡Las contribuciones son bienvenidas!
## Autor
- **Desarrollado por JulioRom**
- **Contacto:** [[email protected]](mailto:[email protected])
- **GitHub:** [https://github.com/JulioRom](https://github.com/JulioRom)