hasura · froztedfate · Aug 4, 2017 · Aug 4, 2017 · Aug 5, 2017 · Aug 5, 2017
diff --git 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: `
+                <p>
+                         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.      
+                </p>
+                <p>
+                         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.      
+                </p>
+                <p>
+                         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.      
+                </p>` 
+    },
+    'article-two': {
+      title: 'Article Two .. Im Varun',  
+      heading: 'Article Two',
+      date: 'August 10,2017',
+      content: `
+                <p>
+                         This is the conent for my second article.      
+                </p>`
+
+    },
+    'article-three': {
+      title: 'Article Three .. Im Varun',  
+      heading: 'Article Three',
+      date: 'August 23,2017',
+      content: `
+                <p>
+                         This is the conent for my third article.      
+                </p>`
+
+    }
+};
+
+function createTemplate (data) {
+    var title = data.title;
+    var date = data.date;
+    var heading = data.heading;
+    var content = data.content;
+    var htmlTemplate = `
+    <html>
+        <head>
+            <title>
+                ${title} 
+            </title>
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <link href="/ui/style.css" rel="stylesheet" />
+        </head>
+        <body>
+            <div class="container">
+            <div>
+                <a href="/">Home</a>
+            </div>
+            <hr/>
+            <h3>
+                ${heading}
+            </h3>
+            <div>
+                ${date}
+            </div>
+                <div>
+                   ${content}
+                </div>
+            </div>
+        </body>
+    </html>
+    `;
+    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
@@ -4,14 +4,27 @@
         <link href="/ui/style.css" rel="stylesheet" />
     </head>
     <body>
-        <div class="center">
-            <img src="/ui/madi.png" class="img-medium"/>
-        </div>
-        <br>
-        <div class="center text-big bold">
-            Hi! I am your webapp.
-        </div>
-        <script type="text/javascript" src="/ui/main.js">
+        <div class="container">
+            <div class="center">
+                <img src="https://pbs.twimg.com/profile_images/897500022043951109/-2zvt4S7_400x400.jpg" class="img-medium"/>
+            </div>
+
+            <br>
+            <h3>Personal</h3>
+            <div>
+                Hiii all .. I'm Varun !!
+            </div>
+            <hr/>
+             <h3>Hobbies</h3>
+            <div>
+                I love photgraphy !!!
+            </div>
+            <hr/>
+            <div class="footer">
+                This button <button id="counter">Click me !!</button> has been clicked <span id="count">0</span> times ..
+            </div>
+        </div>    
+                <script type="text/javascript" src="/ui/main.js">
         </script>
     </body>
 </html>
diff --git 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();
+};
diff --git a/ui/style.css b/ui/style.css
@@ -1,15 +1,14 @@
 body {
     font-family: sans-serif;
-    background-color: lightgrey;
-    margin-top: 75px;
+    margin-top: 60px;
 }
 
 .center {
     text-align: center;
 }
 
 .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;
+}
+