diff options
| author | Aryadev Chavali <aryadevchavali1@gmail.com> | 2019-02-21 15:48:41 +0000 |
|---|---|---|
| committer | Aryadev Chavali <aryadevchavali1@gmail.com> | 2019-02-21 15:48:41 +0000 |
| commit | 0c1eafe2c8d55c76a9756d722ef8c6cce065cc10 (patch) | |
| tree | 4e5231af5975db6543b008443545642eb9d19c55 /Main/wwwroot | |
| parent | 450bcb83ee18e78941324657c0e471f8b5e6ffb4 (diff) | |
| download | newsaggregator-0c1eafe2c8d55c76a9756d722ef8c6cce065cc10.tar.gz newsaggregator-0c1eafe2c8d55c76a9756d722ef8c6cce065cc10.tar.bz2 newsaggregator-0c1eafe2c8d55c76a9756d722ef8c6cce065cc10.zip | |
Moved website frontend to wwwroot - a problem for another day
Diffstat (limited to 'Main/wwwroot')
| -rw-r--r-- | Main/wwwroot/css/main.css | 32 | ||||
| -rw-r--r-- | Main/wwwroot/index.html | 19 | ||||
| -rw-r--r-- | Main/wwwroot/scripts/main.ts | 49 | ||||
| -rw-r--r-- | Main/wwwroot/tsconfig.json | 8 |
4 files changed, 105 insertions, 3 deletions
diff --git a/Main/wwwroot/css/main.css b/Main/wwwroot/css/main.css new file mode 100644 index 0000000..ca052da --- /dev/null +++ b/Main/wwwroot/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/Main/wwwroot/index.html b/Main/wwwroot/index.html index bed39c1..d2721dc 100644 --- a/Main/wwwroot/index.html +++ b/Main/wwwroot/index.html @@ -1,5 +1,18 @@ +<!DOCTYPE html> <html> - <body> - Hello world - </body> + +<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/Main/wwwroot/scripts/main.ts b/Main/wwwroot/scripts/main.ts new file mode 100644 index 0000000..e68bc97 --- /dev/null +++ b/Main/wwwroot/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/Main/wwwroot/tsconfig.json b/Main/wwwroot/tsconfig.json new file mode 100644 index 0000000..89d01c4 --- /dev/null +++ b/Main/wwwroot/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "esnext", + "sourceMap": true, + "outDir": "js/" + } +}
\ No newline at end of file |