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