/reusable-input-component

Primary LanguageJavaScript

Componente Input | Input Component

Solution for a challenge from Devchallenges.io.

Demo | Solución / Solution | Desafío / Challenge

Table of Contents

Visión general | Overview

Escritorio | Desktop

Vista de escritorio 1 | Desktop view 1 Vista de escritorio 2 | Desktop view 2 Vista de escritorio 3 | Desktop view 3

Móvil | Mobile

Vista móvil 1 | Mobile view 1

Vista móvil 2 | Mobile view 2

Vista móvil 3 | Mobile view 3

lang="es": ¡Hola, persona que está viendo mi proyecto! :) Aquí puedes ver mi demo a la solución. En el proceso de desarrollo me encontré con algunas interrogantes acerca de cómo poder abordar ciertas características de las historias de usuario para reflejarlo en el código. Al final en algunas utilicé mi creatividad para poder añadirle la funcionalidad correspondiente. Lo logré y finalmente fue bastante similar al proyecto anterior que hice del componente de botón.

En este proyecto he mejorado mi capacidad de escribir código React para la reutilización de componentes.

lang="en": Hello, person who is viewing my project! :) Here you can see my demo to the solution. In the development process I encountered some questions about how to address certain features of the user stories to reflect it in the code. In the end in some of them I used my creativity to be able to add the corresponding functionality. I succeeded and finally it was quite similar to the previous project I did of the button component.

In this project I improved my ability to write React code for component reuse.

Construido con | Built With

Características | Features

lang="es": Esta aplicación/sitio se creó como una entrega a un desafío de Devchallenges. El desafío fue crear una página para completar las historias de usuario dadas:

lang="en": This application/site was created as a submission to a DevChallenges challenge. The challenge was to build a page to complete the given user stories.

  • User story: Puedo ver el estado de error | I can see error state

  • User story: Pudeo elegir desactivar el campo de entrada | I can choose to disable input

  • User story: Puedo elegir tener un texto de ayuda | I can choose to have helper text

  • User story: Puedo elegir tener un ícono a la izquierda o a la derecha | I can choose to have an icon on the left or right

  • User story: Puedo tener diferentes tamaños de campos de entrada | I can have different input sizes

  • User story: Puedo tener diferentes colores | I can have different colors

  • User story: Puedo elegir que el campo de entrada tome el ancho del elemento padre | I can choose to have input take the width of the parent

  • User story: Puedo tener un campo de entrada multilínea como un textarea (área de texto) | I can have multiline input like a textarea

  • User story: Cuando paso por encima o enfoco, puedo ver indicadores visuales | When I hover or focus, I can see visual indicators

  • User story: Aún puedo acceder a todos los atributos del campo de entrada | I can still access all input attributes.

Cómo usar | How To Use

lang="es": Para clonar y ejecutar esta aplicación, necesitarás Git y Node.js (que viene con npm) instalados en tu ordenador. Desde tu línea de comandos:

# Clone this repository
$ git clone https://github.com/javiervaleriano/reusable-input-component
# Install dependencies
$ npm install
# Run the app
$ npm start

lang="en": To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/javiervaleriano/reusable-input-component
# Install dependencies
$ npm install
# Run the app
$ npm start

Contacto | Contact