Esse projeto contém uma série de informações sobre o que eu aprendi aqui na Trybe ao longo do curso de desenvolvimento web da Trybe.
As habilidades desenvolvidas nesse projeto são:
- Ler o estado de um componente e usá-lo para alterar o que exibimos no browser
- Inicializar um componente, dando a ele um estado pré-definido
- Atualizar o estado de um componente
- Capturar eventos utilizando a sintaxe do React
- Criar formulários utilizando sintaxe JSX com as tags: input, textarea, select, form, checkbox
- Transmitir informações de componentes filhos para componentes pais via callbacks
Esse projeto foi proposto pelo curso de desenvolvimento web da Trybe.
Essa página foi feita usando HTML, CSS e JavaScript.
Os commits foram feitos de acordo com os requisitos finalizados.
Todo o projeto foi feita na branch 'juliana-oliveira-project-tryunfo', isso por conta da exigência do curso.
Antes de realizar o projeto, precisei instalar as dependências usando npm install.
O projeto poderá ser visualizado através do comando npm start.
Os testes usando foram ESLint e Cypress, através dos comandos:
- npm run cypress:open
- npm run lint:styles
Esse foi um projeto individual,que desenvolvido somente por Juliana Oliveira.
Foi usado Visual Studio Code, além do Trello que auxiliou na organização das tarefas.
Nenhum.
No trabalho do desenvolvimento de software a gente sempre tem prazos, muitas vezes os prazos são apertados.
Por outro lado, eu não quero criar algo que não entendo perfeitamente, como também fazer códigos rápidos pode levar a erros que podem demorar muito pra corrigir.
Por isso, usei e sempre uso o método Baby Steps, que é uma estratégia de abordar o desafio passo à passo, defensivamente.
Baby steps é um termo em inglês que quer dizer passos de bebê. Refere-se a fazer as coisas, quaisquer que sejam, devagar, com calma, passo a passo.
Crie um formulário que será utilizado para criar as cartas do seu baralho.
-
Crie um componente chamado
Form
dentro da pastasrc/components
. -
Renderize o componente
Form
dentro do componente principalApp
. -
Crie os seguintes itens dentro do component
Form
: -
💡 Dica: Você pode criar um componente de input. Lembre-se de sempre ter uma label associada para cada input.
-
um campo do tipo
text
que contenha o atributodata-testid="name-input"
. Este campo será usado para inserir o nome da carta. -
um campo do tipo
textarea
que contenha o atributodata-testid="description-input"
. Este campo será usado para inserir a descrição da carta. -
um campo do tipo
number
que contenha o atributodata-testid="attr1-input"
. Este campo será usado para inserir o primeiro atributo da carta. Ele é livre para você adicionar o atributo que mais combinar com o seu baralho. -
um campo do tipo
number
que contenha o atributodata-testid="attr2-input"
. Este campo será usado para inserir o segundo atributo da carta. Ele é livre para você adicionar o atributo que mais combinar com o seu baralho. -
um campo do tipo
number
que contenha o atributodata-testid="attr3-input"
. Este campo será usado para inserir o terceiro atributo da carta. Ele é livre para você adicionar o atributo que mais combinar com o seu baralho. -
um campo do tipo
text
que contenha o atributodata-testid="image-input"
. Este campo será usado para inserir o caminho para imagem da carta. -
um campo do tipo
select
que contenha o atributodata-testid="rare-input"
. Este campo será usado para inserir a raridade da carta e deverá ter asoptions
:normal
,raro
emuito raro
(é importante que as opções estejam nessa ordem). -
um campo do tipo
checkbox
que contenha o atributodata-testid="trunfo-input"
. Este campo será usado para inserir se a carta é o Super Trunfo. -
um
button
que contenha o atributodata-testid="save-button"
e que tenha o texto "Salvar".
-
- O componente
Form
deverá receber as seguintes props:cardName
, uma string;cardDescription
, uma string;cardAttr1
, uma string;cardAttr2
, uma string;cardAttr3
, uma string;cardImage
, uma string;cardRare
, uma string;cardTrunfo
, um boolean;hasTrunfo
, um boolean;isSaveButtonDisabled
, um boolean;onInputChange
, uma callback;onSaveButtonClick
, uma callback;
As props do componente Form
deverão ser utilizadas conforme o indicado abaixo:
-
Campo
name-input
: a propriedadevalue
deve receber o valor da propcardName
e a proponChange
deve receber o valor da proponInputChange
. -
Campo
description-input
: a propriedadevalue
deve receber o valor da propcardDescription
e a proponChange
deve receber o valor da proponInputChange
. -
Campo
attr1-input
: a propriedadevalue
deve receber o valor da propcardAttr1
e a proponChange
deve receber o valor da proponInputChange
. -
Campo
attr2-input
: a propriedadevalue
deve receber o valor da propcardAttr2
e a proponChange
deve receber o valor da proponInputChange
. -
Campo
attr3-input
: a propriedadevalue
deve receber o valor da propcardAttr3
e a proponChange
deve receber o valor da proponInputChange
. -
Campo
image-input
: a propriedadevalue
deve receber o valor da propcardImage
e a proponChange
deve receber o valor da proponInputChange
. -
Campo
rare-input
: a propriedadevalue
deve receber o valor da propcardRare
e a proponChange
deve receber o valor da proponInputChange
. -
Campo
trunfo-input
: a propriedadechecked
deve receber o valor da propcardTrunfo
e a proponChange
deve receber o valor da proponInputChange
. -
Botão
save-button
: a propriedadedisabled
deve receber o valor da propisSaveButtonDisabled
e a proponClick
deve receber o valor da proponSaveButtonClick
.
Obs: por enquanto a prop hasTrunfo
ainda não foi utilizada, mas não se preocupe, pois ela será usada em breve.
-
Crie um componente com o nome
Card
na pastasrc/components
e renderize-o no componente principalApp
. O componenteCard
deve receber as seguintes props:cardName
, uma string;cardDescription
, uma string;cardAttr1
, uma string;cardAttr2
, uma string;cardAttr3
, uma string;cardImage
, uma string;cardRare
, uma string;cardTrunfo
, um boolean;
-
Renderize o componente
Card
dentro do componente principalApp
. -
Exiba o valor da prop
cardName
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="name-card"
. -
Exiba a imagem usando a tag HTML
img
, com o atributosrc
que tenha o valor da propcardImage
e o atributoalt
com o valor da propcardName
. Essa imagem também deve ter o atributodata-testid="image-card"
-
Exiba o valor da prop
cardDescription
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="description-card"
. -
Exiba o valor da prop
cardAttr1
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="attr1-card"
. -
Exiba o valor da prop
cardAttr2
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="attr2-card"
-
Exiba o valor da prop
cardAttr3
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="attr3-card"
. -
Exiba o valor da prop
cardRare
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="rare-card"
. -
Exiba o texto
Super Trunfo
somente quando o valor da propcardTrunfo
fortrue
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="trunfo-card"
.
Dica: Você pode utilizar renderização condicional para renderizar ou não o texto do super trunfo.
Até o momento você criou dois componentes que recebem props
, agora está na hora de criar o estado dos componentes.
Os componentes Form
e Card
irão compartilhar o mesmo estado para exibir as mesmas informações (isso já te dá uma dica de onde o estado deve estar, não é mesmo?).
Quando alguma informação é digitada em algum campo do formulário, o componente Card
deve exibir a mesma informação em tempo real, criando um preview da carta antes de ela ser salva no baralho (a funcionalidade de salvar será feita nos próximos requisitos).
Você deverá usar a prop onInputChange
para passar uma callback para lidar com os eventos de onChange
dos inputs do formulário. Não se esqueça que os valores dos inputs (que também são passados por props) também devem ser salvos em um estado.
Dica: o mesmo estado usado para controlar os inputs do formulário podem ser passados para o componente Card
.
Veja como deve ser o funcionamento da aplicação:
-
Ao digitar algo no campo com o
data-testid="name-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="name-card"
. -
Ao digitar algo no campo com o
data-testid="description-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="description-card"
. -
Ao digitar algo no campo com o
data-testid="image-input"
do formulário, o mesmo valor deverá ser passado para o componenteCard
, e ser usado no atributosrc
do elemento com odata-testid="image-card"
. -
Ao digitar algo no campo com o
data-testid="attr1-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="attr1-card"
. -
Ao digitar algo no campo com o
data-testid="attr2-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="attr2-card"
. -
Ao digitar algo no campo com o
data-testid="attr3-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="attr3-card"
. -
Ao selecionar algum valor no
select
com odata-testid="rare-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="rare-card"
. -
Quando campo do tipo
checkbox
que possui odata-testid="trunfo-input"
estiverchecked
, deverá ser renderizado no componenteCard
o textoSuper Trunfo
dentro do elemento com odata-testid="trunfo-card"
.
Dica: para campos que precisem de um valor padrão (como o campo de raridade, por exemplo) você pode iniciar o estado já com esse valor.
O botão que possui o atributo data-testid="save-button"
só deve estar habilitado se todas as informações do formulário estiverem preenchidas corretamente, seguindo as seguintes regras:
-
Os campos
Nome
,Descrição
,Imagem
eRaridade
devem conter alguma informação (ou seja, osinputs
não podem estar vazios). -
A soma dos valores dos 3 atributos (
attr1-input
,attr2-input
eattr3-input
) não pode ultrapassar o valor 210. -
Cada um dos três atributos pode ter no máximo 90 pontos cada.
-
Os atributos não podem receber valores negativos.
Agora que o botão de salvar já está validado, você pode adicionar uma nova carta ao seu baralho. Isso significa que você precisará criar um novo estado na sua aplicação para salvar a lista de cartas existentes no seu baralho. Dica: você pode salvar cada carta em um formato de objeto e ter um array com esses objetos no seu estado.
-
Ao clicar no botão que possui o atributo
data-testid="save-button"
, as informações que foram preenchidas no formulário deverão ser salvas no estado da sua aplicação. -
Após salvar as informações, os
inputs
do formulárioNome
,Descrição
eImagem
e o conteúdo do preview da carta deverão ser limpos. -
Após salvar as informações, os três campos de atributos devem ter valor 0.
-
Após salvar as informações, o campo
Raridade
deve conter o valornormal
.
Em um baralho de Super Trunfo pode existir apenas uma carta Super Trunfo. Por isso é necessário fazer uma validação para que somente 1 carta Super Trunfo seja salva no seu baralho.
Para que uma carta seja salva como Super Trunfo é preciso que o input com o data-testid="trunfo-input"
esteja checked
na hora de salvar a carta. Por isso, a validação será feita nesse campo. Para fazer essa validação, você deve usar o prop hasTrunfo
do componente Form
.
- Caso já exista uma carta Super Trunfo em seu baralho, o formulário de criação de carta não deverá exibir o
checkbox
data-testid="trunfo-input"
. No seu lugar deve ser renderizada a frase: "Você já tem um Super Trunfo em seu baralho".
Dica: Lembre-se de utilizar a renderização condicional do React nesse requisito.
Você já tem várias cartas legais em seu baralho, agora é a hora de listá-las para que você possa ver toda sua coleção.
- Renderize dentro do component
App
uma lista com todas as cartas que você tem no estado da aplicação. - Garanta que sempre que uma carta for adicionada, a lista é atualizada automaticamente.
Dica: você pode reutilizar o componente Card
nesse requisito.
-
Criar, em cada carta que está sendo renderizada do seu baralho, um
button
com o textoExcluir
e o atributodata-testid="delete-button"
. -
A carta de preview não pode ter esse botão.
-
Ao clicar neste botão, a carta deve ser excluída do seu baralho, ou seja, não deverá mais ser renderizada na página. Dica: Lembre-se que o baralho está sendo renderizado a partir do estado do seu componente!
-
Se a carta excluída for uma carta Super Trunfo, o
checkbox
do formulário deverá aparecer novamente, tornando possível a criação de uma nova carta Super Trunfo.