JS List From API

by Alberto_Montiel

HTML

<ul class="agent-list"></ul>

CSS

body{
  background:#000;
  font-family: sans-serif;
}
h3{
  color:#474a65;
  text-align:center;
}
img{
  border-radius:50%;
  border: 1px solid #d3d3d3;
  }
.agent-list {
  background: white;
  padding: 1.1rem 2.5rem;
  border-radius: 0.3rem;
  max-width: 320px;
  margin: 0 auto;
}
.agent {
  padding-top: 0.5rem;
  text-transform: capitalize;
}

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

.agent-photo {
  float: left;
  margin: 0 0.4rem;
}
.agent-name{
  color:#474747;
  margin-top:0.5rem;
}
 ul{
list-style-type: none;
 }
.agent-location{
  color:#686868;
   font-size:0.8rem;
}

JavaScript

(() => {
 
  'use strict'
  
  function agent_markup (agent) {
    return `<li class="agent">
      <img src="${agent.picture.thumbnail}" alt="Photo of ${agent.name.first}" class="agent-photo">
      <div class="agent-name">${agent.name.first} ${agent.name.last}</div>
      <div class="agent-location">${agent.location.city}, ${agent.location.state}</div>
    </li>`
  }

  $.ajax({
    url: 'https://randomuser.me/api/',
    dataType: 'json',
   
    data: {
      results: 10
    },
    success: (data) => {
      let agents_markup = '<h3>Top 10 Agents in the MLS</h3>'
      data.results.forEach((agent) => {
        agents_markup += agent_markup(agent)
      })
      $('.agent-list').append(agents_markup)
      //alert(JSON.stringify(data))
    }
  })
})()