freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.spanish.md

39 lines
5.1 KiB
Markdown
Raw Normal View History

2018-10-08 17:34:43 +00:00
---
id: 587d78af367417b2b2512b03
title: Build a Survey Form
isRequired: true
challengeType: 3
2018-10-10 20:20:40 +00:00
videoUrl: ''
localeTitle: Crear un formulario de encuesta
2018-10-08 17:34:43 +00:00
---
## Description
2018-10-10 20:20:40 +00:00
<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> . Cumple las siguientes <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">historias de usuario</a> y haz que pasen todas las pruebas. 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=&quot;title&quot;</code> en texto de tamaño H1. <strong>Historia de usuario n. ° 2:</strong> Puedo ver una breve explicación con <code>id=&quot;description&quot;</code> en texto de tamaño P. <strong>Historia de usuario n. ° 3:</strong> Puedo ver un <code>form</code> con <code>id=&quot;survey-form&quot;</code> . <strong>Historia de usuario # 4:</strong> Dentro del elemento del formulario, debo ingresar mi nombre en un campo con <code>id=&quot;name&quot;</code> . <strong>Historia de usuario n. ° 5:</strong> Dentro del elemento del formulario, debo ingresar un correo electrónico en un campo con <code>id=&quot;email&quot;</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 n. ° 7:</strong> Dentro del formulario, puedo ingresar un número en un campo con <code>id=&quot;number&quot;</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 del ingreso 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 n. ° 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=&quot;name-label&quot;</code> : <code>id=&quot;name-label&quot;</code> , <code>id=&quot;email-label&quot;</code> , y <code>id=&quot;number-label&quot;</code> . <strong>Historia de 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 n. ° 12:</strong> Dentro del elemento del formulario, puedo seleccionar una opción de un menú desplegable que tiene un <code>id=&quot;dropdown&quot;</code> correspondiente <code>id=&quot;dropdown&quot;</code> . <strong>Historia de usuario n. ° 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 de 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 n. ° 16:</strong> Dentro del elemento de formulario,
2018-10-08 17:34:43 +00:00
## Instructions
2018-10-10 20:20:40 +00:00
<section id="instructions">
2018-10-08 17:34:43 +00:00
</section>
## Tests
<section id='tests'>
```yml
tests: []
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>