search

iurygdeoliveira / Web-development-classes

Repository aimed at building collaborative knowledge about web development, especially with the computer science students at Campus Araguaína - IFTO. However, anyone can contribute if they wish to do so.
4 stars 40 forks source link

32º Desafio: Toast Notification - Peso 1 #37

Closed iurygdeoliveira closed 1 year ago

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá, crianças inocentes! Hoje vamos falar sobre um desafio bem legal de programação, o Toast Notification! Mas antes de tudo, vocês sabem o que é isso? Bem, toast notification é aquela mensagem pequena que aparece em um canto da tela quando algo acontece, como uma confirmação de cadastro ou uma mensagem de erro. É uma maneira bem prática e discreta de informar o usuário sem interromper a navegação.

Agora, vamos ao desafio! Vocês vão criar um pequeno site que exibe um botão, e ao clicar nele, uma toast notification deve aparecer na tela. Mas atenção, nada de usar soluções prontas! Vamos colocar a mão na massa e programar tudo do zero utilizando css, js e html.

Algumas dicas para vocês:

Para criar a toast notification, vocês podem utilizar divs com position absolute, e controlar o tempo de exibição com o setTimeout em js.

Para estilizar a toast notification, usem propriedades como background-color, border-radius e padding em css. Não esqueçam de criar botões para fechar a notificação e para acionar a ação desejada.

Bem, crianças, espero que se divirtam bastante com esse desafio! Não se esqueçam de praticar bastante e explorar ao máximo as possibilidades do css, js e html. Boa sorte!

Exemplo

https://user-images.githubusercontent.com/30157522/224493390-bb3268d2-2d46-467d-9a38-c759e46ff125.mp4

Additional tips

Código HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Toast Notification</title>
  </head>
  <body>
    <div id="toasts"></div>

    <button class="btn" id="button">Show Notification</button>

    <script src="script.js"></script>
  </body>
</html>
brunnaborgex commented 1 year ago

EQUIPE: Autarquia desafio32.zip

iurygdeoliveira commented 1 year ago

Resposta aceita