Hello, I'm learning Javascript and I have a question. I already know HTML, CSS and SQL
What languages do I need to create a system (inventory control) that adds, changes (already added) and deletes, element through internal search in the site with javascript.
I also want to store client data on the client-side so that it can open the saved data it already has on your system and can be stored in portable storage.
I already have a code
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Evento de Botão</title>
<style>
input, button {
padding: .5em;
}
table {
border-collapse: collapse;
margin-top: 1em;
width: 100%;
}
th, td {
border: 1px solid #bbb;
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<input type="text" id="codigo" placeholder="insira o codigo do produto">
<input type="text" id="precoCompra" placeholder="preco de compra">
<input type="text" id="precoVenda" placeholder="preco de venda">
<button id="btn-adicionar">
Adcionar
</button>
<button id="btn-alterar">
Alterar
</button>
<div id="pesquisa" hidden>
<input type="text" placeholder="pesquise o codigo" id="campoPesquisa">
</div>
<table id="dados" hidden>
<thead>
<tr>
<th>Codigo do Produto</th>
<th>preço compra</th>
<th>preço Venda</th>
<th>lucro</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
const codigo = document.querySelector('#codigo')
const precoCompra = document.querySelector('#precoCompra')
const precoVenda = document.querySelector('#precoVenda')
const btn = document.querySelector('#btn-adicionar')
const dados = document.querySelector('#dados')
const btnAlterar = document.querySelector('#btn-alterar')
const tbody = document.querySelector('tbody')
const pesquisa = document.querySelector('#pesquisa')
const campopesquisa= document.querySelector('#campoPesquisa')
codigo.focus()
btn.addEventListener('click', e=>{
let compra = +precoCompra.value
let venda = +precoVenda.value
let valorFinal = 0
if (compra && venda && codigo){
valorFinal = venda - compra
dados.removeAttribute('hidden')
tbody.innerHTML += '<tr>
<td class="codproduto">${codigo.value}</td>
<td>${compra}</td>
<td>${venda}</td>
<td>${valorFinal}</td>
</tr>'
codigo.value = ''
precoCompra.value = ''
precoVenda.value = ''
codigo.focus()
}
})
btnAlterar.addEventListener('click', e=>{
/*
if(tbody){
pesquisa.removeAttribute('hidden')
let search = campopesquisa.value
}
*/
pesquisa.removeAttribute('hidden')
for( let c of document.querySelectorAll(".codproduto") )
{
console.log(c.innerHTML)
}
})
</script>
</body>
</html>