Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/XpKrrW . Cumpra as histórias de usuário abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! User Story # 1: Eu posso ver um elemento com id="break-label" que contém uma string (por exemplo, "Break Length"). User Story # 2: Eu posso ver um elemento com id="session-label" que contém uma string (por exemplo, "Session Length"). User Story # 3: Eu posso ver dois elementos clicáveis com IDs correspondentes: id="break-decrement" e id="session-decrement" . User Story # 4: Eu posso ver dois elementos clicáveis com IDs correspondentes: id="break-increment" e id="session-increment" . User Story # 5: Eu posso ver um elemento com um id="break-length" , que por padrão (on load) exibe um valor de 5. User Story # 6: Eu posso ver um elemento com um id="session-length" correspondente id="session-length" , que por padrão exibe um valor de 25. User Story # 7: Eu posso ver um elemento com um id="timer-label" , que contém uma string indicando que uma sessão foi inicializada (por exemplo," Session ") . User Story # 8: Eu posso ver um elemento com id="time-left" . NOTA: Pausado ou em execução, o valor nesse campo sempre deve ser exibido no formato mm:ss (ou seja, 25:00). História do usuário nº 9: posso ver um elemento clicável com um id="start_stop" . User Story # 10: Eu posso ver um elemento clicável com um id="reset" . User Story # 11: Quando eu clico no elemento com o id de reset , qualquer timer em execução deve ser parado, o valor em id="break-length" deve retornar para 5 , o valor em id="session-length" deve retornar para 25, e o elemento com id="time-left" deve redefinir para seu estado padrão. User Story # 12: Quando eu clico no elemento com o id de break-decrement , o valor dentro de id="break-length" diminui por um valor de 1, e eu posso ver o valor atualizado. User Story # 13: Quando eu clico no elemento com o id de break-increment , o valor dentro de id="break-length" incrementado por um valor de 1, e eu posso ver o valor atualizado. User Story # 14: Quando eu clico no elemento com o id de session-decrement de session-decrement , o valor dentro de id="session-length" diminui por um valor de 1, e eu posso ver o valor atualizado. História do usuário # 15: quando eu clico no elemento com o id de session-increment de session-increment , o valor dentro de id="session-length" incrementado pelo valor de 1, e eu posso ver o valor atualizado. User Story # 16: Eu não deveria ser capaz de definir uma sessão ou quebrar a duração para <= 0. User Story # 17: Eu não deveria ser capaz de definir uma sessão ou break length para> 60. User Story # 18: Quando eu primeiro clique no elemento com id="start_stop" , o cronômetro deve começar a ser executado a partir do valor exibido no id="session-length" , mesmo que o valor tenha sido incrementado ou decrementado em relação ao valor original de 25. User Story # 19 : Se o temporizador estiver em execução, o elemento com o id de time-left deverá exibir o tempo restante no formato mm:ss (diminuindo por um valor de 1 e atualizando a exibição a cada 1000ms). User Story # 20: Se o cronômetro estiver em execução e eu clicar no elemento com id="start_stop" , a contagem regressiva deverá ser pausada. História do usuário nº 21: se o cronômetro estiver pausado e eu clicar no elemento com id="start_stop" , a contagem regressiva deverá voltar a ser executada a partir do ponto em que ela foi pausada. User Story # 22: Quando uma contagem regressiva da sessão atingir zero (NOTA: o timer DEVE chegar às 00:00), e uma nova contagem regressiva começar, o elemento com o id do timer-label do timer-label deverá exibir uma string indicando que uma quebra começou. User Story # 23: Quando uma contagem regressiva da sessão atingir zero (NOTA: o timer DEVE chegar às 00:00), uma nova contagem regressiva da pausa deve começar, contando a partir do valor exibido atualmente no elemento id="break-length" . História do usuário nº 24: Quando uma contagem regressiva da quebra atingir zero (NOTA: o cronômetro DEVE chegar às 00:00), e uma nova contagem regressiva começar, o elemento com o id do timer-label do timer-label deverá exibir uma cadeia indicando que uma sessão começou. User Story # 25: Quando uma contagem regressiva da quebra chegar a zero (NOTA: o timer DEVE chegar às 00:00), uma nova contagem regressiva da sessão deve começar, contando a partir do valor exibido no elemento id="session-length" . User Story # 26: Quando uma contagem regressiva chegar a zero (NOTA: o temporizador DEVE chegar às 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag de audio HTML5 e ter um id="beep" correspondente a id="beep" . User Story # 27: O elemento de áudio com id="beep" deve ser de 1 segundo ou mais. User Story # 28: O elemento audio com id de beep deve parar de tocar e ser rebobinado para o começo quando o elemento com o id de reset é clicado. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso.