class Article {
  Container: HTMLElement;
  Title: HTMLElement;
  Image: HTMLElement;

  constructor(title: string, description: string, article_link: string, image_link: string) {
    // object initialisation
    this.Container = document.createElement('div');
    this.Title = document.createElement('h1');
    this.Image = new Image();
    let link = document.createElement('a');

    // attributes
    link.innerText = title;
    link.setAttribute('href', article_link);
    this.Image.setAttribute('src', image_link);
    this.Image.setAttribute('title', description);
    this.Container.className = "Frame";

    // make unit
    this.Title.appendChild(link);
    this.Container.appendChild(this.Title);
    this.Container.appendChild(this.Image);
  }

  visualise(root: HTMLElement): void {
    // visualise the article for document
    root.appendChild(this.Container);
  }
}

let root = document.getElementById('root');
let articles: Array<Article> = [
  new Article('title1', 'description1', 'article1', 'image1'),
  new Article('title2', 'description2', 'article2', 'image2'),
  new Article('title3', 'description3', 'article3', 'image3')
];

articles.forEach(article => article.visualise(root));