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
39
40
41
42
43
44
45
46
47
48
49
|
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 title = "Title";
let description = "Description";
let article = "https://www.wikipedia.org/";
let image = "https://wallpapertag.com/wallpaper/full/4/d/9/836367-vertical-plain-blue-screen-wallpaper-1920x1080-1920x1080-windows-7.jpg";
let articles: Array<Article> = [
new Article(title, description, article, image),
new Article(title, description, article, image),
new Article(title, description, article, image),
new Article(title, description, article, image),
new Article(title, description, article, image),
new Article(title, description, article, image),
new Article(title, description, article, image)
];
articles.forEach(article => article.visualise(root));
|
