filter.js

/**
 * Aqui voce tem uma variavel global, ou seja, uma variavel
 * declarada no mais alto escopo disponivel. Isso quer dizer
 * que ela pode ser acessada por qualquer funcao a qualquer
 * momento.
 */
var todasCampanhas = [];

/**
 * Cria um change listener para o select. Esse callback
 * so eh chamado quando o select eh usado.
 */
document.getElementById('search').addEventListener(function() {
  // Aqui voce pega o `tipo` selecionado (todos, criancas, ...).
  var tipoSelecionado = this.value;

  // Depois, com o tipo selecionado, voce filtra somente
  // aqueles resultados com o tipo que o usuario filtrou.
  var campanhasFiltradas = filtrarCampanhasPorTipo(todasCampanhas, tipoSelecionado);

  listarCampanhas(campanhasFiltradas);
});

/**
 * Chamado quando o codigo é carregado.
 *
 * Essa linha (e as demais abaixo) iniciam
 * uma requisicao e chamam uma funcao (manipularErroRequisicao
 * ou manipularSucessoRequisicao) para tratar a resposta.
 */
axios
  .get('db/campanhas.json')
  .catch(function(erroRequisicao) {
    manipularErroRequisicao(erroRequisicao);
  })
  .then(function(respostaRequisicao) {
    manipularSucessoRequisicao(respostaRequisicao);
  });

/**
 * Chamada quando a requisicao falha.
 */
function manipularErroRequisicao(erro) {
  console.log(erro);
}

/**
 * Chamada quando a requisicao é um
 * sucesso.
 */
function manipularSucessoRequisicao(resposta) {
  // Perceba que como nao temos a palavra `var`, nao estamos
  // declarando uma nova variavel, mas sim usando a variavel
  // global.
  todasCampanhas = resposta.data.results;

  listarCampanhas(todasCampanhas);
}

/**
 * Funcao que recebe uma lista de campanhas
 * e lista todas elas na pagina.
 */
function listarCampanhas(campanhas) {
  removerCampanhasListadas();

  for (var i = 0; i < campanhas.length; i++) {
    var campanha = campanhas[i];
    criarCardCampanha(campanha);
  }
}

/*
 * Funcao que remove qualquer campanha que ja esteja
 * listada.
 */
function removerCampanhasListadas() {
  var areaCampanha = document.getElementById('area-campanha');

  // Essa parte é mais complicadinha. Basicamente, remove qualquer
  // filho que exista no elemento <div id="area-campanha">.
  while (areaCampanha.firstChild) {
    areaCampanha.removeChild(areaCampanha.firstChild);
  }
}

/*
 * ************ PARA IMPLEMENTAR ***************
 *
 * Funcao que recebe um objeto `campanha`
 * e cria um card com suas informacoes.
 */
function criarCardCampanha(campanha) {
  // --------------------------------------------------
  // Aqui voce cria todas as divs e os elementos para
  // apresentar as informacoes de uma campanha.
  // --------------------------------------------------
}

/**
 * ************ PARA IMPLEMENTAR ***************
 *
 * Funcao que recebe uma lista de campanhas,
 * um tipo de campanha, e retorna somente os
 * resultados que batem com o filtro.
 */
function filtrarCampanhasPorTipo(campanhas, tipo) {
  var campanhasFiltradas = [];

  // ---------------------------------------------------
  // Um laco que percore todas as campanhas, populando
  // `campanhasFiltradas` so com as campanhas
  // que correspondem aquele tipo.
  //
  // Ao final, voce adiciona usando
  // `campanhasFiltradas.push()`.
  // ---------------------------------------------------

  return campanhasFiltradas;
}