diff --git a/index.html b/index.html new file mode 100644 index 0000000..1fe34a3 --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + + + + Cadastramento de Produtos + + + +
+

Cadastramento de Produtos

+ + + + +
+ + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..55d40d5 --- /dev/null +++ b/index.js @@ -0,0 +1,131 @@ +//----------------------------------------------------------------------------- +let produtos = []; + +//----------------------------------------------------------------------------- +function codigoExiste(codigo) { + for (let i = 0; i < produtos.length; i++) { + if (produtos[i].codigoProduto === codigo) { + return true; + } + } + + return false; +} +//------------------------------------------------------------------------------ +function compararProdutoPorCodigo(produto1, produto2) { + if (produto1.codigoProduto < produto2.codigoProduto) { + return -1; + } + + if (produto1.codigoProduto > produto2.codigoProduto) { + return 1; + } + + return 0; +} +//------------------------------------------------------------------------------- +function cadastrar() { + let codigo = parseInt(document.getElementById('codigoProduto').value); + let descricao = document.getElementById('descricaoProduto').value; + let fabricante = document.getElementById('fabricanteProduto').value; + let estoque = parseInt(document.getElementById('quantidadeEstoque').value); + + if (!codigo || !descricao || !fabricante || !estoque) { + document.getElementById('message').innerHTML = 'Preencha os campos corretamente!'; + return; + } + + if (isNaN(codigo) || isNaN(estoque) || codigo < 0 || estoque < 0) { + document.getElementById('message').innerHTML = 'Números inválidos!'; + return; + } + + if (codigoExiste(codigo)) { + document.getElementById('message').innerHTML = `Cadastramento Inválido! Código ${codigo} já existente!`; + return; + } + + let produto = { + codigoProduto: codigo, + descricaoProduto: descricao, + fabricanteProduto: fabricante, + quantidadeEstoque: estoque + }; + + produtos.push(produto); + reset(); + + document.getElementById('message').innerHTML = `Registro ${codigo} cadastrado com sucesso!`; + document.getElementById('codigoProduto').value = ''; + document.getElementById('descricaoProduto').value = ''; + document.getElementById('fabricanteProduto').value = ''; + document.getElementById('quantidadeEstoque').value = ''; +} +//---------------------------------------------------------------------------------- +function listar() { + if (produtos.length === 0) { + document.getElementById('message').innerHTML = 'Nenhum produto encontrado!'; + return; + } + + produtos.sort(compararProdutoPorCodigo); + let listaDiv = document.getElementById('lista'); + let tableContent = ''; + + for (let i = 0; i < produtos.length; i++) { + tableContent += ``; + } + + tableContent += '
CódigoDescriçãoFabricanteQuantidade em Estoque
${produtos[i].codigoProduto}${produtos[i].descricaoProduto}${produtos[i].fabricanteProduto}${produtos[i].quantidadeEstoque}
'; + listaDiv.innerHTML = tableContent; + document.getElementById('message').innerHTML = ''; +} +//---------------------------------------------------------------------------------- +function limpar() { + produtos = []; + reset(); + return; +} +//---------------------------------------------------------------------------------- +function deletar() { + if (produtos.length === 0) { + document.getElementById('message').innerHTML = 'Nenhum produto encontrado!'; + return; + } + else { + document.getElementById('message').innerHTML = 'Selecione o produto que deseja deletar:'; + + produtos.sort(compararProdutoPorCodigo); + let listaDiv = document.getElementById('lista'); + let tableContent = ''; + + for (let i = 0; i < produtos.length; i++) { + tableContent += ``; + } + + tableContent += '
CódigoDescriçãoFabricanteQuantidade em EstoqueAção
${produtos[i].codigoProduto}${produtos[i].descricaoProduto}${produtos[i].fabricanteProduto}${produtos[i].quantidadeEstoque}
'; + listaDiv.innerHTML = tableContent; + return; + } +} +//---------------------------------------------------------------------------------- +function deletarGrid(codigo) { + const indice = produtos.findIndex(produto => produto.codigoProduto === codigo); + + if (indice !== -1) { + produtos.splice(indice, 1); + + reset(); + deletar(); + } +} +//------------------------------------------------------------------------------------- +function reset() { + document.getElementById('codigoProduto').value = ''; + document.getElementById('descricaoProduto').value = ''; + document.getElementById('fabricanteProduto').value = ''; + document.getElementById('quantidadeEstoque').value = ''; + document.getElementById('message').innerText = ''; + document.getElementById('lista').innerHTML = ''; +} +//-------------------------------------------------------------------------------------- \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..81bc7dc --- /dev/null +++ b/styles.css @@ -0,0 +1,114 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +#registro { + width: 600px; + background-color: lightgray; + padding: 20px; + border-radius: 5px; + border: 5px solid #ccc; +} + +#registro h1 { + text-align: center; +} + +#registro input { + display: block; + margin: 10px auto; + padding: 5px; + width: 80%; +} + +#registro .buttons-container { + display: flex; + justify-content: center; + gap: 10px; + padding: 9px; +} + +button { + border-radius: 8%; + padding: 5px; + cursor: pointer; +} + +button.cadastrar-btn, +button.listar-btn { + background-color:navy; + color: white; + +} + +button.deletar-btn, +button.limpar-btn { + background-color:darkred; + color: white; +} + +button.reset-btn { + background-color: gray; + color: white; +} + +button.deletarGrid-btn{ + background-color: darkorange; + color: black; + border: none; +} + +.cadastrar-btn:hover, +.listar-btn:hover, +.reset-btn:hover { + background-color:blue; + color: white; +} + +.deletar-btn:hover, +.limpar-btn:hover, +.deletarGrid-btn:hover { + background-color:red; + color: white; +} + +#message { + text-align: center; + margin-top: 10px; +} + +.highlight { + color: green; + font-weight: bold; +} + +.warning { + color: rgb(107, 29, 29); + font-weight: bold; +} + +table { + width: 100%; + margin-top: 20px; + border-collapse: collapse; +} + +table, +th, +td { + border: 1.5px solid rgb(47, 70, 124); + padding: 5px; +} + +th { + text-align: center; + background-color: rgba(1, 7, 26, 0.105); +} + +td { + text-align: left; +} \ No newline at end of file