Gitcoin Fiddle

by octavioamu

HTML

<div id="gc-root"></div>
<script></script>

<div class="gitcoin-widget"
  data-limit="2"
  data-order-by="-expires_date"
  data-orginisation="gitcoinco"
  data-repository="web"
></div>

JavaScript

// Import stylesheets
import './style.css';
import Siema from 'siema';

class Widget {
  constructor(options = {}) {
    this.options = options;
    this.el = this.options.el || document.querySelector(options.selector || '.gitcoin-widget');
    this.options.organization = this.el.dataset.organization || this.options.organization;
    this.options.repository = this.el.dataset.repository || this.options.repository;
    this.options.orderBy = this.el.dataset['order-by'] || this.options.orderBy;
    this.options.limit = this.el.dataset['limit'] || this.options.limit;
    fetch(`https://gitcoin.co/api/v0.1/bounties/?raw_data=${this.options.repository}&org=${this.options.organization}&network=mainnet&coinbase=unknown&order_by=${this.orderBy()}&limit=${this.limit()}`)
      .then(response => response.json())
      .then(json => {
        this.data = json;
        this.render();
      });
  }
  orderBy() {
    return this.options.orderBy ? this.options.orderBy : '-expires_date';
  }
  limit() {
    return this.options.limit ? this.options.limit : '20';
  }
  static logo() {
    const anchor = document.createElement('a');

    anchor.target = '_blank';
    anchor.href = 'https://gitcoin.co';
    const logo = document.createElement('img');

    anchor.appendChild(logo);
    // need a srcset or svg logo for responsiveness
    logo.src = 'https://s.gitcoin.co/static/v2/images/logo.png';
    logo.className = 'gitcoin-widget__logo';
    return anchor;
  }

  static top() {
    const top = document.createElement('div');

    top.className = 'gitcoin-widget__top';
    top.appendChild(Widget.logo());
    const slogan = document.createElement('span');

    slogan.style.fontSize = '11px';
    slogan.innerHTML = 'Grow open source!';
    top.appendChild(slogan);
    return top;
  }

  static bountyRow(bounties) {
    const row = document.createElement('div');

    row.className = 'gitcoin-widget__bounty-row';
    for (let i = 0; i < bounties.length; i++) {
     ...