Questão 12 - Prova estágio

				
					<!DOCTYPE html>
<html>
<head>
    <title>Prova Estágio ARQENG Web</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <style>
        body {
            background-color: #f2f2f2;
        }
        .card {
            margin: auto;
            margin-top: 10%;
            width: 60%;
            background-color: #fff;
            border-radius: 10px;
        }
        h1 {
            text-align: center;
        }
        #gerar {
            margin-left: 40%;
        }
    </style>
    <script>
        jQuery(document).ready(function(){
            jQuery("#gerar").click(function(){

                var telefone = jQuery("#telefone").val().replace(/\s+/g, '').replace(/[^0-9]/gi, '');
                var mensagem = jQuery("#mensagem").val();
                var link = "https://wa.me/55" + telefone + "?text=" + encodeURIComponent(mensagem);
                jQuery("#link").val(link);
                
               
                jQuery("#link").select();
            });
            
            jQuery("#copiar").click(function(){
               
                jQuery("#link").select();
                
                document.execCommand("copy");
            
                alert("ITEM COPIADO");
            });
        });
    </script>
</head>
<body>
    <div class="card">
        <div class="card-body">
            <h1>Prova Estágio ARQENG Web</h1>
            <p>Digite o telefone e a mensagem que deseja enviar:</p>
            <div class="form-group">
                <input type="tel" class="form-control" id="telefone" placeholder="(99) 99999-9999">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="mensagem" placeholder="Ex: Olá, tudo bem?">
            </div>
            <button class="btn btn-primary" id="gerar">Gerar link</button>
            <p>Copie o link gerado:</p>
            <div class="form-group">
                <input type="text" class="form-control" id="link" readonly>
            </div>
            <button class="btn btn-primary" id="copiar">Copiar Mensagem</button>
        </div>
    </div>
</body>
</html>