diff --git a/server.js b/server.js index 2e386d0b04..c32a193841 100644 --- a/server.js +++ b/server.js @@ -5,14 +5,103 @@ var path = require('path'); var app = express(); app.use(morgan('combined')); + +var articles = { + 'article-one': { + title: 'Article one .. Im Varun', + heading: 'Article One', + date: 'August 5,2017', + content: ` +

+ This is the conent for my first article.This is the conent for my first article.This is the conent for my first article.This is the conent for my first article.This is the conent for my first article.This is the conent for my first article. +

+

+ This is the conent for my first article.This is the conent for my first article.This is the conent for my first article.This is the conent for my first article.This is the conent for my first article.This is the conent for my first article. +

+

+ This is the conent for my first article.This is the conent for my first article.This is the conent for my first article.This is the conent for my first article.This is the conent for my first article.This is the conent for my first article. +

` + }, + 'article-two': { + title: 'Article Two .. Im Varun', + heading: 'Article Two', + date: 'August 10,2017', + content: ` +

+ This is the conent for my second article. +

` + + }, + 'article-three': { + title: 'Article Three .. Im Varun', + heading: 'Article Three', + date: 'August 23,2017', + content: ` +

+ This is the conent for my third article. +

` + + } +}; + +function createTemplate (data) { + var title = data.title; + var date = data.date; + var heading = data.heading; + var content = data.content; + var htmlTemplate = ` + + + + ${title} + + + + + +
+
+ Home +
+
+

+ ${heading} +

+
+ ${date} +
+
+ ${content} +
+
+ + + `; + return htmlTemplate; +} + app.get('/', function (req, res) { res.sendFile(path.join(__dirname, 'ui', 'index.html')); }); +var counter=0; +app.get('/counter', function(req,res) { + counter = counter + 1; + res.send(counter.toString()); +}); + +app.get('/:articleName', function (req, res){ + var articleName = req.params.articleName; + res.send(createTemplate(articles[articleName])); + }); + app.get('/ui/style.css', function (req, res) { - res.sendFile(path.join(__dirname, 'ui', 'style.css')); + res.sendFile(path.join(__dirname, 'ui', 'style.css')); }); +app.get('/ui/main.js', function (req, res) { + res.sendFile(path.join(__dirname, 'ui', 'main.js')); +}); app.get('/ui/madi.png', function (req, res) { res.sendFile(path.join(__dirname, 'ui', 'madi.png')); }); diff --git a/ui/index.html b/ui/index.html index 5a28644db4..666bfaa65b 100644 --- a/ui/index.html +++ b/ui/index.html @@ -4,14 +4,27 @@ -
- -
-
-
- Hi! I am your webapp. -
- diff --git a/ui/main.js b/ui/main.js index 4cf7ed58de..1775ffa916 100644 --- a/ui/main.js +++ b/ui/main.js @@ -1 +1,15 @@ -console.log('Loaded!'); +// counter code + +var button = document.getElementById('counter'); +var counter = 0; +button.onclick=function () { + + // make a req to counter end point + + // capture a response and store it in a variable + + // rendee the variable in the correct span + counter = counter + 1; + var span = document.getElementById('count'); + span.innerHTML = counter.toString(); +}; \ No newline at end of file diff --git a/ui/style.css b/ui/style.css index 71a5f6acc1..4e4e368479 100644 --- a/ui/style.css +++ b/ui/style.css @@ -1,7 +1,6 @@ body { font-family: sans-serif; - background-color: lightgrey; - margin-top: 75px; + margin-top: 60px; } .center { @@ -9,7 +8,7 @@ body { } .text-big { - font-size: 300%; + font-size: 350%; } .bold { @@ -20,3 +19,12 @@ body { height: 200px; } +.container { + max-width: 800px; + margin: 0 auto; + color: #00000ee; + font-family: Segoe Script; + padding-right: 20px; + padding-left: 20px; +} +