Eu sou uma pessoa desenvolvedora full-stack...
A proposta para o desenvolvimento deste projeto foi a construção de um sistema de almoxarifado. Utilizando dos requisitos exigidos nas regras de negócio e dos recursos aprendidos durante as aulas do curso de programação FullStack.
- Exibição de temperatura, clima e umidade.
- Personalização de estilo: o app que mostra a previsão do tempo foi personalizado com fontes, cores, tamanhos e formatos de exibição.
- A cada refresh da página muda a exibição do background.
- Utilizar HTML5 para criar o layout da aplicação.
- Trabalhar com CSS3 para estilização dos elementos.
- Desenvolver habilidades em JavaScript.
Aqui consta as principais tecnologias usadas, podem ser abordadas outras no desenvolvimento do projeto, basta conferir o código completo.
| RN | Localização | Especificação |
|---|---|---|
| RN01 | Tela Requisição > Campos | Todos os campos são obrigatórios, com exceção dos campos: [Nome Funcionario]. Ao clicar no botão gravar (final da página). Sistema deve verificar se existe campos obrigatórios e não preenchidos. Se existir, esses campos devem ficar com a cor de fundo vermelha. |
| RN02 | Tela Requisição > Campos | Ao entrar dentro de um campo o fundo deve ficar com a cor verde. |
| RN03 | Tela Requisição > Campos | Os campos ID, [Quantidade] só devem aceitar valores inteiros. |
| RN04 | Tela Requisição > Categoria Motivo | Ao carregar a tela os dados da Categoria Motivo devem ser carregados da API. Atenção: Para simular crie dados fakes em um arquivo dados.js dentro da pastas scripts. |
| RN05 | Tela Requisição > Motivo | Todo motivo está atrelado a uma Categoria de Motivo. Ao alterar os dados de uma categoria do motivo o campo motivo deve exibir somente os motivos da categoria selecionada. Se a categoria não estiver nenhum motivo correspondente o campo [MOTIVO] deve ficar desabilitado e com a cor de fundo cinza. |
| RN06 | Tela Requisição > [ ID] [Departamento] | Ao digitar um código no campo [ID] e esse existe na base de dados ou API o sistema deve exibir a descrição do departamento no campo Departamento. Se ao digitar um código, o mesmo não existir, logo a descrição deverá está vazia do campo Departamento. |
| RN07 | Tela Requisição > [ ID Fun] [Nome Funcionario] | Ao digitar um código no campo ID Func e esse existe na base de dados ou API o sistema deve exibir o nome do funcionário no campo [Nome Funcionario]. Se ao digitar um código, o mesmo não existir, logo o campo [Nome Funcionario] fica vazio. |
| RN08 | Tela Requisição > [ ID] [Descricao Produto] [Estoque] | Ao digitar um código no campo Cod Produto e esse existe na base de dados ou API o sistema deve exibir o nome do Produto e no campo [Estoque] a quantidade de itens em seu estoque. Se o código não existir, os campos Descrição do Produto e Estoque devem ficar em brancos. |
| RN09 | Tela Requisição > Campo [Quantidade] | Campo quantidade só é habilitado, depois que um produto for localizado e quantidade em estoque for maior que zero. |
| RN10 | Tela Requisição > Campo [Quantidade] | O campo Quantidade só deve aceitar valores inteiros maior que zero. |
| RN11 | Tela Requisição > Botão Gravar | O botão gravar só deve ficar ativo depois que o valor da quantidade informada for maior que zero e se a quantidade for menor ou igual ao valor exibido no estoque. |
| RN12 | Tela Requisição > Nivel Prioridade | Ao marcar um nível de prioridade esse deve mudar a cor conforme o click, vermelho -> urgente, amarelo -> médio, verde -> baixo. |
| RN13 | Tela Requisição > Elemento Status Estoque | O elemento Status Estoque é o retângulo exibido ao lado do campo quantidade e deve ficar com as cores a seguir e conforme legenda vermelho -> Estoque acima de 10% do Estoque mínimo, amarelo -> Estoque abaixo de 10% do Estoque mínimo, verde -> Estoque abaixo do Estoque mínimo. |
| RN14 | Tela Requisição > Status Estoque > ToolTip | Ao colocar o mouse sobre o elemento Status Estoque (retângulo) deve ser exibido a legenda a seguir: vermelho -> Estoque acima de 10% do Estoque mínimo, amarelo -> Estoque abaixo de 10% do Estoque mínimo, verde -> Estoque abaixo do Estoque mínimo. |
- Javascript
- HTML
- CSS
Feito com 💜 por Andressa.