Contact Builder

class Contact {
  constructor(firstname, lastname, phone, email) {
    this.firstname = firstname;
    this.lastname = lastname;
    this.phone = phone;
    this.email = email;
    this.online = false;
  }

  get online() { return this._online; }

  set online(value) {
    if (this.reference) {
      if (value) { this.reference.className = 'title online'; }
      else { this.reference.className = 'title'; }
    }
    this._online = value;
  }

  render(id) {
    // Main element
    const mainEl = document.createElement('article');

    // Title div element
    const titleDiv = document.createElement('div');
    titleDiv.className = 'title';
    if (this.online) { titleDiv.classList.add('online'); }
    else { titleDiv.classList.remove('online'); }
    titleDiv.textContent = `${this.firstname} ${this.lastname}`;
    const buttonEl = document.createElement('button');
    buttonEl.innerHTML = 'ℹ';
    buttonEl.addEventListener('click', () => {
      let styleDisplay = infoDiv.style.display;
      if (styleDisplay === 'none') { infoDiv.style.display = 'block'; }
      else { infoDiv.style.display = 'none'; }
    });
    titleDiv.appendChild(buttonEl);
    this.reference = titleDiv;

    // Info div element
    const infoDiv = document.createElement('div');
    infoDiv.className = 'info';
    infoDiv.style.display = 'none';
    const phoneSpan = document.createElement('span');
    phoneSpan.innerHTML = `☎ ${this.phone}`;
    const mailSpan = document.createElement('span');
    mailSpan.innerHTML = `✉ ${this.email}`;
    infoDiv.appendChild(phoneSpan);
    infoDiv.appendChild(mailSpan);

    // Assemble main
    mainEl.appendChild(titleDiv);
    mainEl.appendChild(infoDiv);
    document.getElementById(id).appendChild(mainEl);
  }
}