expo.html

---
layout: container
title: Expo
---

<h1 class="text-center text-red">EXHIBITION</h1>


{%- include bg-items-white.html -%}

<div class="text-center my-5 position-relative">
  <p>
  FABxLive invites all of the Fab Lab Network to participate in our virtual Exhibition that will showcase outstanding projects developed by the Fab Lab Community in the past 16 years. Have you done an amazing Academany project that you would like to exhibit? Did you develop a unique open-source machine in your lab? All projects are welcome, it doesn´t matter how far back you’ve developed it!
  </p>
  <a class="btn bg-red" href="https://docs.google.com/forms/d/e/1FAIpQLSdKb4Wxd8TvFMeIS25vvry4iDWFByWByYxUxjvmtJ4pZxvaYg/viewform" target="_blank">
    Submit your project and be part of the Fab legacy!
  </a>
</div>

<div class="text-center my-5">
  {% assign all_tags = site.data.expo | map: 'tags' | uniq %}
  {% for item in all_tags %}
    <a href="#/"
      id="{{ item | slugify }}"
      onClick="toggleTags('{{ item | slugify }}')"
      class="badge badge-info">{{ item }}</a>
  {% endfor %}
</div>

<section class="card-columns">

  <!-- add new expo in _data/expo.yml -->
  {% for item in site.data.expo %}

  <article class="card">
    <img class="card-img-top" src="/uploads/{{ item.picture }}" alt="{{item.title}}"/>
    <div class="card-body">
      <h5 class="card-title">
        {{ item.title }}
      </h5>
      <p class="card-text">
      {{ item.text }}
      </p>

      <!-- If multiple tags -->
      {% for tag in item.tags %}
      <small class="badge badge-info {{tag | slugify }}">{{ tag }}</small>
      {% endfor %}
    </div>
  </article>
  {% endfor %}

</section>

<script charset="utf-8">

  function toggleTags(tag) {
    // Change the badge when click
    document.getElementById(tag).classList.toggle('badge-info');

    // Hide the cards
    cards = document.getElementsByClassName(tag);
    //console.log(tag, cards.length);

    Array.from(cards).forEach(function(item) {
      //console.log(item);
      item.parentElement.parentElement.classList.toggle('d-none')
    });
  }
</script>