c2a11ad00d
* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
50 lines
3.5 KiB
Markdown
50 lines
3.5 KiB
Markdown
---
|
|
id: bd7158d8c442eddfaeb5bd13
|
|
title: Construye una máquina de citas al azar
|
|
challengeType: 3
|
|
forumTopicId: 301374
|
|
dashedName: build-a-random-quote-machine
|
|
---
|
|
|
|
# --description--
|
|
|
|
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcione de manera similar a esta: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
|
|
|
Rellena las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que todas las pruebas pasen. Dale tu propio estilo personal.
|
|
|
|
Puedes usar cualquier mezcla de HTML, Javascript, CSS, Bootstrap, SASS, React, Redux, y jQuery para completar este proyecto. Puedes usar un framework de frontend (como React por ejemplo) porque esta sección trata sobre el aprendizaje de frameworks de frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo su propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de incidencias que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
|
|
|
|
**Historia de usuario #1:** Puedo ver un elemento contenedor con un archivo `id="quote-box"`.
|
|
|
|
**Historia de usuario #2:** Dentro de `#quote-box`, puedo ver un elemento con su correspondiente `id="text"`.
|
|
|
|
**Historia de usuario #3:** Dentro de `#quote-box`, puedo ver un elemento con su correspondiente `id="author"`.
|
|
|
|
**Historia de usuario #4:** Dentro de `#quote-box`, puedo ver un elemento en el que se puede hacer clic con su correspondiente `id="new-quote"`.
|
|
|
|
**Historia de usuario #5:** Dentro de `#quote-box`, puedo ver un elemento clickeable `a` con su correspondiente `id="tweet-quote"`.
|
|
|
|
**Historia de usuario #6:** En el primer cargado, mi máquina de cotizaciones muestra una cita aleatoria en el elemento con `id="text"`.
|
|
|
|
**Historia de usuario #7:**En el primer cargado, mi máquina de cotizaciones muestra al autor de la cita aleatoria en el elemento con `id="author"`.
|
|
|
|
**Historia de usuario #8:** Cuando se hace clic en el botón `#new-quote`, mi máquina de cotizaciones debería buscar una nueva cita y mostrarla en el elemento `#text`.
|
|
|
|
**Historia de usuario #9:** Mi máquina de cotizaciones debería buscar al autor de la nueva cita cuando se hace click en el botón `#new-quote` y mostrarlo en el elemento `#author`.
|
|
|
|
**Historia de usuario #10:** Puedo tuitear la cita actual haciendo clic en `#tweet-quote` del elemento `a`. Este elemento `a` debe incluir la ruta `"twitter.com/intent/tweet"` en su atributo `href` para tuitear la cita actual.
|
|
|
|
**Historia de usuario #11:**El elemento contenedor `#quote-box` debe estar centrado horizontalmente. Ejecuta las pruebas con el nivel de zoom del navegador al 100% y la página maximizada.
|
|
|
|
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>utilizando la plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes utilizar este enlace CDN para ejecutar cualquier prueba en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
|
|
|
Una vez que hayas terminado, envía la URL a tu proyecto de trabajo con todas sus pruebas verificadas.
|
|
|
|
**Nota:** Twitter no permite que se carguen enlaces en un iframe. Intenta usar el atributo `target="_blank"` o `target="_top"` en el elemento `#tweet-quote` si tu tweet no se carga. `target="_top"` reemplazará la pestaña actual, así que asegúrate de que tu trabajo esté guardado.
|
|
|
|
# --solutions--
|
|
|
|
```js
|
|
// solution required
|
|
```
|