Previously we saw how to create the text box; In this section, we are going to build the list of contacts programmatically using JavaScript; for that, we will start from an array of objects with the following format:
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>Now, with the previous format, we are going to iterate the contacts array and build an HTML with the previous structure:
<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>
Remember that the previous material is part of mi curso completo sobre Electron.js
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter