Работа с динамическими данными

1. В отдельном файле data.js сохраним массив данных (имитация их получения из базы данных).

2. Подключаем файл data.js через import в наш рабочий файл index.js. Напоминаю, что для возможности использования синтаксиса import, при подключении рабочего файла index.js в файл разметки index.html важно указать атрибут type='module'.

3. В файле index.html внутри тега body в базовой разметке нужно создать пустой тег section с id='posts'. В него будет встраиваться заголовок секции h2 c контентом 'Posts' и список изображений, динамически созданных из файла data.js.

Массив для файла data.js

[
  {
    id: "eaf6038f-0d72-44c2-9484-2dfed9f55f0f",
    creatAt: "2020-06-18T11:23:19.250Z",
    text: "Dicta porro occaecati tenetur sint molestias eius ea similique quas. Enim quod quae corrupti a enim libero asperiores.",
    author: {
      name: "Jaeden Rempel",
      avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/tristanlegros/128.jpg"
    },
    tags: ["science", "movies", "food"]
  },
  {
    id: "1fa83956-282d-47b4-92d2-33504147518b",
    creatAt: "2020-06-17T23:37:44.507Z",
    text: "Ipsa aut autem fuga omnis repellat. Quos provident illum. Odio cum aspernatur omnis. Magni fuga sunt. Ut culpa tempore eos doloremque magni aut nihil et.",
    author: {
      name: "Lorna Feeney III",
      avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/dahparra/128.jpg"
    },
    tags: ["sports", "politics"]
  },
  {
    id: "500e125f-f9a9-40eb-8e58-446f361befb6",
    creatAt: "2020-06-18T09:32:27.604Z",
    text: "Temporibus ullam voluptas odit. Consequatur quaerat asperiores. Dicta architecto voluptatum doloribus eius suscipit nam fugiat.",
    author: {
      name: "Elinore Spencer PhD",
      avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/yehudab/128.jpg"
    },
    tags: ["science", "sports"]
  },
  {
    id: "9d7a2138-4280-44b7-93d4-ea7cb0586fa9",
    creatAt: "2020-06-18T10:26:40.802Z",
    text: "Explicabo itaque vel corporis facere. Qui et voluptas incidunt praesentium architecto dolorum. Qui ut eius et soluta esse consequuntur unde ut. Ipsum mollitia architecto perferendis ratione totam. Beatae ex nihil iusto expedita ipsam et nostrum totam.",
    author: {
      name: "Brandy Mueller",
      avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/artvavs/128.jpg"
    },
    tags: ["movies", "comedy", "politics", "science"]
  },
  {
    id: "c1b91771-d1a0-4f68-a46d-127b8135560d",
    creatAt: "2020-06-18T11:47:07.023Z",
    text: "Ducimus commodi odit nihil enim. Sunt dolorem animi perspiciatis nesciunt sed ut numquam consectetur. Et et consequatur ratione labore. Ut magnam dolorem ipsum ut quidem.",
    author: {
      name: "Dr. Ivah Moen",
      avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/foczzi/128.jpg"
    },
    tags: ["family", "science"]
  },
  {
    id: "6e7d5bfa-886f-4c8d-9e3e-231bd99bc9cf",
    creatAt: "2020-06-18T06:43:43.084Z",
    text: "Quisquam vitae voluptatem et qui molestias exercitationem minus. Et sed libero alias perferendis culpa enim quo. Eligendi tenetur impedit.",
    author: {
      name: "Cleta Jaskolski",
      avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/rachelreveley/128.jpg"
    },
    tags: ["food", "sports"]
  },
  {
    id: "ce65c597-146d-4b6e-a8bb-ff9dc47c58c1",
    creatAt: "2020-06-18T07:10:39.751Z",
    text: "Enim quia sint velit nostrum aliquid modi voluptates. Et ut quaerat dicta voluptas. Atque neque numquam et expedita sunt ut fugiat. Repudiandae aperiam minima repellendus molestiae.",
    author: {
      name: "Green Ondricka",
      avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/yalozhkin/128.jpg"
    },
    tags: ["comedy", "science", "family", "health"]
  },
  {
    id: "2c41b5e8-6e50-4568-85bf-ee23617809b4",
    creatAt: "2020-06-18T05:25:28.573Z",
    text: "Itaque vel dolore commodi dolores distinctio tenetur aperiam et. Voluptas qui minus dolorem. Nihil aperiam culpa qui quia vel eum sit totam omnis. Cumque est aut autem id. Qui eius sit aut nemo.",
    author: {
      name: "Gilbert Hilpert",
      avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/ehsandiary/128.jpg"
    },
    tags: ["movies", "science"]
  },
  {
    id: "b5bfa763-f327-4bf8-a8ee-af971c1b5aaf",
    creatAt: "2020-06-17T22:18:48.663Z",
    text: "Sit reiciendis sequi ducimus soluta non laudantium. Voluptas reprehenderit et accusantium. Consequuntur odio aut facilis saepe quod occaecati voluptates sint facilis.",
    author: {
      name: "Willie Weber",
      avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/jagan123/128.jpg"
    },
    tags: ["science", "sports", "comedy"]
  }
]

Структура разметки элементов списка, создаваемых динамически из массива данных

    <li id="id...">
      <p>text...</p>
      <ul>
        <li>tag</li>
        <li>...</li>
        <li>tag</li>
      </ul>
      <div>
        <h3>author</h3>
        <img src="avatar" alt="author">
      </div>
    </li>