Como criar um controle deslizante de classificação de emoji com JavaScriptReviltec

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.

body {
  font-family: 'Bricolage Grotesque', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  background: #fff;
  color: rgba(0,0,0,0.7);
  transition: background .5s ease-in-out;
}

Para o elemento contêiner, aplique os estilos a seguir para que os elementos filhos fiquem centralizados e empilhados verticalmente.

.container {
  width: 300px;
  padding: 0 10px;
  background: #B4BED9;
  border-radius: 20px;
  padding: 40px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;  
  text-align: center;
  justify-content: space-around;
  position: relative;

}

O título e o subtítulo são colocados na parte superior do elemento contêiner com os seguintes estilos.

.title {
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  line-height: .9;
}
.subtitle {
  font-size: 1rem;
  margin: 0;
}

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.

input[type="range"] {
  position: absolute;
  top: 85%;
  -webkit-appearance: none;
  appearance: none;
  width: 80%;
  background: #e5e5e5;
  height: 2px;
  border-radius: 5px;
  outline: none;
  box-shadow: #F2D2BD;
}

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.

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  padding: 5px;
  height: 5px;
  width: 5px;
  border:5px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  background: #4c4c4c;
}

/* FIREFOX */
input[type="range"]::-moz-range-thumb {
  padding: 5px;
  height: 5px;
  width: 5px;
  border:5px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  background: #4c4c4c;

}

Defina as dimensões da imagem e adicione uma animação de efeito de salto.

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

img {
  height: 150px;
  width: 150px;
  outline: none;
  animation: dance 1s infinite;
}

Por fim, estilize o div de conteúdo de classificação.

.rating {
  font-size: 20px;
  font-weight: 100;
  width: 150px;
}

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.

const container = document.querySelector('.container')
const slider = document.getElementById("slider");
const emoji = document.querySelector(".emoji");
const rate = document.getElementById("message");
const colors = ["#d35e65", "#d3965c", "#cad48a", "#6ed494", "#18c574"];
const emoticons = [
  {
    text: "Awful",
    url: "Disappointed.svg"
  },
  {
    text: "Bad",
    url: "Sad.svg"
  },
  {
    text: "Okay",
    url: "Expressionless.svg"
  },
  {
    text: "Good",
    url: "Smile.svg"
  },
  {
    text: "Great",
    url: "Love.svg"
  }
];

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.

function UpdateRating() {
  const value =slider.value;
  
  if (value >= 0 && value < 20) {
    emoji.src = emojis[0].url
    rate.textContent =  emojis[0].text;
    container.style.backgroundColor =colors[0];

  } else if (value >= 20 && value < 40) {
    emoji.src = emojis[1].url
    rate.textContent =  emojis[1].text;
    container.style.backgroundColor =colors[1];
    
  } else if (value >= 40 && value < 60) {
    emoji.src = emojis[2].url
    rate.textContent =  emojis[2].text;
    container.style.backgroundColor =colors[2];
    
  } else if (value >= 60 && value < 80) {
    emoji.src = emojis[3].url
    rate.textContent =  emojis[3].text;
    container.style.backgroundColor = colors[3];
    
  } else if (value >= 80 && value <= 100) {
    emoji.src = emojis[4].url
    rate.textContent =  emojis[4].text;
    container.style.backgroundColor = colors[4];   
  }}

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.

function setProperties(index){
  emoji.src = emojis[index].url
  rate.textContent =  emojis[index].text;
  container.style.backgroundColor =colors[index];
  }

Para cada condição, chame o setProperties() funcionar assim:

function UpdateRating() {
  const value =slider.value;
 
  if (value >= 0 && value < 20) {
    setProperties(0)
    
  } else if (value >= 20 && value < 40) {
    setProperties(1)
    
  } else if (value >= 40 && value < 60) {
    setProperties(2)
    
  } else if (value >= 60 && value < 80) {
    setProperties(3)
    
  } else if (value >= 80 && value <= 100) {
    setProperties(4) 
  }}

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!

<br />

Relacionado

Posted by admin

Tagged with

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	}

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	}

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	}

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	}

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	}

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	}

1	.rating {
2	font-size: 20px;
3	font-weight: 100;
4	width: 150px;
5	}

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	];

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

1	function setProperties(index){
2	emoji.src = emojis[index].url
3	rate.textContent = emojis[index].text;
4	container.style.backgroundColor =colors[index];
5	}