simeonshopov

Contact Builder

Jun 24th, 2021
772
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class Contact {
  2.   constructor(firstname, lastname, phone, email) {
  3.     this.firstname = firstname;
  4.     this.lastname = lastname;
  5.     this.phone = phone;
  6.     this.email = email;
  7.     this.online = false;
  8.   }
  9.  
  10.   get online() { return this._online; }
  11.  
  12.   set online(value) {
  13.     if (this.reference) {
  14.       if (value) { this.reference.className = 'title online'; }
  15.       else { this.reference.className = 'title'; }
  16.     }
  17.     this._online = value;
  18.   }
  19.  
  20.   render(id) {
  21.     // Main element
  22.     const mainEl = document.createElement('article');
  23.  
  24.     // Title div element
  25.     const titleDiv = document.createElement('div');
  26.     titleDiv.className = 'title';
  27.     if (this.online) { titleDiv.classList.add('online'); }
  28.     else { titleDiv.classList.remove('online'); }
  29.     titleDiv.textContent = `${this.firstname} ${this.lastname}`;
  30.     const buttonEl = document.createElement('button');
  31.     buttonEl.innerHTML = 'ℹ';
  32.     buttonEl.addEventListener('click', () => {
  33.       let styleDisplay = infoDiv.style.display;
  34.       if (styleDisplay === 'none') { infoDiv.style.display = 'block'; }
  35.       else { infoDiv.style.display = 'none'; }
  36.     });
  37.     titleDiv.appendChild(buttonEl);
  38.     this.reference = titleDiv;
  39.  
  40.     // Info div element
  41.     const infoDiv = document.createElement('div');
  42.     infoDiv.className = 'info';
  43.     infoDiv.style.display = 'none';
  44.     const phoneSpan = document.createElement('span');
  45.     phoneSpan.innerHTML = `☎ ${this.phone}`;
  46.     const mailSpan = document.createElement('span');
  47.     mailSpan.innerHTML = `✉ ${this.email}`;
  48.     infoDiv.appendChild(phoneSpan);
  49.     infoDiv.appendChild(mailSpan);
  50.  
  51.     // Assemble main
  52.     mainEl.appendChild(titleDiv);
  53.     mainEl.appendChild(infoDiv);
  54.     document.getElementById(id).appendChild(mainEl);
  55.   }
  56. }
RAW Paste Data