NLW Journey

Um Planejador de Atividades para Viagens desenvolvido em HTML, CSS e JavaScript na trilha Full-Stack da NLW Journey da Rocketseat.

Sumário

• Sobre
• Preview
• Tecnologias
• Funcionalidades
• Deploy
• Destaques
• Meu contato

Sobre

O Plann.er é uma aplicação responsiva que permite adicionar e concluir atividades a serem realizadas durante uma viagem, adicione o seu destino e planeje o que fazer e em qual horário fazer cada atividade no seu próximo momento incrível.

Preview

Desktop

Mobile

Tecnologias

• CSS
• HTML
• JavaScript

Funcionalidades

• Inserir destino
• Inserir atividade
• Inserir data da atividade
• Inserir horário da atividade
• Marcar atividade como concluída
• Desmarcar atividade concluída

Deploy

Acesse o Plann.er no link abaixo

Plann.er

Destaques

Uso da biblioteca Day.js para a formatação e exibição de datas.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/pt-br.js"></script>
<script>
  dayjs.locale("pt-br");
</script>

Animação fade-in ao adicionar uma nova atividade.

section .card-bg {
  animation: appear 1.5s;
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

Efeito de sombra mais elaborado.

.card-bg {
  border-radius: 12px;
  background: #18181b;

  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1), 0px 4px 4px rgba(0, 0, 0, 0.1),
    0px 2px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1),
    inset 0px 0px 0px 1px rgba(255, 255, 255, 0.03), inset 0px 1px 0px rgba(255, 255, 255, 0.03);
}

Atualizando lista de atividades.

const atualizarListaDeAtividades = () => {
  const section = document.querySelector("section");
  section.innerHTML = "";

  if (atividades.length == 0) {
    section.innerHTML = `<p>Nenhuma atividade cadastrada</p>`;
    return;
  }

  for (let atividade of atividades) {
    section.innerHTML = section.innerHTML + criarItemDeAtividade(atividade);
  }
};
atualizarListaDeAtividades();

Meu contato

LinkedIn @udanielnogueira