🛡️ Legends View

Uma galeria de imagens dos campeões de League of Legends.

Sumário

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

Sobre

Uma aplicação que permite visualizar as classes e os campeões de League of Legends.

Preview

Desktop Preview

Mobile Preview

Tecnologias

• JavaScript
• HTML
• CSS

Funcionalidades

• Selecionar classe
• Selecionar campeão
• Compartilhar aplicação

Deploy

Legends View

Destaques

Criação de uma base de dados em JS

let atiradores = [
  {
    nome: 'Ashe',
    classe: ['atirador, suporte'],
    src: './assets/img/champions/ashe.png',
    bio: 'A Arqueira do Gelo, Ashe',
  },
  {
    nome: 'Ezreal',
    classe: ['atirador', 'mago'],
    src: './assets/img/champions/ezreal.png',
    bio: 'O Explorador Pródigo, Ezreal',
  },
  {
    nome: 'Jayce',
    classe: ['atirador', 'lutador'],
    src: './assets/img/champions/jayce.png',
    bio: 'O Defensor do Amanhã, Jayce',
  },
  {
    nome: 'Jinx',
    classe: ['atirador'],
    src: './assets/img/champions/jinx.png',
    bio: 'O Gatilho Desenfreado, Jinx',
  },
  {
    nome: 'Lucian',
    classe: ['atirador, assassino'],
    src: './assets/img/champions/lucian.png',
    bio: 'O Purificador, Lucian',
  },
  {
    nome: 'Senna',
    classe: ['atirador', 'suporte'],
    src: './assets/img/champions/senna.png',
    bio: 'A Redentora, Senna',
  },
];

Adição de classes e Inserção de HTML via JS

function exibirAdc() {
  classesBtns.forEach((element) => {
    element.classList.remove('active');
  });
  adcBtn.classList.add('active');

  championsBtns.innerHTML = '';
  championContent.innerHTML = 'Selecione um campeão';

  for (let atirador of atiradores) {
    championsBtns.innerHTML += `<div class="championsBtns__btn" onclick="playUIClick(), exibirAdcImg(this)">${atirador.nome}</div>`;
  }
}

Função para disparar efeito sonoro

var audio = new Audio('./assets/audio/ui-click.mp3');
function playUIClick() {
  audio.play();
}

Meu contato

LinkedIn @udanielnogueira