1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
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 {
// 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));
|
