https://github.com/blmarquess/game-trunfo
App React para cadastros de cartas em um game de Trunfo
https://github.com/blmarquess/game-trunfo
css javascript reactjs tailwind tailwindcss
Last synced: 9 months ago
JSON representation
App React para cadastros de cartas em um game de Trunfo
- Host: GitHub
- URL: https://github.com/blmarquess/game-trunfo
- Owner: blmarquess
- Created: 2022-01-23T17:23:16.000Z (over 4 years ago)
- Default Branch: bruno-marques-project-tryunfo
- Last Pushed: 2022-06-19T01:41:12.000Z (about 4 years ago)
- Last Synced: 2024-05-02T02:50:21.262Z (about 2 years ago)
- Topics: css, javascript, reactjs, tailwind, tailwindcss
- Language: JavaScript
- Homepage: https://game-trunfo.vercel.app
- Size: 2.32 MB
- Stars: 16
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GAME TRUNFO🃏
## Projeto proposto no curso de front-end da Trybe
> O projeto consiste em criar uma página para cadastro de cartas de um jogo de super trunfo contendo um formulário para incluir nome e atributos de cada carta a ser utilizada no game de Trunfo
### Requisitos do projeto
- [x] - 1. Crie o formulário que será usado para adicionar cartas ao baralho
- [x] - 2. Adicione as props necessárias ao componente de formulário
- [x] - 3. Crie e renderize o componente Card com as props necessárias
- [x] - 4. Crie o preview da carta que está sendo criada pelo formulário
- [x] - 5. Faça a validação do botão de Salvar no formulário
- [x] - 6. Crie a função do botão salvar
- [x] - 7. Crie a validação do Super Trunfo
- [x] - 8. Exiba a lista de cartas que estão salvas no estado
- [x] - 9. Crie um botão para remover uma carta do baralho
### Requisitos bônus
- [x] - 10. Crie o filtro pelo nome da carta
- [x] - 11. Crie o filtro por raridade da carta
- [x] - 12. Crie o filtro de Super Trunfo
- [x] - 13. Estilização a aplicação
#### Recursos utilizados no projeto
> Foram os ensinamentos do primeiro bloco do curso de React.JS onde nos foi passado como criar componentes de class e como instanciar e manipular um estado dentro destes componentes
#### Exemplos da aplicação funcionando
#### Aprendizados que tive no projeto
- Criar e utilizar um componente .JSX do React.JS
- Utilizar o estado do componente com o this.state
- Utilizar o um estado como condição para renderizar componentes
- Enviar props entre componentes
- Estilização com Tailwind CSS
#### Tecnologias utilizadas
- HTML/CSS/JavaScript
- React.JS
- Tailwind CSS
Contatos:
Bruno Marques
> Foram os ensinamentos do primeiro bloco do curso de React.JS onde nos foi passado como criar componentes de class e como instanciar e manipular um estado dentro destes componentes
[](https://ko-fi.com/N4N2DC6XA)