Conheça o projeto
Neste desafio, você vai desenvolver um site web responsivo para agendamento em pet shop. A aplicação permitirá que o usuário visualize sua agenda de atendimentos, adicione novos agendamentos preenchendo informações como nome do pet, tutor, horário e serviço, além de possibilitar a remoção de agendamentos existentes. O foco está em criar uma interface intuitiva e adaptada tanto para desktop quanto para mobile, aplicando boas práticas de HTML, CSS e JavaScript para gerenciar dinamicamente a lista de compromissos.
Recursos
Materiais para você usar como base para o desenvolvimento
Instruções
Estrutura, regras e requisitos do projeto
1. Requisitos
Agenda
- Crie a visualização dos agendamentos;
- Liste os agendamentos agrupados por seção;
- Cada card de seção deve ter:
- Ícone;
- Nome do período;
- Horário do período;
- Cada agendamento deve ter:
- Horário;
- Nome do animal;
- Nome do tutor;
- Descrição do serviço;
- Opção de apagar o agendamento;
Modal “Agende um atendimento”
- Crie a lógica para que o usuário ao clicar no botão "Novo agendamento" abra um modal de agendamento;
- Campos do formulário de agendamento:
- Nome do tutor;
- Nome do pet;
- Telefone;
- Descrição do serviço;
- Data;
- Hora.
- Crie o botão para finalizar o novo agendamento e fechar o modal;
- O modal deve bloquear o fundo e ter foco inicial no primeiro campo.
Comportamento e regras
- Ao agendar, criar o card na seção correta (Manhã/Tarde/Noite), ordenado por horário;
- Mudar a data no topo troca a agenda exibida (mostrar os agendamentos daquela data);
- Remover agendamento exclui a linha imediatamente;
- Prevenção de conflito: não permitir dois agendamentos no mesmo horário para a mesma data;
- Campos obrigatórios: tutor, pet, telefone, serviço, data e hora;
- Hora deve estar dentro das janelas válidas; bloquear horários fora das faixas;
- Impedir envio com campos vazios/inválidos e mostrar mensagens claras por campo.
2. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais tecnologias que utilizamos durante o desenvolvimento do primeiro módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além! 🚀
3. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência? É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜
4. Considerações finais
Lembre-se que o intuito de um desafio é te impulsionar, por isso, dependendo do desafio, pode ser que você precise ir além do que foi discutido em sala de aula. Mas isso não é algo ruim: ter autonomia para buscar informações extras é uma habilidade muito valiosa e vai ser ótimo pra você treinar ela aqui com a gente!
E lembre-se: tenha calma! Enfrentar desafios faz parte do seu processo de aprendizado!
Se precisar de alguma orientação ou suporte, estamos aqui com você! Bons estudos e boa prática! 💜
Feito com 💜 por Rocketseat 👋
1. Requisitos
Agenda
- Crie a visualização dos agendamentos;
- Liste os agendamentos agrupados por seção;
- Cada card de seção deve ter:
- Ícone;
- Nome do período;
- Horário do período;
- Cada agendamento deve ter:
- Horário;
- Nome do animal;
- Nome do tutor;
- Descrição do serviço;
- Opção de apagar o agendamento;
Modal “Agende um atendimento”
- Crie a lógica para que o usuário ao clicar no botão "Novo agendamento" abra um modal de agendamento;
- Campos do formulário de agendamento:
- Nome do tutor;
- Nome do pet;
- Telefone;
- Descrição do serviço;
- Data;
- Hora.
- Crie o botão para finalizar o novo agendamento e fechar o modal;
- O modal deve bloquear o fundo e ter foco inicial no primeiro campo.
Comportamento e regras
- Ao agendar, criar o card na seção correta (Manhã/Tarde/Noite), ordenado por horário;
- Mudar a data no topo troca a agenda exibida (mostrar os agendamentos daquela data);
- Remover agendamento exclui a linha imediatamente;
- Prevenção de conflito: não permitir dois agendamentos no mesmo horário para a mesma data;
- Campos obrigatórios: tutor, pet, telefone, serviço, data e hora;
- Hora deve estar dentro das janelas válidas; bloquear horários fora das faixas;
- Impedir envio com campos vazios/inválidos e mostrar mensagens claras por campo.
2. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais tecnologias que utilizamos durante o desenvolvimento do primeiro módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além! 🚀
3. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência? É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜
4. Considerações finais
Lembre-se que o intuito de um desafio é te impulsionar, por isso, dependendo do desafio, pode ser que você precise ir além do que foi discutido em sala de aula. Mas isso não é algo ruim: ter autonomia para buscar informações extras é uma habilidade muito valiosa e vai ser ótimo pra você treinar ela aqui com a gente!
E lembre-se: tenha calma! Enfrentar desafios faz parte do seu processo de aprendizado!
Se precisar de alguma orientação ou suporte, estamos aqui com você! Bons estudos e boa prática! 💜
Feito com 💜 por Rocketseat 👋