Calculo-de-itens

Projeto final do modulo Front End Dinâmico (JS DOM) do Santander-Coders

• link do Layout do Figma

• link do projeto

---

Projeto realizado em Dupla

Alunas do Santander Coders 2023 | 2º Semestre - JS (3) | #1122

Vanessa

Ana Carolina

Objetivo

O objetivo desta atividade é desenvolver uma calculadora chamada "Piquenique Certo" que tem o intuito de calcular os itens para um piquenique. A página deve funcionar em 3 passos, sendo que cada passo pode ser uma tela montada dinamicamente dentro do mesmo arquivo HTML ou simplesmente os componentes sendo atualizados dinamicamente.

Requisitos

1. O primeiro passo deve exibir 4 campos para digitar "nome, e-mail e CEP além de checkbox de consentimento com o texto "aceito receber e-mails com promoções".

• Os campos "nome", "e-mail" e CEP devem ser obrigatórios;
• O campo "e-mail" deve conter um e-mail válido;
• O checkbox deve ser carregado marcado automaticamente;
• Caso algum campo esteja inválido, deve haver uma indicação visual na tela;
• Uma vez que o usuário já tenha preenchido estes campos, não devemos solicitá-los novamente após a página ser recarregada.

2. O passo seguinte deve conter 3 ou 4 campos para indicar a quantidade de pessoas entre (homens, mulheres/adultos, crianças e pessoas que bebem bebidas alcoólicas).

• Os campos devem permitir somente inteiros não negativos;

3. O terceiro passo deve exibir uma tabela com o resultado do cálculo com a quantidade indicada para cada um dos itens. Os itens são: Sanduíches naturais, Salgados assados, Frutas picadas, refrigerante, água, Torradas com geleia ou manteiga, gelo e Pipoca.

• Tabela de referência(sugestão)
• Sanduíches naturais
  • 0,4 KG por homem;
  • 0,32 KG por mulher;
  • 0,20 KG por criança;
• Pipoca
  • 2 por adulto;
  • 1 por criança;
• Torradas com geleia
  • 1 KG por pessoa;
• Salgados assados
  • 0,04 KG por pessoa;
• Gelo
  • 5KG a cada 10 pessoas;
• Refrigerante
  • 1 garrafa de 2L a cada 5 pessoas;
• Água
  • 1 garrafa de 1L a cada 5 pessoas;
• Frutas picadas
  • 3 pacotes de 600ml por pessoa

Critérios

1. A calculadora deve funcionar corretamente e atender aos requisitos especificados;

2. O código deve fazer uso de seletores e métodos para manipulação do DOM;

3. O código deve fazer uso de adição e remoção de classes e estilização através do Javascript;

4. O código deve fazer uso de eventos ligados aos elementos da página;

5. O código deve fazer uso de armazenamento no browser (Web Storage API);

6. O código deve fazer uso de chamadas assíncronas e seus derivados.

Paginas

Documentos HTML JS Index foi feita pelas duas alunas, coma ajuda do Professor Murilo Flesch.

Documentos HTML CSS JS Segunda-Pagina Feita inteiramente pela aluna Vanessa.

Documentos HTML CSS JS Terceira-Pagina Feita inteiramente pela aluna Ana Carolina.

Modo Claro e Escuro feitos pelas alunas Ana Carolina e Vanessa