jardelima / messages

Tela de mensagens com funcionalidades de excluir, marcar como lida, marcar como não lida e filtrar. (Vanilla JS)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Página de Mensagens do Aplicativo da Christus

Nessa projeto encontra-se o front-end de uma página do aplicativo da Christus.

*OBS: Layout apenas mobile.

A página tem como objetivo ser a tela principal de mensagens, onde o aluno poderar:

  • Excluir a mensagem; (Arrastar a mensagem da direita para esquerda)
  • Marcar como lida; (Se a mensagem estiver como não lida, arrastar a mensagem da esquerda para direita)
  • Marcar como não lida; (Se a mensagem estiver como lida, arrastar a mensagem da esquerda para direita)
  • Filtrar entre: Todas, Lidas e Não Lidas. (Clicar em Filtrar no cabeçalho)
  • Função de marcar todos e ler ou apagar. (Clicar em Editar no cabeçalho)

Ferramentas utilizadas 🔧

  • HTML
  • CSS
  • JAVASCRIPT
  • GULP
  • NPM

Rodando o projeto na sua máquina 💻

*OBS: Você precisa ter instalado o gulp na sua máquina.

Para rodar o projeto na sua máquina, precisamos instalar primeiro as dependências do projeto. Sendo assim, abra o terminal na pasta do projeto e digite:

npm install

Após a instalação ser concluída, no mesmo terminal, digite:

gulp

E o projeto vai rodar na sua máquina. Provavelmente no localhost:3000, mas caso não esteja nessa porta, verifique no terminal em qual porta está sendo rodado o projeto.

Autor 😁

Jardel Lima Batista

Linkedin Badge Email Badge

About

Tela de mensagens com funcionalidades de excluir, marcar como lida, marcar como não lida e filtrar. (Vanilla JS)


Languages

Language:SCSS 38.1%Language:JavaScript 36.8%Language:HTML 25.1%