-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (108 loc) · 3.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de link do WhatsApp</title>
<style>
html{
font-family: Helvetica, sans-serif;
}
.comandos{
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 0 auto;
width: 400px;
}
#texto, #email, #assunto{
width: 98%;
height: 30px;
margin-bottom: 10px;
}
button{
width: 100%;
height: 35px;
border: none;
border-radius: 4px;
color: white;
background-color: black;
}
.areadoresultado{
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 20px auto;
padding: 20px;
width: 340px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 6px;
}
.resultado{
overflow-x: auto;
margin-bottom: 15px;
}
</style>
</head>
<body>
<section class="comandos">
<h1>Gerador de link para E-mail</h1>
<form method="post" action="" onsubmit="gerarlink(event)">
<input placeholder="Seu email" type="email" id="email" required>
<input placeholder="Seu assunto para o email" type="text" id="assunto">
<input placeholder="Seu texto para o email" type="text" id="texto">
<button type="submit">Gerar Link</button>
</form>
</section>
<div class="areadoresultado" id="areadoresultado">
<div class="resultado" id="resultado"></div>
<button id="copiar">Copiar Link</button>
</div>
<script>
//variaveis capturar texto e area do resultado
let email = document.querySelector("#email").value;
let assunto = document.querySelector("#assunto").value;
let texto = document.querySelector("#texto").value;
let resultado = document.querySelector("#resultado");
//variaveis para resultado
let link;
//variavel para copiar link
let botaoCopiar = document.querySelector("#copiar");
function gerarlink(event){
event.preventDefault();
email = document.querySelector("#email").value;
assunto = document.querySelector("#assunto").value;
texto = document.querySelector("#texto").value;
//validar
let regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regexEmail.test(email)) {
alert('O email precisa estar no formato email@empresa.com');
return false;
}
if(assunto.toString().length != ""){
assunto = "?subject="+encodeURI(assunto.trim().replace(/[\s]/g, '+'));
}
if(texto.toString().length != ""){
texto = "&body="+encodeURI(texto.trim().replace(/[\s]/g, '+'));
}
//formar link
console.log(assunto);
console.log(texto);
link = "mailto:"+email+assunto+texto;
//mostrar resultado
resultado.innerText = "";
resultado.insertAdjacentHTML("afterBegin", link);
}
botaoCopiar.addEventListener('click', () => {
navigator.clipboard.writeText(link).then(() => {
alert('Link copiado para a área de transferência!');
}, error => {
console.error(error);
alert('Erro ao copiar o link.');
});
});
resultado.insertAdjacentHTML("afterBegin", "Link aqui");
</script>
</body>
</html>