57 lines
4.4 KiB
Markdown
57 lines
4.4 KiB
Markdown
|
---
|
||
|
|
id: bd7158d8c442eddfaeb5bd13
|
||
|
|
title: Build a Random Quote Machine
|
||
|
|
localeTitle: Construir una máquina de cotización aleatoria
|
||
|
|
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/qRZeGZ' target='_blank'>https://codepen.io/freeCodeCamp/full/qRZeGZ</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.
|
||
|
|
Puede usar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debería usar un marco frontend (como React, por ejemplo) porque esta sección trata sobre el aprendizaje de marcos frontend. No se recomiendan las tecnologías adicionales no enumeradas anteriormente y su uso es bajo su propio riesgo. Estamos considerando la compatibilidad con otros marcos de frontend, como Angular y Vue, pero actualmente no se admiten. 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 elemento de envoltorio con un <code>id="quote-box"</code> correspondiente <code>id="quote-box"</code> .
|
||
|
|
<strong>Historia de usuario # 2:</strong> Dentro de <code>#quote-box</code> , puedo ver un elemento con una <code>id="text"</code> correspondiente <code>id="text"</code> .
|
||
|
|
<strong>Historia de usuario # 3:</strong> Dentro de <code>#quote-box</code> , puedo ver un elemento con un <code>id="author"</code> correspondiente <code>id="author"</code> .
|
||
|
|
<strong>Historia de usuario # 4:</strong> Dentro de <code>#quote-box</code> , puedo ver un elemento seleccionable con un <code>id="new-quote"</code> correspondiente <code>id="new-quote"</code> .
|
||
|
|
<strong>Historia de usuario # 5:</strong> Dentro de <code>#quote-box</code> , puedo ver un clic <codea</code> elemento con un <code>id="tweet-quote"</code> correspondiente <code>id="tweet-quote"</code> .
|
||
|
|
<strong>Historia de usuario # 6:</strong> En la primera carga, mi máquina de cotizaciones muestra una cita aleatoria en el elemento con <code>id="text"</code> .
|
||
|
|
<strong>Historia de usuario # 7:</strong> En la primera carga, mi máquina de citas muestra el autor de la cita aleatoria en el elemento con <code>id="author"</code> .
|
||
|
|
<strong>Historia de usuario # 8:</strong> Cuando se hace clic en el botón <code>#new-quote</code> , mi máquina de cotizaciones debería buscar una nueva cita y mostrarla en el elemento <code>#text</code> .
|
||
|
|
<strong>Historia de usuario # 9:</strong> Mi máquina de cotizaciones debe buscar al autor de la nueva cotización cuando se hace clic en el botón <code>#new-quote</code> y mostrarla en el elemento <code>#author</code> .
|
||
|
|
<strong>Usuario Historia # 10:</strong> Puedo Tweet la cotización actual haciendo clic en el <code>#tweet-quote</code> <code>a</code> elemento. Este <code>a</code> elemento debe incluir la <code>"twitter.com/intent/tweet"</code> ruta de acceso en su <code>href</code> atributo a tweet la cotización actual.
|
||
|
|
<strong>Historia de usuario # 11:</strong> El elemento <code>#quote-box</code> wrapper debe estar centrado horizontalmente. Ejecute las pruebas con el nivel de zoom del navegador al 100% y la página maximizada.
|
||
|
|
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>
|