https://github.com/jairo51067/restricted-textarea

"Restricted Textarea" es un componente web diseñado para limitar la cantidad de caracteres que un usuario puede escribir, brindando una experiencia visual intuitiva al cambiar el color de borde según el estado del texto (dentro del límite, advertencia, o sobrepasado). Este proyecto se desarrolló como base para integrarse en sistemas más amplios.
https://github.com/jairo51067/restricted-textarea

css3 html5 javascript responsive-web-design

Last synced: about 2 months ago
JSON representation

"Restricted Textarea" es un componente web diseñado para limitar la cantidad de caracteres que un usuario puede escribir, brindando una experiencia visual intuitiva al cambiar el color de borde según el estado del texto (dentro del límite, advertencia, o sobrepasado). Este proyecto se desarrolló como base para integrarse en sistemas más amplios.

• Host: GitHub
• URL: https://github.com/jairo51067/restricted-textarea
• Owner: jairo51067
• Created: 2024-10-09T15:54:00.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-11-19T19:35:01.000Z (6 months ago)
• Last Synced: 2025-01-30T09:17:11.676Z (3 months ago)
• Topics: css3, html5, javascript, responsive-web-design
• Language: CSS
• Homepage: https://jairo51067.github.io/Restricted-Textarea/
• Size: 280 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Restricted Textarea

"Restricted Textarea" es un componente web diseñado para limitar la cantidad de caracteres que un usuario puede escribir, brindando una experiencia visual intuitiva al cambiar el color de borde según el estado del texto (dentro del límite, advertencia, o sobrepasado). Este proyecto se desarrolló como base para integrarse en sistemas más amplios, enfrentando desafíos en la manipulación dinámica del DOM y asegurando accesibilidad y estética en el diseño.

[Ver el proyecto en vivo](https://jairo51067.github.io/Restricted-Textarea/)

Vista previa del proyecto

![textarea restrigido](https://github.com/user-attachments/assets/e14d464c-21fb-492e-b2a4-b567d60b9143)




![textarea restringido_230](https://github.com/user-attachments/assets/7f02ba3b-f669-44e9-8af5-b236bacc2db2)




![textarea restrigido_250](https://github.com/user-attachments/assets/11e390e6-dc9c-47fc-ad4c-b13754684abe)

## Descripción

"Restricted Textarea" es un componente interactivo que limita el número de caracteres permitidos en un campo de texto. Cambia dinámicamente el color del borde y del texto según el número de caracteres escritos, proporcionando una experiencia de usuario clara e intuitiva. Fue creado para ser reutilizable en proyectos web más grandes.

## Características

- **Control dinámico de caracteres**: Limita a 250 caracteres e informa en tiempo real cuántos se han escrito.

- **Estilos adaptativos**: Cambia el color del borde según el estado del texto (dentro del límite, advertencia, o sobrepasado).

- **Interactividad en tiempo real**: Responde al evento de escritura del usuario de manera instantánea.

- **Portabilidad**: Fácil de integrar en cualquier proyecto web.

## Tecnologías Utilizadas

- **HTML5**: Estructura del contenido web, incluyendo el elemento `textarea` y un diseño semántico.

- **CSS3**: Personalización visual básica del componente, utilizando colores y estilos adaptativos.

- **JavaScript**: Implementación de lógica interactiva para el control del número de caracteres, manipulación del DOM y cambios dinámicos de estilo.

## Instalación

1. Clona el repositorio:

    ```bash

    git clone https://github.com/usuario/nombre_del_proyecto.git

    ```

2. Abre el archivo `index.html` en tu navegador web preferido para probar el proyecto.

## Cómo Contribuir

Si deseas contribuir a este proyecto, por favor realiza lo siguiente:

1. Haz un fork del repositorio.

2. Crea una nueva rama (`git checkout -b nombre-de-la-rama`).

3. Realiza tus cambios.

4. Envía un pull request con una descripción clara de los cambios realizados.

Agradezco cualquier sugerencia o mejora. No dudes en abrir un "issue" o enviar un "pull request".  

¡Tu colaboración será bienvenida!

## Licencia

Este proyecto está bajo la licencia MIT.

## Autor

Este proyecto fue desarrollado por **Jairo Cárdenas**.  

Si tienes preguntas o sugerencias, contáctame:

- Correo electrónico: [[email protected]](mailto:[email protected])

- GitHub: [@jairo51067](https://github.com/jairo51067)

https://roadmap.sh/projects/restricted-textarea