Movie Hall

Para de rolar a tela, a Movie Hall te indica um filme!

Sumário

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

Sobre

Descubra as melhores sugestões de filmes e em quais plataformas eles estão disponíveis.

Preview

Desktop Showcase

Mobile Showcase

Tecnologias

• JavaScript
• HTML
• CSS

Funcionalidades

• Selecionar filme
• Selecionar categoria
• Compartilhar aplicação
• Visualizar tempo de duração
• Visualizar ano de lançamento
• Visualizar plataformas disponíveis

Deploy

Movie Hall

Destaques

Carregamento de página com setTimeout()

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

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

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

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

Criação de uma base de dados em JavaScript

catalogo = [
  // Ação
  {
    nome: 'John Wick 3 Parabellum',
    ano: '2019',
    duracao: '2h 10min',
    plataformas: 'Netflix • Prime Video • Telecine',
  },
  {
    nome: 'Nada de Novo no Front',
    ano: '2022',
    duracao: '2h 28min',
    plataformas: 'Netflix',
  },
  {
    nome: 'Resgate 2',
    ano: '2023',
    duracao: '2h 03min',
    plataformas: 'Netflix',
  },
  {
    nome: 'Sniper Americano',
    ano: '2015',
    duracao: '2h 07min',
    plataformas: 'Max • Prime Video',
  },
];

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

function exibirSuspense() {
  const btns = document.querySelectorAll('.btn');
  btns.forEach((element) => {
    element.classList.remove('active');
  });

  const btnSuspense = document.querySelector('.btnSuspense');
  btnSuspense.classList.add('active');

  const filmes = document.querySelectorAll('.filme');
  filmes.forEach((element) => {
    if (element.classList.contains('suspense')) {
      element.style.display = 'block';
    } else {
      element.style.display = 'none';
    }
  });
}

Desenvolvimento de Modal

function exibirModal(filme) {
  let filmeCerto;
  for (let i of catalogo) {
    if (i.nome == filme.title) {
      filmeCerto = i;
    }
  }

  const container = document.querySelector('.container');
  container.style.opacity = '5%';

  const modal = document.querySelector('.modal');
  modal.innerHTML = `
   <img
      src="${filme.src}"
      alt="${filmeCerto.nome}"
      title="${filmeCerto.nome}"
      class="filme"
    />
    <div class="imagem-modal"></div>
    <p>${filmeCerto.nome}</p>
    <p>${filmeCerto.ano} · ${filmeCerto.duracao}</p>
    <p>Plataformas</p>
    <p>${filmeCerto.plataformas}</p>
    <button class='btn close-btn'>Voltar</button>
  `;
  modal.showModal();

  const closeButton = document.querySelector('.close-btn');
  closeButton.addEventListener('click', () => {
    modal.close();
    container.style.opacity = '100%';
  });
}

Função de compartilhar a aplicação

function share() {
  if (navigator.share !== undefined) {
    navigator
      .share({
        title: 'Movie Hall',
        text: 'Cansado de rolar a tela? As melhores sugestões de filme estão aqui! Acesse: ',
        url: 'https://udanielnogueira.github.io/movie-hall/',
      })
      .then(() => console.log('Successful share'))
      .catch((error) => console.log('Error sharing', error));
  }
}

Meu contato

LinkedIn @udanielnogueira