index.js

/* eslint no-undef: 0 */
import widgetStyle from './style.js';
import nFormatter from './format.js';

const template = document.createElement('template');

template.innerHTML = `
    <style>
        ${widgetStyle}
    </style>
    <div class="card"></div>
`;

class myCard extends HTMLElement {
  constructor() {
    super();

    this._shadowRoot = this.attachShadow({ mode: 'open' });
    this._shadowRoot.append(template.content.cloneNode(true));
  }

  get observedAttribute() {
    return ['data-theme'];
  }

  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr === 'data-theme' && oldValue !== newValue && newValue !== '') {
      this[attr] = newValue;
    }
  }

  connectedCallback() {
    this.fetchData(this.getAttribute('data-user')).then((response) => {
      const cardTemplate = this.createCard(response);
      this._shadowRoot.querySelector('.card').innerHTML = cardTemplate;
    });

    if (this.getAttribute('data-theme')) {
      const theme = this.getAttribute('data-theme');
      this.setTheme(theme);
    }
  }

  setTheme(theme) {
    switch (theme) {
      case 'dark':
        this._shadowRoot.querySelector('.card').classList.add('dark');
        break;
      default:
        this._shadowRoot.querySelector('.card').classList.remove('dark');
        break;
    }
  }

  /** Fetch the data */
  async fetchData(response) {
    const data = await fetch(`https://api.github.com/users/${response}`, {
      method: 'GET',
    });
    const responseult = await data.json();
    return responseult;
  }

  createCard(user) {
    return `
        <div class="cover"></div>
        <div class="card-wrapper">
        <a href="https://github.com/${user.login}" target="_blank" rel="noopener"><img id="github-logo" src="https://i.ibb.co/frv5pB3/github-logo.png" alt="github-logo" border="0"></a>
        <div class="card-header">
        <div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${user.login}"/></div>
        <h1><a class="card-title" href="${user.html_url}" target="_blank" rel="noopener">${user.name}</a></h1>
        <div class="card-responsename"><a href="${user.html_url}" target="_blank" rel="noopener">@${user.login}</a></div>
        <p class="card-desc">${user.bio ?? ''}</p>
        <div class="card-footer">
        <div class="footer-box">
            <div class="box-wrapper">
                <div class="count">${nFormatter(user.followers)}</div>
                <div class="box-text">Followers</div>
            </div>   
            <div class="box-wrapper">
                <div class="count">${nFormatter(user.following)}</div>
                <div class="box-text">Following</div>
            </div>  
            <div class="box-wrapper">
                <div class="count">${nFormatter(user.public_repos)}</div>
                <div class="box-text">Repositories</div>
            </div>
        </div>
        </div>
        `;
  }
}

customElements.define('github-card', myCard);