Encurtador de Links:
Descrição: O "Encurtador de Links" é uma aplicação web simples, feita em HTML, CSS e JavaScript, que permite ao usuário encurtar URLs longas de forma rápida e eficiente. Usando uma API pública do is.gd, o aplicativo faz chamadas diretamente do navegador, sem a necessidade de backend ou autenticação, oferecendo uma solução prática e acessível.
O projeto conta com um design responsivo e Tema Dark, garantindo uma boa experiência de usuário tanto em desktops quanto em dispositivos móveis.
Funcionalidades:
- Campo para Inserir a URL: O usuário pode inserir qualquer URL válida no campo de texto fornecido. Caso o campo esteja vazio ou uma URL inválida seja inserida, a aplicação avisa o usuário com um alerta para corrigir o erro.
- Botão para Encurtar o Link: Ao clicar no botão "Encurtar", o aplicativo faz uma solicitação à API do is.gd, que processa e retorna um link encurtado. O link gerado aparece logo abaixo do botão e pode ser clicado para abrir diretamente uma URL encurtada.
- Feedback de Erros: Se houver algum erro no processo de encurtamento (como uma URL inválida ou problema com a API), uma mensagem de erro será exibida abaixo do botão. Isso garante que o usuário saiba o que aconteceu e possa tentar novamente.
- Design Responsivo: O layout é totalmente adaptável a diferentes tamanhos de tela, desde smartphones até monitores grandes. O conteúdo centralizado e o estilo minimalista garantem que o projeto seja visualmente atraente em qualquer dispositivo.
- Tema Dark (Escuro): O projeto usa um esquema de cores escuras (preto e cinza), com contrastes de cores claras em textos e botões. Botões interativos mudam de cor ao passar o mouse sobre eles, melhorando a experiência do usuário.
- Uso de API Pública sem Autenticação: O encurtador de links utiliza uma API gratuita do is.gd, permitindo chamadas diretas do navegador, o que elimina a necessidade de configuração de servidores ou tokens de autenticação. Isso simplifica o desenvolvimento e facilita o uso imediato do projeto em qualquer ambiente.
- Links Clicáveis: O link encurtado retornado pela API é exibido como um link clicável, permitindo que o usuário possa facilmente copiar ou visitar o endereço encurtado.
Como o Projeto Funciona:
1 - O usuário insere uma URL no campo de texto. Ao clicar no botão, o JavaScript faz uma chamada fetch para a API do is.gd, enviando uma URL que o usuário quer encurtar.
2 - A API processa uma solicitação e retorna um link encurtado no formato JSON. Esse link é exibido na página, com um texto informando que o processo foi bem-sucedido. Caso haja algum problema, o usuário será informado com uma mensagem de erro.
Melhorias Futuras:
- Copiar link automaticamente: adicione um botão que copie o link encurtado para a área de transferência do usuário.
- Histórico de links encurtados: permite que o usuário veja uma lista dos últimos links encurtados.
- Estatísticas de cliques: integrar o recurso de monitoramento de cliques no link encurtado.
Esse projeto é ideal para quem busca uma ferramenta rápida e simples para encurtar URLs com uma interface intuitiva, moderna e responsiva.
Veja o Encurtador de Links em funcionamento neste link. Encurtador de Links.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang= "pt-br" >
<head>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<title> Encurtador de Links </title>
<link rel= "stylesheet" href= "style.css" >
</head>
<body>
<div class= "container" >
<h1> Encurtador de Links </h1>
<input type= "text" id= "url" placeholder= "Insira a URL aqui" >
<button onclick= "encurtarLink()" > Encurtar </button>
<div id= "resultado" ></div>
</div>
<script src= "script.js" ></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: black;
color: #f4f4f4;
}
.container {
text-align: center;
background-color: #2a2a2a;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 350px;
}
h1 {
margin-bottom: 20px;
font-size: 24px;
color: #f4f4f4;
}
input {
width: 90%;
padding: 15px;
margin: 10px 0;
border: 1px solid #444;
border-radius: 4px;
background-color: #3a3a3a;
color: #fff;
}
input::placeholder {
color: #bbb;
}
button {
width: 60%;
padding: 15px;
margin: 10px 0;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
#resultado p {
margin-top: 20px;
}
#resultado a {
color: #00ff84;
text-decoration: none;
}
#resultado a:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 20px;
}
button, input {
padding: 10px;
font-size: 16px;
}
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
function encurtarLink() {
const url = document.getElementById('url').value.trim();
if (!url) {
alert('Insira uma URL válida!');
return;
}
fetch(`https://is.gd/create.php?format=json&url=${encodeURIComponent(url)}`)
.then(response => response.json())
.then(data => {
const resultado = document.getElementById('resultado');
if (data.shorturl) {
resultado.innerHTML = `Link encurtado: ${data.shorturl}
`;
} else {
resultado.innerHTML = 'Erro ao encurtar o link. Tente novamente.
';
}
})
.catch(error => {
console.error('Erro:', error);
document.getElementById('resultado').innerHTML = 'Erro ao encurtar o link.
';
});
}
4° Passo: Testar o Projeto!
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Se preferir os códigos estão no meu Repositório no GitHub.
Comentários
Postar um comentário
Obrigado pelo seu feedback!