Game-Trunfo

KO | EN

gitlite — search

#generative-ai #chatgpt #large-language-models #agents #video #kotlin #command-line #ruby #macos #nlp

(★ 16)

App React para cadastros de cartas em um game de Trunfo

File Explorer

ZIP Download

- favicon.ico
- index.html
- robots.txt
- - deck-de-cartas.png
  - form-cadastro-carta.png
- - Attrs.jsx
  - Card.jsx
  - Deck.jsx
  - Filter.jsx
  - Form.jsx
  - index.js
- - data.js
- App.js
- index.css
- index.js
.DS_Store
.gitignore
.stylelintignore
craco.config.js
package-lock.json
package.json
README.md
tailwind.config.js
yarn.lock

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 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

![form-cadastro-da-aplicacao](https://raw.githubusercontent.com/blmarquess/Game-Trunfo/bruno-marques-project-tryunfo/src/assets/form-cadastro-carta.png)
![dack-de-cartas-da-aplicacao](https://raw.githubusercontent.com/blmarquess/Game-Trunfo/bruno-marques-project-tryunfo/src/assets/deck-de-cartas.png)

#### 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

<div  align="center">
<p align="center">Contatos: <br></p>

<p align="center" style="max-width: 50%;">
 <h3>Bruno Marques</h3>
  <a href="https://www.linkedin.com/in/00brunomarques/" alt="link para o Linkedin de Bruno Marques" rel="nofollow">
  <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" style="max-width: 100%;">
  </a>
  <a href="mailto:blmarques.dev@gmail.com" alt="link para o enviar e-mail para Bruno Marques" target="_blank">
  <img src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white" style="max-width: 100%;">
  </a>
</p>
<div>

> 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
  
  
  <div align='center'>
		
[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/N4N2DC6XA)
		
</div>

Game-Trunfo

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Game-Trunfo

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README