fbezerra 0 Denunciar post Postado Junho 28, 2019 Bom dia devs tudo bem? eu fiz um script para empresa onde os funcionários preenche as informações necessárias, até aí ok.. o ruim é o meu código que esta muito sujo eu queria otimizar ele, alguém pode me ajudar? muito obrigado Segue o codigo abaixo: <!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"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Script SQ</title> <style rel="stylesheet" type="text/css"> body { margin: 0 auto; } .yellow{ background-color:rgb(248, 248, 54); } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col"> <center><img src="logo.png"> </center> <form> <br>Nome do Cliente:<br> <input type="text" class="form-control" name="nomeCliente" id="nomeCliente" placeholder="Nome do Cliente"><br> Código_Cliente / N° projeto vinculado:<br> <input type="text" class="form-control" name="CodCliente" id="CodCliente" placeholder="Código_Cliente / N° projeto vinculado"><br> Sistema:<br> <input type="text" class="form-control" name="sistema" id="sistema" placeholder="FOLHA OFFICE SAGE"><br> Base (banco de dados):<br> <input type="text" class="form-control" name="base" id="base" placeholder="SQL/DBF"><br> Versão / Release:<br> <input type="text" class="form-control" name="versao" id="versao" placeholder="Versão"><br> Certificado:<br> <input type="text" class="form-control" name="certificado" id="certificado" placeholder="A1/A3"><br> Empresa:<br> <input type="text" class="form-control" name="empresa" id="empresa" placeholder="0012"><br> Vigência:<br> <input type="text" class="form-control" name="vigencia" id="vigencia" placeholder="07/18"><br> Descrição(Erro/mensagem/print/arquivo):<br> <textarea type="text" class="form-control" name="descricao" id="descricao" placeholder="Descrição"></textarea><br> Solução Detalhada:<br> <textarea type="text" class="form-control" name="solucaoDetalhada" id="solucaoDetalhada" placeholder="Solução detalhada"></textarea><br> Pendência:<br> <input type="text" class="form-control" name="pendencia" id="pendencia" placeholder="Nada"><br> Tempo Considerado:<br> <input type="text" class="form-control" name="tempoConsiderado" id="tempoConsiderado" placeholder="1:00"><br> <input type="button" class="btn btn-info" id="btnMostrar" value="Mostrar" style="float:right; margin-bottom: 10px;" onclick="mostrar();"> </form> </div> <div class="col yellow"> <center><h3>SCRIPT ATENDIMENTO SQ</h3></center> <div id="conteudo"></div> </div> </div> </div> <script type="text/javascript"> function mostrar(){ var nomeCliente = document.getElementById('nomeCliente').value; var CodCliente = document.getElementById('CodCliente').value; var sistema = document.getElementById('sistema').value; var versao = document.getElementById('versao').value; var certificado = document.getElementById('certificado').value; var empresa = document.getElementById('empresa').value; var vigencia = document.getElementById('vigencia').value; var descricao = document.getElementById('descricao').value; var solucaoDetalhada = document.getElementById('solucaoDetalhada').value; var pendencia = document.getElementById('pendencia').value; var tempoConsiderado = document.getElementById('tempoConsiderado').value; var conteudo = ""; document.getElementById('conteudo').innerHTML = " <br><span style='font-weight:bold'> " + "Nome do Cliente: </span>" + nomeCliente + "<br>"; document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Código_Cliente / N° projeto vinculado: </span>" + CodCliente + "<br>"; document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Sistema: </span>" + sistema + "<br>"; document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Versão/Release: </span>" + versao + "<br>"; document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Certificado: </span>" + certificado + "<br>"; document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Empresa: </span>" + empresa + "<br>"; document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Vigência </span>" + vigencia + "<br>"; document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Descrição: </span>" + descricao + "<br>"; document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Solução Detalhada: </span>" + solucaoDetalhada + "<br>"; document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Descrição(Erro/mensagem/print/arquivo): </span>" + pendencia + "<br>"; document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Tempo Considerado: </span>" + tempoConsiderado + "<br>"; document.body.scrollTop = 0; document.documentElement.scrollTop = 0; </script> </body> </html> eu queria também inserir um botão para copiar o 'conteudo' para facilitar pro funcionário se não tem que ficar selecionando e copiando com o mouse. muito obrigado Compartilhar este post Link para o post Compartilhar em outros sites
Pita 53 Denunciar post Postado Junho 28, 2019 Acho que uma coisa que você pode fazer é transferir o código JS e CSS para arquivos separados Compartilhar este post Link para o post Compartilhar em outros sites
Omar~ 87 Denunciar post Postado Junho 28, 2019 A tag <center> é obsoleta em HTML5 Dica: Você está consultado o documento diversas vezes para buscar o elemento de id conteudo. Isso torna a página mais pesada para carregar. Você pode fazer assim que fica melhor: document.getElementById('conteudo').innerHTML = "A\n" " B\n" " C\n" // Ou assim document.getElementById('conteudo').innerHTML = "A"; + " B"; + " C"; 4 horas atrás, fbezerra disse: eu queria também inserir um botão para copiar o 'conteudo' para facilitar pro funcionário se não tem que ficar selecionando e copiando com o mouse. muito obrigado Simples basta usar a API do navegador clipboard, fiz algo bem genérico aqui para você ver como proceder <div id="copiar_texto">Esse texto será copiado para área de transferência</div> <button type="button" onclick="copiar();">Copiar o texto</button> <script> function copiar() { var texto = document.getElementById('copiar_texto').innerText; navigator.clipboard.writeText(texto).then(function () { console.log('copiado'); }, function () { console.warn('Erro ao copiar'); }); } </script> Compartilhar este post Link para o post Compartilhar em outros sites
fbezerra 0 Denunciar post Postado Junho 28, 2019 ~Omar Obrigado!! Compartilhar este post Link para o post Compartilhar em outros sites