🐬 Token+ Elements

Elementos em HTML e CSS a um token de distância, isso é 🐬Token+ Elements.

Sumário

• Sobre
• Preview
• Tecnologias
• Funcionalidades
• Deploy
• Destaques
• Meu Contato

Sobre

Insira ou clique em um token, escolha seu elemento preferido e veja o código HTML e CSS dele.

Preview

Desktop Preview

Mobile Preview

Tecnologias

• JavaScript
• HTML
• CSS

Funcionalidades

• Inserir ou clicar em um token
• Visualizar elementos do token escolhido
• Visualizar código HTML e CSS do elemento

Deploy

Token+ Elements

Destaques

Criação de tela de carregamento

<div class="loading">
  <div class="loading__spin"></div>
  <p class="loading__text"></p>
</div>

function carregar() {
  const loading = document.querySelector('.loading');
  const container = document.querySelector('.container');
  const loading__text = document.querySelector('.loading__text');

  setTimeout(esconder, 1490);
  function esconder() {
    loading.style.display = 'none';
  }

  setTimeout(exibir, 1500);
  function exibir() {
    container.style.display = 'grid';
  }

  loading__text.innerText = 'Um elemento?';
  setTimeout(() => {
    loading__text.innerText = 'Calma aí...';
  }, 800);

  function esconder() {
    loading.style.display = 'none';
  }
}

Inserções de HTML via JavaScript

function exibirObjetoBtn() {
  objeto.innerHTML = `<div class="loader-5">
    <div class="box box-1">
      <div class="side-left"></div>
      <div class="side-right"></div>
      <div class="side-top"></div>
    </div>
    <div class="box box-2">
      <div class="side-left"></div>
      <div class="side-right"></div>
      <div class="side-top"></div>
    </div>
    <div class="box box-3">
      <div class="side-left"></div>
      <div class="side-right"></div>
      <div class="side-top"></div>
    </div>
    <div class="box box-4">
      <div class="side-left"></div>
      <div class="side-right"></div>
      <div class="side-top"></div>
    </div>
  </div>`;
}

Event Listener da tecla ENTER no campo de Token

input.addEventListener('keypress', function (event) {
  if (event.key === 'Enter') {
    exibirElementos();
  }
});

Meu Contato

LinkedIn @udanielnogueira