Anteriormente vimos como crear la caja de texto; en este apartado, vamos a construir el listado de contactos de manera programática mediante JavaScript; para eso, partiremos de un array de objetos con el siguiente formato:
index.html
<script>
function createContacts() {
var contacts = [
{
'name': 'Alex Alexis',
'image': 'https://randomuser.me/api/portraits/women/56.jpg',
'last_chat': [
{
'date': '9:15 AM',
'message': 'Lorem ipsum dolor sit amet consectetur adipisicing elit',
}
]
},
{
'name': 'Ramon Reed',
'image': 'https://randomuser.me/api/portraits/women/59.jpg',
'last_chat': [
{
'date': '9:15 AM',
'message': 'Lorem Hello!',
}
]
},
{
'name': 'Eli Barrett',
'image': 'https://randomuser.me/api/portraits/women/58.jpg',
'last_chat': [
{
'date': '8:55 PM',
'message': 'Lorem ipsum dolor sit ...',
}
]
},
]
}
</script>Ahora, con el formato anterior, vamos a iterar el array de contactos y construir un HTML con la estructura anterior:
<script>
function createContacts() {
var contacts = [
***
]
var lis = ''
contacts.forEach((c) => {
lis += `<li class="p-2 card mt-2">
<div class="card-body">
<div class="d-flex">
<div>
<img class="rounded-pill me-3" width="60"
src="${c.image}">
</div>
<div>
<p class="fw-bold mb-0 text-light">${c.name}</p>
<p class="small text-muted">${c.last_chat[0]['message']}</p>
</div>
<div>
<p class="small text-muted">${c.last_chat[0]['date']}</p>
<span class="badge bg-danger rounded-pill float-end">1</span>
</div>
</div>
</div>
</li>`
})
document.querySelector('.contact').innerHTML = lis;
}
createContacts()
</script>
Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter