gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
d493150f26f10c8fc64220da74eb3b44c3273eda
freeCodeCamp/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
Shaun Hamilton c2a11ad00d feat: add 'back/front end' in curriculum (#42596) 
* 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>
2021-08-13 21:57:13 -05:00

6.6 KiB
Raw Blame History

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
bd7158d8c442eddfaeb5bd0f Construye un reloj 25 + 5 3 301373 build-a-25--5-clock

--description--

Objetivo: Construye una aplicación funcional CodePen.io similar a esta: https://codepen.io/freeCodeCamp/full/XpKrrW.

Completa las siguientes historias de usuario y consigue pasar todas las pruebas. Dale tu propio estilo personal.

Puedes utilizar una combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Deberías utilizar un framework frontend (como React por ejemplo) porque esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales a las indicadas anteriormente, su utilización corre bajo su propio riesgo. Estamos considerando apoyar otros frameworks frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos solucionar todos los informes de incidencias que utilicen el conjunto de tecnologías sugeridas para este proyecto. ¡Feliz programación!

Historia de usuario #1: Puedo ver un elemento con id="break-label" que contiene una cadena (por ejemplo: "Break Length").

Historia de usuario #2: Puedo ver un elemento con id="session-label" que contiene una cadena (p.ej "Session Length").

Historia de usuario #3: Puedo ver dos elementos cliqueables con los siguientes IDs: id="break-decrement" y id="session-decrement".

Historia de usuario #4: Puedo ver dos elemento cliqueables con los siguientes IDs: id="break-increment" y id="session-increment".

Historia de usuario #5: Puedo ver un elemento con el correspondiente id="break-length" que por defecto (al cargarse) muestra el valor 5.

Historia de usuario #6: Puedo ver un elemento con el correspondiente id="session-length", que por defecto muestra el valor 25.

Historia de usuario #7: Puedo ver un elemento con el correspondiente id="timer-label", que contiene una cadena indicando si la sesión esta inicializada (p.ej. "Session").

Historia de usuario #8: Puedo ver un elemento con el correspondiente id="time-left". NOTA: En pausa o en ejecución, el valor en este campo debe mostrarse siempre en formato mm:ss (es decir: 25:00).

User Story #9: Puedo ver un elemento cliqueable con el correspondiente id="start_stop".

User Story #10: Puedo ver un elemento cliqueable con el correspondiente id="reset".

Historia de usuario #11: Cuando hago clic en el elemento con el id: reset, cualquier temporizador en ejecución debe detenerse. El valor en el id="break-length" debe regresar a 5, el valor en el id="session-length" debe regresar a 25 y el elemento con id="time-left" debe reiniciarse a su estado predeterminado.

Historia de usuario #12: Cuando hago clic en el elemento con id: break-decrement, el valor en id="break-length" se reduce en 1, y puedo ver el valor actualizado.

Historia de usuario #13: Cuando hago clic en el elemento con id: break-increment, el valor en id="break-length" se incrementa en 1 y puedo ver el valor actualizado.

Historia de usuario #14: Cuando hago clic en el elemento con id: session-decrement, el valor en id="session-length" se reduce en 1 y puedo ver el valor actualizado.

Historia de usuario #15: Cuando hago clic en el elemento con id: session-increment, el valor en id="session-length" se incrementa en 1 y puedo ver el valor actualizado.

Historia de usuario #16: No debo ser capaz de establecer una duración de la sesión o pausa <= 0.

Historia de usuario #17: No debería poder establecer una duración de la sesión o pausa > 60.

Historia de usuario #18: Cuando hago clic por primera vez en el elemento con el correspondiente id="start_stop", el temporizador debe comenzar a correr desde el valor mostrado actualmente en id="session-length", incluso si el valor se incrementó o se redujo respecto al valor original 25.

Historia de usuario #19: Si el temporizador se está ejecutando, el elemento con el id: time-left debería mostrar el tiempo restante en formato mm:ss (reduciendo 1 y actualizando el valor mostrado cada 1000ms).

Historia de usuario #20: Si el temporizador se está ejecutando y hago clic en el elemento id="start_stop", la cuenta atrás debería pausarse.

Historia de usuario #21: Si el temporizador está pausado y hago clic en el elemento id="start_stop", la cuenta atrás debe reanudarse desde el punto en el que fue pausada.

Historia de usuario #22: Cuando la cuenta atrás de la sesión llega a cero (NOTA: temporizador DEBE llegar a 00:00) y una nueva cuenta atrás comienza, el elemento cuyo id es timer-label debería mostrar una cadena en la que se indica que el descanso (break) ha comenzado.

Historia de usuario #23: Cuando la cuenta atrás de la sesión llega a cero (NOTA: temporizador DEBE llegar a 00:00), una nueva cuenta atrás comienza para el periodo de descanso (break) y se inicia desde el valor mostrado actualmente por el elemento id="break-length".

Historia de usuario #24: Cuando la cuenta atrás en el periodo de descanso (break) llega a cero (NOTA: temporizador DEBE llegar a 00:00) y una nueva cuenta atrás debe comenzar, el elemento cuyo id es timer-label debe mostrar una cadena en la que se indica que la sesión ha comenzado.

Historia de usuario #25: Cuando la cuenta atrás en el periodo de descanso (break) llega a cero (NOTA: temporizador DEBE llegar a 00:00), una nueva cuenta atrás debe comenzar para la sesión, la cual se inicia desde el valor mostrado actualmente por el elemento id="session-length".

Historia de usuario #26: Cuando una cuenta atrás llega a cero (NOTA: temporizador DEBE llegar a 00:00), debe reproducirse un sonido que indica que el tiempo se ha agotado. Se debe utilizar una etiqueta HTML5 audio y tener un id="beep".

Historia de usuario #27: El elemento de audio id="beep" debe ser de 1 segundo o mayor.

Historia de usuario #28: El elemento de audio con id: beep dejará de reproducirse y se reiniciará al hacer clic en el elemento con id: reset.

Puedes construir tu proyecto con usando esta plantilla CodePen y haciendo clic en Save para crear tu propio Pen. O puedes utilizar este enlace CDN para ejecutar las pruebas 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 con todos los tests pasados.

--solutions--

// solution required