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);
// make unit
this.Title.appendChild(link);
this.Container.appendChild(this.Title);
this.Container.appendChild(this.Image);
}
visualise(root: HTMLElement): void {
root.appendChild(this.Container);
}
}
let root = document.getElementById('root');
let articles: Array = [
new Article('title1', 'description1', 'article1', 'image1'),
new Article('title2', 'description2', 'article2', 'image2'),
new Article('title3', 'description3', 'article3', 'image3')
];
articles.forEach(article => article.visualise(root));