Create a Stock Control Webapp

Asked

Viewed 2,646 times

0

Hello, I’m learning Javascript and I have a question. I already know about HTML, CSS and SQL

Which languages I need to create a system (stock control) that adds, alters (already added) and deletes, element through internal search on the site with javascript.

I also want to store the client’s data in the client-side so that it can open the saved data in your system, which it already has, 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>
javascript html css

  • You will need to have a good javascript bag. To optimize your work you can use some framework like reactjs. To store data in client-side you can use some library as sql.js

  • I’m still at Home more I learn fast, I’ll take a look at reactjs

  • Good evening, I currently work in a carrier system company and I already have enough experience and baggage in this type of system, the most correct and safe way is you work with java in the back end and use a database ( in my case use and prefer the postgres ), recommend you study a little and understand the functioning of Servlet and the MVC standard, about where and when to treat business rule and stuff like, so you will have a stable and secure system.

  • Thank you very much I will follow your tip

1 answer

0


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

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

From what I understand in your question, you want to have enough interaction in the client, I would suggest a SPA framework as angular or a library as React and Vue.

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

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

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.