Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicolasgabriiel/interactive-rating-component-vue
Um site simples onde você escolhe uma nota e a mensagem do cartão é alterada para um 'thank you'. Desenvolvido com Vue.js para uma interação suave e responsiva.
https://github.com/nicolasgabriiel/interactive-rating-component-vue
typescript vue
Last synced: about 2 months ago
JSON representation
Um site simples onde você escolhe uma nota e a mensagem do cartão é alterada para um 'thank you'. Desenvolvido com Vue.js para uma interação suave e responsiva.
- Host: GitHub
- URL: https://github.com/nicolasgabriiel/interactive-rating-component-vue
- Owner: nicolasgabriiel
- Created: 2023-01-20T22:52:27.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-29T16:18:55.000Z (almost 2 years ago)
- Last Synced: 2024-05-28T18:47:33.284Z (8 months ago)
- Topics: typescript, vue
- Language: Vue
- Homepage: https://card-compenent.vercel.app
- Size: 381 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Interactive Rating Component
Esta é uma solução para o desafio [Interactive Rating Component](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI) do site [Front End Mentor](https://www.frontendmentor.io/challenges), onde você escontra diversos desafios que vão te ajudar a melhorar na área do Front-End.
## Sumário
- [Resumo](#Resumo)
- [Desafio](#Desafio)
- [Screenshot](#screenshot)
- [Link](#link)
- [Processo](#Processo)
- [Construido com](#construido-com)
- [O que eu aprendi](#o-que-eu-aprendi)
- [Autor](#autor)
## Resumo
O desafio é construir o projeto e deixá-lo o mais próximo possível do design oferecido. Podendo usar qualquer ferramenta para ajudar a concluir o desafio. O meu objetivo foi desenvolver esse projeto em Vue.JS que é o framework em que eu estou me aprofundando no momento.
### Desafio
Como era a minha segunda vez desenvolvendo um projeto próprio em Vue.Js, foi uma experiência pra lá de desafiadora. Meu objetivo era entender mais sobre os componentes, como eles interagiam enter sí, aprender sobre o uso de dados, métodos, como passar e receber propriedades entre os componentes, entender sobre propriedades e meios de emissão de dados. Me dediquei a tornar o projeto o mais fiel possível ao design que recebi e acredito que obti um ótimo resultado.
### Screenshots
Home
------
Status Ativos
------
Finalizado
------
### Link: https://card-compenent.vercel.app
## Processo
### Construido com
-Vue.JS
-TypeScript
-HTML5
-CSS3
-JavaScript
### Principais coisas que aprendi
Enviar dados para um componente filho
```js
```
Receber dados de um elemento pai através de propriedades
```js
props: {
valorEsperado: {
type: Number,
default: 0,
}
```
Criar dados que funcionam como variáveis
```js
data(){
return{
hide: false,
valor: 0
}
```
Utilizando métodos
```js
methods:{
Funcao(){
this.hide = true
}
```
Enviando dados para o componente pai com o Emit
```js
this.$emit('hide')
```
Recebendo dados emitidos do componente filho
```js
```
Passando um dado dentro de um emmit
```js
this.$emit('valor', { meuValor: this.escolhido } )
```
## Autor
- Site pessoal - [Nicolas Gabriel](https://www.linkedin.com/in/nicolasgabriiel/)
### Planejamento de Projeto
- [x] Enviar imagens
- [x] Redefinir projeto
- [x] Importar reset css
- [x] Criar componente card
- [x] Importar Fonte
- [x] Estilizar background
- [x] Estruturar componente card
- [x] Estilizar Componente Card
- [x] Criar Elemento Texto
- [x] Estruturar Elemento Texto
- [x] Estilizar Elemento Texto
- [x] Criar Elemento Barra
- [x] Estruturar Elemento Barra
- [x] Estilizar Elemento Barra
- [x] Criar Elemento Botao
- [x] Estruturar Elemento Botao
- [x] Estilizar Elemento Botao
- [x] Definir Metodo de seleção barra
- [x] Definir Método de escolha botao
- [x] Criar Componente mensagem Personalizado
- [x] Estruturar Componente mensagem Personalizado
- [x] Estilizar Componente mensagem Personalizado
- [x] Tornar mensagem reativa
- [x] Criar Componente mensagem
- [x] Estilizar Componente mensagem
- [x] Estruturar Componente mensagem
- [x] Ligar as propriedades
- [x] Escrever o Readme