Giter Club home page Giter Club logo

churrascometro's Introduction

CHURRASCOMETRO -

ADA TECH - Curso do Santander 2023

Módulo - Javascript Vanilla

Enunciado do projeto prático

Objetivo

O objetivo desta atividade é desenvolver uma calculadora chamada "Churrascômetro" que tem o intuito de calcular os itens para um churrasco. 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: carne, cerveja, sal grosso, refrigerante, água, carvão, gelo e pão de alho.

    Tabela de referência(sugestão)

    Carne 0,4 KG por homem; 0,32 KG por mulher; 0,20 KG por criança;

    Pão de alho 2 por adulto; 1 por criança;

    Carvão 1 KG por pessoa;

    Sal 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;

    Cerveja 3 garrafas de 600ml por pessoa (adultos)

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.

Como usar (produção)

1. Baixe a pasta dist em um servidor Web;
2. Acesse através da URL.

Como usar (Desenvolvimento)

1. Instale o typescript;
2. Clone o repositório;
3. Edite no seu editor de preferênci;
3. Execute o comando tsc para criar o diretório de distribuição;

Telas

O que precisa ser melhorado

1. Responsividade;
2. Posicionamento de elementos (Botão fechas fora de posição);
3. Refatorar e melhorar as funções e eventos;

Desenvolvedor

Clóvis Garcia

churrascometro's People

Contributors

theviolatorx avatar

Stargazers

 avatar

Watchers

 avatar

churrascometro's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.