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