Emojis são alguns dos ícones mais usados em aplicativos sociais atualmente. Quer você queira transmitir emoções ou melhorar a comunicação, existe um emoji ou uma combinação de emojis para realizar a tarefa. Neste tutorial, construiremos um componente emoji de classificação que permitirá ao usuário avaliar seu nível de satisfação usando um controle deslizante.
Estrutura HTML
A estrutura HTML consistirá em um elemento div contêiner com os seguintes elementos filhos:
- Um título e um subtítulo
- O elemento de imagem para mostrar o emoji atual
- Uma div para mostrar o conteúdo da classificação.
- Um elemento de entrada de intervalo.
Estilo com CSS
Começaremos aplicando os seguintes estilos ao corpo para centralizar todos os nossos elementos na página.
Bricolage Grotesque é uma fonte disponível nas fontes do Google. E a cor que escolhi usa uma leve transparência para que quando o fundo mudar, a cor do texto também mude.
Por último, você verá uma propriedade de transição no fundo, para que quando mudarmos a cor ela desapareça bem de uma para outra.
1 |
body { |
2 |
font-family: 'Bricolage Grotesque', sans-serif; |
3 |
display: flex; |
4 |
justify-content: center; |
5 |
align-items: center; |
6 |
flex-direction: column; |
7 |
min-height: 100vh; |
8 |
background: #fff; |
9 |
color: rgba(0,0,0,0.7); |
10 |
transition: background .5s ease-in-out; |
11 |
}
|
Para o elemento contêiner, aplique os estilos a seguir para que os elementos filhos fiquem centralizados e empilhados verticalmente.
1 |
.container { |
2 |
width: 300px; |
3 |
padding: 0 10px; |
4 |
background: #B4BED9; |
5 |
border-radius: 20px; |
6 |
padding: 40px 5px; |
7 |
display: flex; |
8 |
flex-direction: column; |
9 |
align-items: center; |
10 |
text-align: center; |
11 |
justify-content: space-around; |
12 |
position: relative; |
13 |
|
14 |
}
|
O título e o subtítulo são colocados na parte superior do elemento contêiner com os seguintes estilos.
1 |
.title { |
2 |
font-size: 3rem; |
3 |
font-weight: 800; |
4 |
margin: 0 0 1rem 0; |
5 |
line-height: .9; |
6 |
}
|
7 |
.subtitle { |
8 |
font-size: 1rem; |
9 |
margin: 0; |
10 |
}
|
Controle deslizante personalizado
A entrada do intervalo consiste em uma barra e um elemento de controle deslizante por padrão. O elemento de controle deslizante (o polegar) se move ao longo da barra horizontal, permitindo aos usuários selecionar um valor específico. O intervalo de entrada também parece diferente dependendo do navegador em que é exibido. Aqui está a entrada de intervalo padrão no Chrome.
Em vez de usar o controle deslizante padrão acima, iremos personalizá-lo para ter uma aparência muito melhor. Definir -webkit-appearance: none; e appearance: none; na entrada do intervalo.
1 |
input[type="range"] { |
2 |
-webkit-appearance: none; |
3 |
appearance: none; |
4 |
}
|
O efeito desses estilos é remover a aparência padrão para que possamos fornecer nosso estilo personalizado. Defina os seguintes estilos adicionais na barra deslizante.
1 |
input[type="range"] { |
2 |
position: absolute; |
3 |
top: 85%; |
4 |
-webkit-appearance: none; |
5 |
appearance: none; |
6 |
width: 80%; |
7 |
background: #e5e5e5; |
8 |
height: 2px; |
9 |
border-radius: 5px; |
10 |
outline: none; |
11 |
box-shadow: #F2D2BD; |
12 |
}
|
A aparência do polegar varia entre diferentes navegadores; portanto, aplicaremos estilos individuais com base no navegador para tornar o polegar consistente em diferentes navegadores. O estilo -webkit-appearance: none; removerá o estilo de miniatura padrão fornecido pelo navegador. Vamos também aplicar uma altura, largura, preenchimento e cor de fundo personalizados.
1 |
input[type="range"]::-webkit-slider-thumb { |
2 |
-webkit-appearance: none; |
3 |
padding: 5px; |
4 |
height: 5px; |
5 |
width: 5px; |
6 |
border:5px solid #fff; |
7 |
border-radius: 50%; |
8 |
cursor: pointer; |
9 |
background: #4c4c4c; |
10 |
}
|
11 |
|
12 |
/* FIREFOX */
|
13 |
input[type="range"]::-moz-range-thumb { |
14 |
padding: 5px; |
15 |
height: 5px; |
16 |
width: 5px; |
17 |
border:5px solid #fff; |
18 |
border-radius: 50%; |
19 |
cursor: pointer; |
20 |
background: #4c4c4c; |
21 |
|
22 |
}
|
Defina as dimensões da imagem e adicione uma animação de efeito de salto.
1 |
@keyframes bounce { |
2 |
0%, 100% { |
3 |
transform: translateY(0); |
4 |
}
|
5 |
50% { |
6 |
transform: translateY(-10px); |
7 |
}
|
8 |
}
|
9 |
|
10 |
img { |
11 |
height: 150px; |
12 |
width: 150px; |
13 |
outline: none; |
14 |
animation: dance 1s infinite; |
15 |
}
|
Por fim, estilize o div de conteúdo de classificação.
1 |
.rating { |
2 |
font-size: 20px; |
3 |
font-weight: 100; |
4 |
width: 150px; |
5 |
}
|
Funcionalidade JavaScript
À medida que o valor na entrada do intervalo muda, usaremos JavaScript para atualizar o tipo de emoji, a cor do contêiner e a mensagem de classificação.
Baixei um conjunto brilhante de ga-analytics#sendElementsClickEvent”>100 emojis SVG da Envato Elements, ideal para este projeto.
Então, com meus ícones SVG selecionados e carregados, vamos pegar nossos elementos e definir nossos dados.
1 |
const container = document.querySelector('.container') |
2 |
const slider = document.getElementById("slider"); |
3 |
const emoji = document.querySelector(".emoji"); |
4 |
const rate = document.getElementById("message"); |
5 |
const colors = ["#d35e65", "#d3965c", "#cad48a", "#6ed494", "#18c574"]; |
6 |
const emoticons = [ |
7 |
{
|
8 |
text: "Awful", |
9 |
url: "Disappointed.svg" |
10 |
},
|
11 |
{
|
12 |
text: "Bad", |
13 |
url: "Sad.svg" |
14 |
},
|
15 |
{
|
16 |
text: "Okay", |
17 |
url: "Expressionless.svg" |
18 |
},
|
19 |
{
|
20 |
text: "Good", |
21 |
url: "Smile.svg" |
22 |
},
|
23 |
{
|
24 |
text: "Great", |
25 |
url: "Love.svg" |
26 |
}
|
27 |
];
|
A matriz emojis define objetos; cada objeto contém uma imagem emoji e um texto que descreve o sentimento do emoji. Usaremos esses dados para exibir emojis dinamicamente com base nas interações do usuário com o componente de classificação.
A seguir, crie uma função chamada UpdateRating(). Dentro de UpdateRating() função, obtenha o valor no controle deslizante em movimento.
1 |
function UpdateRating() { |
2 |
const value =slider.value; |
3 |
}
|
A seguir, criaremos instruções if que verificarão o valor no controle deslizante e atualizarão o estilo do emoji, a cor de fundo e a mensagem dependendo do valor no controle deslizante. Valores baixos atrairão uma classificação baixa, emojis tristes e mensagens negativas, enquanto valores altos atrairão uma classificação alta, mensagens positivas e emojis positivos.
O controle deslizante abrange de 0 a 100; portanto, alocaremos cada mensagem em um intervalo de 20 unidades.
Atualize o UpdateRating funcionar conforme mostrado abaixo.
1 |
function UpdateRating() { |
2 |
const value =slider.value; |
3 |
|
4 |
if (value >= 0 && value < 20) { |
5 |
emoji.src = emojis[0].url |
6 |
rate.textContent = emojis[0].text; |
7 |
container.style.backgroundColor =colors[0]; |
8 |
|
9 |
} else if (value >= 20 && value < 40) { |
10 |
emoji.src = emojis[1].url |
11 |
rate.textContent = emojis[1].text; |
12 |
container.style.backgroundColor =colors[1]; |
13 |
|
14 |
} else if (value >= 40 && value < 60) { |
15 |
emoji.src = emojis[2].url |
16 |
rate.textContent = emojis[2].text; |
17 |
container.style.backgroundColor =colors[2]; |
18 |
|
19 |
} else if (value >= 60 && value < 80) { |
20 |
emoji.src = emojis[3].url |
21 |
rate.textContent = emojis[3].text; |
22 |
container.style.backgroundColor = colors[3]; |
23 |
|
24 |
} else if (value >= 80 && value <= 100) { |
25 |
emoji.src = emojis[4].url |
26 |
rate.textContent = emojis[4].text; |
27 |
container.style.backgroundColor = colors[4]; |
28 |
}}
|
Vamos refatorar nossa lógica condicional para garantir que o código não seja repetitivo. Crie uma função chamada setProperties(), que leva o índice como argumento. Dentro setProperties()adicione a lógica repetitiva.
1 |
function setProperties(index){ |
2 |
emoji.src = emojis[index].url |
3 |
rate.textContent = emojis[index].text; |
4 |
container.style.backgroundColor =colors[index]; |
5 |
}
|
Para cada condição, chame o setProperties() funcionar assim:
1 |
function UpdateRating() { |
2 |
const value =slider.value; |
3 |
|
4 |
if (value >= 0 && value < 20) { |
5 |
setProperties(0) |
6 |
|
7 |
} else if (value >= 20 && value < 40) { |
8 |
setProperties(1) |
9 |
|
10 |
} else if (value >= 40 && value < 60) { |
11 |
setProperties(2) |
12 |
|
13 |
} else if (value >= 60 && value < 80) { |
14 |
setProperties(3) |
15 |
|
16 |
} else if (value >= 80 && value <= 100) { |
17 |
setProperties(4) |
18 |
}}
|
Finalmente, precisamos adicionar um ouvinte de eventos ao intervalo de entrada. O ouvinte de evento ouvirá o oninput evento e depois ligue para o UpdateRating() função. Um oninput evento ocorre quando o valor de um elemento de entrada é alterado. Em relação ao intervalo de entrada, o oninput O evento fornecerá feedback (valor) em tempo real quando o usuário interagir com ele.
1 |
slider.addEventListener("input", UpdateRating); |
O UpdateRating() A função será invocada toda vez que o usuário mover o controle deslizante.
Conclusão
Este tutorial abordou como construir um componente funcional de classificação de emojis. Também aprendemos como o elemento do intervalo de entrada é estilizado em diferentes navegadores. Para aprimorar a funcionalidade, você também pode solicitar feedback adicional dos usuários.
Vamos nos lembrar do que construímos – e espero que você tenha gostado dessa experiência!
[ad_2]
