Instruções
criar um app de quiz com flashcards
Neste laboratório, você vai criar um app que exibe e armazena dados de flashcards que podem ser recuperados depois.
Objetivo: Atender às user stories abaixo e fazer todos os testes passarem para completar o laboratório.
User stories:
1) Você deve ter um elemento HTML com um id igual a
flashcard.
2) Você deve ter uma interface chamada FlashCard.
3) A interface FlashCard deve conter as seguintes propriedades questionText e questionAnswer, ambas do tipo string.
4) Você deve ter uma coleção de elementos FlashCard chamada currentCards.
5) Quando o elemento #flashcard for clicado, o cartão deve receber a classe flipped.
6) Você deve ter um elemento com um id igual a delete-btn.
7) Quando o elemento #delete-btn for clicado, ele deve remover o cartão atual e exibir os dados do cartão anterior.
8) Você deve criar um formulário de entrada com um id igual a entry-form para poder adicionar mais flashcards à coleção currentCards ao enviar.
9) Os dois elementos dentro do formulário devem ter ids front-text e back-text, respectivamente.
10) Você deve criar e chamar um InvalidUserInputError quando o texto da pergunta ou a resposta da pergunta estiverem vazios no formulário de entrada.
O que fazer:
Testes:
- Você deve ter um elemento HTML com um id igual a `flashcard`.
- Você deve ter uma interface `FlashCard`.
- A interface `FlashCard` deve ter uma propriedade `questionText` do tipo `string`.
- A interface `FlashCard` deve ter uma propriedade `questionAnswer` do tipo `string`.
- Você deve ter uma coleção de elementos `FlashCard` chamada `currentCards` com o tipo `FlashCard[]`.
- Quando o elemento `#flashcard` for clicado pela primeira vez, ele deve receber a classe `flipped`.
- Você deve ter um elemento com um id igual a `delete-btn`.
- Quando o `delete-btn` for clicado, um elemento flashcard deve ser removido da coleção `currentCards`.
- Quando o `delete-btn` for clicado, os dados do flashcard anterior devem ser exibidos.
- Você deve criar um formulário de entrada com um id igual a `entry-form`.
- Você deve ter dois elementos `textarea` com ids `front-text` e `back-text`, respectivamente, dentro do formulário.
- Um `InvalidUserInputError` deve ser lançado quando o texto da pergunta ou a resposta da pergunta estiverem vazios no formulário de entrada.
Preview