function makeElement(array, insertInto) {
  // console.log('array: ', array);
  for (let i = 0; i < array.length; i++) {
    var blogItem = $(
      '<div class="d-flex w-100 border-bottom-one-solid-custom">'
    ).attr('id', array[i].guid);
    var blogItemFirstChild = $(
      '<div class="d-flex col-12 flex-wrap p-3 my-3">'
    );
    var blogItemSecondChild = $(
      '<div class="d-flex flex-column flex-sm-row col-12 py-3">'
    );

    // date
    var blogDateColumn = $(
      '<div class="d-flex flex-column max-width-sm-136 w-100 pb-4">'
    );

    let blogDate = new Date(array[i].pubDate);

    // month
    var months = [
      'JAN',
      'FEB',
      'MAR',
      'APR',
      'MAY',
      'JUN',
      'JUL',
      'AUG',
      'SEP',
      'OCT',
      'NOV',
      'DEC',
    ];

    let blogMonth = months[blogDate.getMonth()];

    $('<div class="text-uppercase month-font">')
      .append(blogMonth)
      .appendTo(blogDateColumn);

    // date
    $('<div class="date-font">')
      .append(blogDate.getDate())
      .appendTo(blogDateColumn);

    // year
    $('<div class="year-font">')
      .append(blogDate.getFullYear())
      .appendTo(blogDateColumn);

    var contentColumn = $('<div class="d-flex flex-column">');

    // name
    $('<div class="w-100 text-uppercase name-font">')
      .append(array[i].title)
      .appendTo(contentColumn);

    // author
    $('<div class="w-100 text-capitalize author-font pt-1">')
      .append(array[i].author)
      .appendTo(contentColumn);

    // content
    $('<div class="w-100 pt-4 content-font">')
      .append(array[i].description)
      .appendTo(contentColumn);

    // read more link
    let blogLink = $('<a class="color-uofl-red text-capitalize content-font">')
      .attr('href', array[i].link)
      .append('read more');
    $('<div class="w-100 pt-4">').append(blogLink).appendTo(contentColumn);

    // complete item
    $(blogItemSecondChild)
      .append(blogDateColumn, contentColumn)
      .appendTo(blogItemFirstChild);

    $(blogItem).append(blogItemFirstChild).appendTo(insertInto);
  }
}

$(document).ready(function () {
  // data holder
  var rssData;
  let insertInto = $('#rss-feed');
  // get data in JSON format
  var blogURL = 'https://dtcenter.wixsite.com/mysite/blog-feed.xml';
  $.ajax({
    type: 'GET',
    // use rss2json to convert data into json format
    url: 'https://api.rss2json.com/v1/api.json?rss_url=' + blogURL,
    dataType: 'jsonp',
    success: function (data) {
      rssData = data;
      //   console.log('rssData.items: ', rssData.items);
      makeElement(rssData.items, insertInto);
    },
  });
});