Mini Task Manager

Projeto front-end criado para praticar conceitos básicos de aplicações web, simulando autenticação e operações de uma API de tarefas com exibição visual de requisições e respostas.

Preview

Sobre o projeto

O Mini Task Manager é um projeto de estudo desenvolvido com HTML, CSS e JavaScript puro. A aplicação simula um fluxo simples de login e gerenciamento de tarefas, com foco em entender como funcionam autenticação, endpoints, headers, status code e respostas em JSON mesmo sem consumir uma API real.

Além da interface, o projeto possui um painel de requisição/resposta que mostra na tela o que está sendo enviado e retornado em cada ação. Isso ajuda bastante no aprendizado dos conceitos de front-end integrado com API.

Funcionalidades

• Login simulado com geração de token fake.
• Criação de novas tarefas.
• Listagem de tarefas cadastradas.
• Exclusão de tarefas individualmente.
• Exibição de requisição e resposta em formato JSON.
• Validação básica para login e criação de tarefa.

O que foi aplicado

HTML

• Estrutura semântica com seções para login, criação de tarefa, lista e painel de resposta.
• Uso de inputs, botões, lista dinâmica e bloco <pre> para exibir JSON formatado.

CSS

• Layout centralizado com visual em tema escuro.
• Uso de cards, espaçamento, bordas arredondadas e contraste entre os elementos.
• Estilização dos botões de ação e botão de exclusão com cores diferentes para reforçar o feedback visual.

JavaScript

• Manipulação do DOM com getElementById, createElement e innerHTML.
• Controle de estado com variáveis como token, tasks e nextId.
• Eventos de clique para login, cadastro e exclusão de tarefas.
• Renderização dinâmica da lista após cada alteração.

Conceitos de API simulados

• Endpoint POST /login para autenticação.
• Endpoint GET /tasks para buscar tarefas.
• Endpoint POST /tasks para criar tarefas.
• Endpoint DELETE /tasks/:id para remover tarefas.
• Uso de header Authorization com padrão Bearer token.
• Envio de dados em body e retorno de respostas em JSON.
• Simulação de códigos HTTP como 200, 201, 400, 401 e 404.

Tecnologias utilizadas

• HTML5
• CSS3
• JavaScript Vanilla

Como executar

1. Clone ou baixe este repositório.
2. Abra o arquivo index.html no navegador.
3. Faça o login com qualquer email e senha.
4. Adicione e remova tarefas para visualizar o comportamento da aplicação e do painel JSON.

Objetivo do projeto

Este projeto foi desenvolvido com foco educacional, para reforçar a lógica de integração entre interface e API, mesmo em um ambiente totalmente simulado no front-end. Ele é uma boa base para evoluir futuramente para uma versão conectada a um back-end real.