Como codificar uma notificação animada do Toast com JavaScriptReviltec

Adicionar notificações fáceis de usar é crucial para criar uma experiência de usuário agradável para muitos sites e aplicativos. Um tipo popular de notificação é a notificação de “brinde” – uma pequena mensagem pop-up que aparece na tela para informar os usuários sobre um evento ou ação.

Neste tutorial, orientarei você na criação de uma notificação do sistema animada do zero usando HTML, CSS e JavaScript.

O que é uma notificação de brinde?

Uma notificação do sistema é uma forma não intrusiva de fornecer informações aos usuários. Geralmente é usado para notificar os usuários sobre ações bem-sucedidas, como envios de formulários ou erros. Essas notificações geralmente aparecem na parte inferior ou superior da tela e desaparecem após alguns segundos.

Não existe uma regra rígida ou rápida sobre os padrões de design da interface do usuário do brinde, mas o principal a lembrar é mantê-lo não intrusivo para que o usuário final não precise reagir imediatamente.

Começando

Para criar nossa notificação do sistema animada, começaremos com uma estrutura HTML simples e um estilo CSS. Usaremos JavaScript para controlar sua aparência e comportamento.


 lang="en">
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     rel="stylesheet" href="styles.css" />
    </span>Animated Toast Notification<span style="color: #f4bf75">
  
  
     type="button" id="showToastBtn">Show Toast
  


Estilo CSS

Seguiremos os padrões de design convencionais e afixaremos a notificação do sistema no canto inferior direito da janela de visualização do navegador. Usando CSS, podemos mantê-lo fixo para que esteja sempre visível caso o usuário role a página.

#toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #28a745;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

#toast.show {
  opacity: 1;
}

Torne nosso brinde interativo com JavaScript

Criamos uma classe Toast que encapsula o comportamento da notificação do sistema.

Essa abordagem orientada a objetos facilita o gerenciamento de várias notificações do sistema e mantém o código organizado e reutilizável.

Quando e se precisarmos de outra notificação do sistema, construímos a lógica para lidar com isso facilmente.

class Toast {
  constructor(message) {
    this.message = message
    this.toast = document.createElement("div")
    this.toast.id = "toast"
    this.toast.innerHTML = `${this.message}`
    document.body.appendChild(this.toast)
    this.toastBtn = document.getElementById("showToastBtn")
    this.toastBtn.addEventListener("click", () => this.show())
  }

  show() {
    this.toast.classList.add("show")
    setTimeout(() => {
      this.toast.classList.remove("show")
    }, 3000) // Hide after 3 seconds
  }
}

const myToast = new Toast("This is a toast notification!")

O constructor dentro do Toast class inicializa a mensagem e cria o elemento brinde dinamicamente, anexando-o ao corpo do documento. Observe como o id que obtém correlações adicionais ao nosso CSS. O construtor também adiciona um ouvinte de evento click ao botão “Mostrar brinde”, que escuta a ação e é acionado quando clicado.

O show O método da classe Toast lida com a exibição e ocultação da notificação do sistema. Eu adicionei um setTimeout função, que é um recurso de atraso predefinido. Passamos segundos como milissegundos para ajustar por quanto tempo a notificação do sistema deve permanecer visível.

Em alguns aplicativos, você deve mostrar a notificação do sistema depois que algo for carregado, um processo for concluído ou ocorrerem erros. Tudo isso pode ser feito dinamicamente, em vez de ouvir a entrada do usuário.

Exemplo de torrada deliciosa

Abaixo está um CodePen com um exemplo interativo. Usei o código acima e estendi a página com conteúdo e CSS adicional.

<br />

Oportunidades para melhorar

Existem muitas oportunidades para aprimorar o design e a experiência do usuário. Por exemplo, e se houver várias instâncias de uma notificação do sistema na página? Provavelmente deveria haver suporte para muitos deles. É uma questão de estender nossa classe JavaScript e estilo CSS para acomodar mais de um brinde por vez.

Você também pode adicionar a capacidade de dispensar notificações do sistema. Eu recomendo manter o tempo que os brindes aparecem na tela no espectro inferior, mas considere o tempo que um usuário final pode levar para ler a notificação.

Por enquanto é isso, espero que tenham gostado deste tutorial!

Relacionado

Posted by admin

Tagged with

1
2	lang="en">
3
4	charset="UTF-8" />
5	name="viewport" content="width=device-width, initial-scale=1.0" />
6	rel="stylesheet" href="styles.css" />
7	</span>Animated Toast Notification<span style="color: #f4bf75">
8
9
10	type="button" id="showToastBtn">Show Toast
11
12

1	#toast {
2	position: fixed;
3	bottom: 20px;
4	right: 20px;
5	padding: 10px 20px;
6	background-color: #28a745;
7	color: #fff;
8	border-radius: 5px;
9	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
10	transition: opacity 0.3s ease-in-out;
11	opacity: 0;
12	}
13
14	#toast.show {
15	opacity: 1;
16	}

1	class Toast {
2	constructor(message) {
3	this.message = message
4	this.toast = document.createElement("div")
5	this.toast.id = "toast"
6	this.toast.innerHTML = `${this.message} `
7	document.body.appendChild(this.toast)
8	this.toastBtn = document.getElementById("showToastBtn")
9	this.toastBtn.addEventListener("click", () => this.show())
10	}
11
12	show() {
13	this.toast.classList.add("show")
14	setTimeout(() => {
15	this.toast.classList.remove("show")
16	}, 3000) // Hide after 3 seconds
17	}
18	}
19
20	const myToast = new Toast("This is a toast notification!")