62 lines
5.1 KiB
Markdown
62 lines
5.1 KiB
Markdown
|
---
|
||
|
|
id: 587d78af367417b2b2512b03
|
||
|
|
title: Build a Survey Form
|
||
|
|
localeTitle: Crear un formulario de encuesta
|
||
|
|
isRequired: true
|
||
|
|
challengeType: 3
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id='description'>
|
||
|
|
<strong>Objetivo:</strong> crear una aplicación <a href='https://codepen.io' target='_blank'>CodePen.io</a> que sea funcionalmente similar a esta: <a href='https://codepen.io/freeCodeCamp/full/VPaoNP' target='_blank'>https://codepen.io/freeCodeCamp/full/VPaoNP</a> .
|
||
|
|
Cumplir con las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a> y obtener todas las pruebas para pasar. Dale tu propio estilo personal.
|
||
|
|
Puedes usar HTML, JavaScript y CSS para completar este proyecto. Se recomienda CSS simple porque eso es lo que las lecciones han cubierto hasta ahora y debe obtener algo de práctica con CSS simple. Puede utilizar Bootstrap o SASS si lo desea. No se recomiendan tecnologías adicionales (solo por ejemplo, jQuery, React, Angular o Vue) para este proyecto, y su uso es bajo su propio riesgo. Otros proyectos te darán la oportunidad de trabajar con diferentes pilas de tecnología como React. Aceptaremos e intentaremos solucionar todos los informes de problemas que utilizan la pila de tecnología sugerida para este proyecto. ¡Feliz codificación!
|
||
|
|
<strong>Historia de usuario n. ° 1:</strong> puedo ver un título con <code>id="title"</code> en texto de tamaño H1.
|
||
|
|
<strong>Historia de usuario n. ° 2:</strong> Puedo ver una breve explicación con <code>id="description"</code> en texto de tamaño P.
|
||
|
|
<strong>Historia de usuario n. ° 3:</strong> Puedo ver un <code>form</code> con <code>id="survey-form"</code> .
|
||
|
|
<strong>Historia de usuario n. ° 4:</strong> Dentro del elemento del formulario, debo ingresar mi nombre en un campo con <code>id="name"</code> .
|
||
|
|
<strong>Historia de usuario # 5:</strong> Dentro del elemento del formulario, debo ingresar un correo electrónico en un campo con <code>id="email"</code> .
|
||
|
|
<strong>Historia de usuario n. ° 6:</strong> Si ingreso un correo electrónico que no tiene el formato correcto, veré un error de validación de HTML5.
|
||
|
|
<strong>Historia de usuario # 7:</strong> Dentro del formulario, puedo ingresar un número en un campo con <code>id="number"</code> .
|
||
|
|
<strong>Historia de usuario n. ° 8:</strong> Si ingreso números que no son números en la entrada del número, veré un error de validación de HTML5.
|
||
|
|
<strong>Historia de usuario n. ° 9:</strong> si ingreso números fuera del rango de entrada de números, que están definidos por los atributos <code>min</code> y <code>max</code> , veré un error de validación de HTML5.
|
||
|
|
<strong>Historia de usuario # 10:</strong> Para los campos de ingreso de nombre, correo electrónico y número dentro del formulario, puedo ver las etiquetas correspondientes que describen el propósito de cada campo con los siguientes <code>id="name-label"</code> : <code>id="name-label"</code> , <code>id="email-label"</code> , y <code>id="number-label"</code> .
|
||
|
|
<strong>Historia del usuario n. ° 11:</strong> Para los campos de ingreso de nombre, correo electrónico y número, puedo ver el texto del marcador de posición que me da una descripción o instrucciones para cada campo.
|
||
|
|
<strong>Historia del usuario # 12:</strong> Dentro del elemento del formulario, puedo seleccionar una opción de un menú desplegable que tiene un <code>id="dropdown"</code> correspondiente <code>id="dropdown"</code> .
|
||
|
|
<strong>Historia de usuario # 13:</strong> Dentro del elemento del formulario, puedo seleccionar un campo de uno o más grupos de botones de radio. Cada grupo debe agruparse usando el atributo de <code>name</code> .
|
||
|
|
<strong>Historia del usuario n. ° 14:</strong> Dentro del elemento del formulario, puedo seleccionar varios campos de una serie de casillas de verificación, cada una de las cuales debe tener un atributo de <code>value</code> .
|
||
|
|
<strong>Historia de usuario # 15:</strong> Dentro del elemento del formulario, me presentan un área de <code>textarea</code> al final para comentarios adicionales.
|
||
|
|
<strong>Historia de usuario # 16:</strong> Dentro del elemento del formulario, se me presenta un botón con <code>id="submit"</code> para enviar todas mis entradas.
|
||
|
|
Puede construir su proyecto por medio de <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>este bolígrafo CodePen</a> . O puede usar este enlace CDN para ejecutar las pruebas en cualquier entorno que desee: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code>
|
||
|
|
Una vez que haya terminado, envíe la URL a su Proyecto de trabajo con todas sus pruebas aprobadas.
|
||
|
|
Recuerda usar el método de <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>lectura-búsqueda-pregunta</a> si te atascas.
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id='instructions'>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests: []
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|