Ir para conteúdo
fbezerra

Js sujo

Recommended Posts

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

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

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.