// 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)
    }
  })
})()