Функция с массивами

Изучаю JS, совершенно не могу понять, как сделать задание?

Напишите функцию которая будет добавлять на страницу список ul с карточками li

8 карточек с фотографией и подписью

адрес фото и подпись храните в массиве объектов

объект должен быть вида

{

url: "img/pic01.jspg",

title: "Белый орёл",

}

В html внутри body добавьте тег div с классом .app

Стили задавайте элементам через js

Массив, вроде создал, но что делать дальше путаюсь.

window.addEventListener('DOMContentLoaded', function() {
  const pictures = [
    {
      id: 'li1',
      img:  'img/aranprime-A_OHvsfjfpI-unsplash.jpg',
      title: 'text',
    },
    {
      id: 'li2',
      img: 'img/elise-wilcox-W4tquogJhvc-unsplash.jpg',
      title: 'text',
    },
    {
      id: 'li3',
      img: 'img/aranprime-A_OHvsfjfpI-unsplash.jpg',
      title: 'text',
    },
    {
      id: 'li4',
      img: 'img/elise-wilcox-W4tquogJhvc-unsplash.jpg',
      title: 'text',
    },
    {
      id: 'li5',
      img: 'img/jorgen-hendriksen--i1gRB0DXJ8-unsplash.jpg',
      title: 'text',
    },
    {
      id: 'li6',
      img: 'img/justyna-serafin-hRaVfPVGCB4-unsplash.jpg',
      title: 'text',
    },
    {
      id: 'li7',
      img: 'img/ricardo-gomez-angel-IQSdd7CcoJQ-unsplash.jpg',
      title: 'text',
    },
    {
      id: 'li8',
      img: 'img/sarah-dorweiler-QeVmJxZOv3k-unsplash.jpg',
      title: 'text',
      }
],


});