Projeto - Encurtador de URL

Projeto de conclusão de módulo - Javascript Avançado

Sobre o projeto

Criação de Encurtador de URL baseado na API short.io

O protótipo de telas com as especificações: Miro

Projeto utiliza a API: API short.io

Especificações funcionais:

• Utilizar com maestria o HTML, CSS e JavaScript (import e export)
• Layout responsivo (mobile)
• Utilizar o fetch API para fazer as requisições
• Trabalhar as mensagens de erro no catch
• Pode usar o async, await
• Trabalhar uma mensagem e/ou img de carregando nas páginas onde tenha requisição, é muito importante, isso vale para as ações dos botões também (Ex.: clicou, mudar o layout do botão e desabilitar sua ação até obter a resposta ele voltar para o estado "normal").
• Atenção para todas as telas tem mensagens que são importantes
• Atenção para analisar como armazenar alguns dados frequentemente usados como:
• iDomain, idString, hostname

Telas:

Tela Inicial

Carregando

Resultado - Copiar

Resultado - Compartilhar

Resultado QR Code

Lista de Links Cadastrados

Lista de Links Mensagens

Lista de Links Editar

Lista de Links Excluir

Para utilizar o código, crie sua conta e obtenha sua api key

• Acesse e crie sua conta

• Feito isso, crie um arquivo chamado: config.json

• E adicione o seguinte:

export const chaves = {
    "apiKey": "sua_api_key",
    "domainId": "seu_id_domain",
    "domainUrl": "seu_url_domain"
}

Pode ser necessário instalar uma extensão, para utilizar a API

Extensão: Allow CORS: Access-Control-Allow-Origin

• Depois de instalar a extensão, clique nela e ative a opção ON para habilitar

Nova atualização: agora você pode utilizar sua própria chave da API

• Clique na chave para adicionar sua api key. Ela será armazenada localmente no seu navegador para reutilização posterior.
• Demonstração