Create a Stock Control Webapp

0

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>
    
asked by anonymous 03.06.2017 / 22:50

1 answer

0

In my view do not follow cake recipes, rather research and see if it fits your need.

Necessarily you will need front technologies (html, css and js) and back (have several) ...

As I understood in your question, you want to have enough interaction on the client, I would suggest a SPA framework as the angle or a library as react and vue.

Somehow you will need someone on the server, serving your client. If you want to use only javascript (client and server), you can use node.js.

From a researched on these technologies and start learning them in practice creating the "prototype" of your idea, this will give you a good result, both for the future of your idea and motivation to learn.

    
05.06.2017 / 03:14