lang="es": Hola, persona que está viendo mi proyecto. Aquí puedes ver la demo de mi solución. Este desafío fue una buena experiencia para empezar a aplicar los conocimientos del desarrollo front-end con librerías y empezar a conocer cómo puede funcionar la reutilización de componentes a nivel de código.
Justamente, este proyecto me ayudó a mejorar mi capacidad de reutilizar componentes y de qué forma, aparte de mantener los estilos de cada componente bien definidos para que no existan confusiones. Literalmente solo hay un componente de botón definido en el código.
lang="en": Hello, person who is viewing my project. Here you can see the demo of my solution. This challenge was a good experience to start applying the knowledge of front-end development with libraries and start to know how component reuse can work at code level.
Precisely, this project helped me to improve my ability to reuse components and in what way, apart from keeping the styles of each component well defined so that there is no confusion. There is literally only one button component defined in the code.
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 diferentes tipos de botones: default, outline y text | I can see different button types: default, outline and text
-
User story: Puedo elegir deshabilitar la sombra | I can choose to disable box-shadow
-
User story: Puedo elegir deshabilitar el botón | I can choose to disable the button
-
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 botones | I can have different button sizes
-
User story: Puedo tener colores diferentes | I can have different colors
-
User story: Cuando paso por encima o enfoco el botón, 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 botón | I can still access all button attributes.
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/your-user-name/your-project-name
# Install dependencies
$ npm install
# Run the app
$ npm startlang="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/your-user-name/your-project-name
# Install dependencies
$ npm install
# Run the app
$ npm start- Sitio web | Website
- Codepen @javiervaleriano
- Devchallenges.io
- GitHub @javiervaleriano
- Twitter @javaleriano2