4 files changed, 107 insertions, 0 deletions
diff --git a/Frontend/css/main.css b/Frontend/css/main.css
new file mode 100644
index 0000000..ca052da
--- /dev/null
+++ b/Frontend/css/main.css
@@ -0,0 +1,32 @@
+* {
+    --size: 20em;
+    /*Image size*/
+}
+
+#root {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(20, 1fr);
+    grid-gap: 2em;
+}
+
+.Frame {
+    outline: grey 0.5em auto;
+}
+
+.Frame h1 {
+    display: inline;
+    align-content: center;
+    font-family: 'Poppins', sans-serif;
+}
+
+.Frame a:link,
+.Frame a:visited {
+    color: black;
+}
+
+.Frame img {
+    display: block;
+    background-size: cover;
+    width: 38em;
+}
+\ No newline at end of file
diff --git a/Frontend/index.html b/Frontend/index.html
new file mode 100644
index 0000000..d2721dc
--- /dev/null
+++ b/Frontend/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Page Title</title>
+  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="js/main.js"></script>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/Frontend/scripts/main.ts b/Frontend/scripts/main.ts
new file mode 100644
index 0000000..e68bc97
--- /dev/null
+++ b/Frontend/scripts/main.ts
@@ -0,0 +1,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 = "Amazon reconsiders building new headquarters in New York City: WaPo";
+let description = "Description";
+let article = "https://www.wikipedia.org/";
+let image = "https://s.abcnews.com/images/Business/long-island-city-gty-jc-181112_hpMain_4x3t_384.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));
diff --git a/Frontend/tsconfig.json b/Frontend/tsconfig.json
new file mode 100644
index 0000000..89d01c4
--- /dev/null
+++ b/Frontend/tsconfig.json
@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "esnext",
+        "sourceMap": true,
+        "outDir": "js/"
+    }
+}
+\ No newline at end of file