<h3>Check out our lastest hires! <small>Straight from our employee API!</small></h3>

<ul class="employee-list js-employee-list"></ul>
* {
  box-sizing: border-box;
}

.employee-list {
  background: lavender;
  padding: 2rem 0.5rem;
  border: 1px solid royalblue;
  border-radius: 0.5rem;
  max-width: 320px;
}

.employee {
  list-style: none;
}

.employee + .employee {
  padding-top: 0.5rem;
}

.employee:after {
  content: ' ';
  height: 0;
  display: block;
  clear: both;
}

.employee-photo {
  float: left;
  padding: 0 0.5rem 0.5rem 0;
}
// wrap things in an IIFE to keep them neatly isolated from other code.
(() => {
  // strict mode to prevent errors and enable some ES6 features
  'use strict'
  
  // takes an employee and turns it into a block of markup
  function employee_markup (employee) {
    return `<li class="employee">
      <img src="${employee.picture.thumbnail}" alt="Photo of ${employee.name.first}" class="employee-photo">
      <div class="employee-name">${employee.name.first} ${employee.name.last}</div>
      <div class="employee-location">${employee.location.city}, ${employee.location.state}</div>
    </li>`
  }
  
  // let's use jQuery's ajax method to keep the code terse.
  // Pull data from randomuser.me as a stub for our 'employee API'
  // (recall that this is really just a fake tweet list).
  $.ajax({
    url: 'https://randomuser.me/api/',
    dataType: 'json',
    // query string parameters to append
    data: {
      results: 3
    },
    success: (data) => {
      // success! we got the data!
      let employees_markup = ''
      data.results.forEach((employee) => {
        employees_markup += employee_markup(employee)
      })
      $('.js-employee-list').append(employees_markup)
    }
  })
})()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js