58 lines
3.9 KiB
Markdown
58 lines
3.9 KiB
Markdown
---
|
|
id: 587d78af367417b2b2512b03
|
|
title: Crea un formulario de encuesta
|
|
challengeType: 3
|
|
forumTopicId: 301145
|
|
dashedName: build-a-survey-form
|
|
---
|
|
|
|
# --description--
|
|
|
|
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
|
|
|
|
Completa las siguientes [historias de usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) y consigue aprobar todos los tests. Dale tu propio estilo personal.
|
|
|
|
Puedes usar HTML, JavaScript y CSS para completar este proyecto. Se recomienda usar CSS puro porque eso es lo que las lecciones han cubierto hasta ahora y debes practicar un poco con él. Puedes usar Bootstrap o SASS si lo deseas. Tecnologías adicionales (por ejemplo, jQuery, React, Angular o Vue) no se recomiendan para este proyecto, y usarlas es bajo tu propio riesgo. Otros proyectos te darán la oportunidad de trabajar con diferentes stacks de tecnologías como React. Aceptaremos e intentaremos solucionar todos los informes de incidencias que utilicen el stack de tecnología sugerido para este proyecto. ¡Feliz día programando!
|
|
|
|
**Historia de Usuario #1:** Puedo ver un título con `id="title"` en texto tamaño H1.
|
|
|
|
**Historia de Usuario #2:** Puedo ver una breve explicación con `id="description"` en texto tamaño P.
|
|
|
|
**Historia de Usuario #3:** Puedo ver un elemento `form` con `id="survey-form"`.
|
|
|
|
**Historia de Usuario #4:** Dentro del elemento form, es requerido introducir mi nombre en un campo con `id="name"`.
|
|
|
|
**Historia de Usuario #5:** Dentro del elemento form, es requerido introducir un correo electrónico en un campo con `id="email"`.
|
|
|
|
**Historia de Usuario #6:** Si introduzco un correo electrónico que no cuente con el formato correcto, veré un error de validación HTML5.
|
|
|
|
**Historia de Usuario #7:** Dentro del formulario, puedo introducir un número en un campo con `id="number"`.
|
|
|
|
**Historia de Usuario #8:** Si introduzco valores no numéricos en la entrada de números, veré un error de validación HTML5.
|
|
|
|
**Historia de Usuario #9:** Si introduzco números fuera del rango de la entrada de números, los cuales son definidos por los atributos `min` y `max`, veré un error de validación HTML5.
|
|
|
|
**Historia de Usuario #10:** Para los campos nombre, correo, y número dentro del formulario puedo ver las etiquetas (labels) correspondientes que describen el propósito de cada campo con los siguientes ids: `id="name-label"`, `id="email-label"`, y `id="number-label"`.
|
|
|
|
**Historia de Usuario #11:** Para los campos nombre, correo y número, puedo ver el texto provisional que me da una descripción o instrucciones para cada campo.
|
|
|
|
**Historia de Usuario #12:** Dentro del elemento form, puedo seleccionar una opción de un menú desplegable que tiene el respectivo `id="dropdown"`.
|
|
|
|
**Historia de Usuario #13:** Dentro del elemento form, puedo seleccionar un campo de uno o más grupos de botones de radio. Cada grupo debe agruparse utilizando el atributo `name`.
|
|
|
|
**Historia de Usuario #14:** Dentro del elemento form, puedo seleccionar varios campos en una serie de casillas de verificación, cada una de las cuales debe tener un atributo `value`.
|
|
|
|
**Historia de Usuario #15:** Dentro del elemento form, me es presentado un `textarea` final para hacer comentarios adicionales.
|
|
|
|
**Historia de Usuario #16:** Dentro del elemento form, me es presentado un botón con `id="submit"` para enviar todas mis entradas.
|
|
|
|
Puedes construir tu proyecto usando <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar los tests en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
|
|
|
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todos los tests aprobados.
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
// solution required
|
|
```
|