Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@edugmenes
edugmenes committed Mar 21, 2024
0 parents commit ad07dd8
Show file tree
Hide file tree
Showing 3 changed files with 276 additions and 0 deletions.
31 changes: 31 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>Cadastramento de Produtos</title>
</head>

<body>
<div id="registro">
<h1>Cadastramento de Produtos</h1>
<input type="number" id="codigoProduto" placeholder="Código do Produto:">
<input type="text" id="descricaoProduto" placeholder="Descrição do Produto:">
<input type="text" id="fabricanteProduto" placeholder="Fabricante do Produto:">
<input type="number" id="quantidadeEstoque" placeholder="Quantidade em Estoque:">
<div class="buttons-container">
<button onclick="cadastrar()" class="cadastrar-btn">Cadastrar</button>
<button onclick="listar()" class="listar-btn">Listar</button>
<button onclick="limpar()" class="limpar-btn">Limpar</button>
<button onclick="deletar()" class="deletar-btn">Deletar</button>
<button onclick="reset()" class="reset-btn">Reset</button>
</div>
<div id="message"></div>
<div id="lista"></div>
</div>
<script src="index.js"></script>
</body>

</html>
131 changes: 131 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -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 = '<span class="warning">Preencha os campos corretamente!</span>';
return;
}

if (isNaN(codigo) || isNaN(estoque) || codigo < 0 || estoque < 0) {
document.getElementById('message').innerHTML = '<span class="warning">Números inválidos!</span>';
return;
}

if (codigoExiste(codigo)) {
document.getElementById('message').innerHTML = `<span class="warning">Cadastramento Inválido! Código <span class="highlight">${codigo}</span> já existente!</span>`;
return;
}

let produto = {
codigoProduto: codigo,
descricaoProduto: descricao,
fabricanteProduto: fabricante,
quantidadeEstoque: estoque
};

produtos.push(produto);
reset();

document.getElementById('message').innerHTML = `Registro <span class="highlight">${codigo}</span> 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 = '<span class="warning">Nenhum produto encontrado!</span>';
return;
}

produtos.sort(compararProdutoPorCodigo);
let listaDiv = document.getElementById('lista');
let tableContent = '<table><thead><tr><th>Código</th><th>Descrição</th><th>Fabricante</th><th>Quantidade em Estoque</th></tr></thead><tbody>';

for (let i = 0; i < produtos.length; i++) {
tableContent += `<tr><td>${produtos[i].codigoProduto}</td><td>${produtos[i].descricaoProduto}</td><td>${produtos[i].fabricanteProduto}</td><td>${produtos[i].quantidadeEstoque}</td></tr>`;
}

tableContent += '</tbody></table>';
listaDiv.innerHTML = tableContent;
document.getElementById('message').innerHTML = '';
}
//----------------------------------------------------------------------------------
function limpar() {
produtos = [];
reset();
return;
}
//----------------------------------------------------------------------------------
function deletar() {
if (produtos.length === 0) {
document.getElementById('message').innerHTML = '<span class="warning">Nenhum produto encontrado!</span>';
return;
}
else {
document.getElementById('message').innerHTML = '<span class="highlight">Selecione o produto que deseja deletar:</span>';

produtos.sort(compararProdutoPorCodigo);
let listaDiv = document.getElementById('lista');
let tableContent = '<table><thead><tr><th>Código</th><th>Descrição</th><th>Fabricante</th><th>Quantidade em Estoque</th><th>Ação</th></tr></thead><tbody>';

for (let i = 0; i < produtos.length; i++) {
tableContent += `<tr><td>${produtos[i].codigoProduto}</td><td>${produtos[i].descricaoProduto}</td><td>${produtos[i].fabricanteProduto}</td><td>${produtos[i].quantidadeEstoque}</td><td style="text-align: center;"><button onclick="deletarGrid(${produtos[i].codigoProduto})" class="deletarGrid-btn">Deletar</button></td></tr>`;
}

tableContent += '</tbody></table>';
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 = '';
}
//--------------------------------------------------------------------------------------
114 changes: 114 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit ad07dd8

Please sign in to comment.