JSFiddle - React, Tailwind, and code Playground

by Dan Mathisen

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="contactList">
  <p class="error"></p>
  <ul class="favList"></ul>
</div>

JavaScript

class ContactList {
 	constructor(el) {
  	this.el = document.querySelector(el);
    this.apiUrl = 'https://reqres.in/api/users';
  }
  
  init() {
  	if (!this.el) {
    	this.handleError('Root element does not exist');
      return;
    }
    
  	this.getUsers()
    	.then(result => {
      	this.renderFavView(result);
      	//this.renderUnFavView(result);
      	//this.appendToPassedParent();
      });
  }
  
  getUsers() {
  	return $.ajax(this.apiUrl)
    	.fail(e => { this.handleError(e) });
  }
  
  renderFavView = function(response) {
    const contacts = response.data;
    
    let listItemHtml = '';
    contacts.forEach(contact => {
    	listItemHtml += `<li>${contact.first_name} ${contact.last_name}</li>`;
    });
    
    this.el.querySelector('.favList').innerHTML = listItemHtml;
  }
  
  handleError(error) {
  	this.el.querySelector('.error').innerHTML = error;
  }
}

const contactList = new ContactList('.contactList');
contactList.init();