hasura · kaushiksuresh2110 · Aug 6, 2017 · Aug 6, 2017 · Aug 7, 2017 · Aug 7, 2017
diff --git a/server.js b/server.js
@@ -5,10 +5,82 @@ var path = require('path');
 var app = express();
 app.use(morgan('combined'));
 
+var articles = {
+ 'article-two': {
+    title: ' Article Two | S.Pawan Kumar',
+    heading: ' Article Two',
+    date: 'August 8,2017.',
+    content: `
+        <p>
+        This is the content for the second article.
+        </p>`
+},  
+'article-one' : {
+    title: 'Article One | S.Pawan Kumar',
+    heading: ' Article One',
+    date: 'August 7,2017.',
+    content: `
+        <p>
+        This is the content for the first article.This is the content for the first article.This is the content for the first article.This is the content for the first article.This is the content for the first article.This is the content for the first article.This is the content for the first article.This is the content for the first article.
+        </p>`
+},
+ 'article-three': {
+    title: ' Article Three | S.Pawan Kumar',
+    heading: ' Article Three',
+    date: 'August 9,2017.',
+    content: `
+        <p>
+        This is the content for the 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'));
 });
 
+app.get("/:articleName",function(req,res){
+    var articleName = req.params.articleName;
+    res.send(CreateTemplate(articles[articleName]));
+});
+app.get('/ui/main.js', function (req, res) {
+  res.sendFile(path.join(__dirname, 'ui', 'main.js'));
+});
+
+
 app.get('/ui/style.css', function (req, res) {
   res.sendFile(path.join(__dirname, 'ui', 'style.css'));
 });

diff --git a/ui/index.html b/ui/index.html
@@ -5,12 +5,16 @@
     </head>
     <body>
         <div class="center">
-            <img src="/ui/madi.png" class="img-medium"/>
+            <img id = 'madi' src="/ui/madi.png" class="img-medium"/>
         </div>
         <br>
-        <div class="center text-big bold">
-            Hi! I am your webapp.
+        <div id="maintext" class="center text-big bold">
+            Hi! I am Pawan, this is my first web app.
+
         </div>
+        <script>
+            alert('Hi,I\'m a Javascript');
+        </script>
         <script type="text/javascript" src="/ui/main.js">
         </script>
     </body>

diff --git a/ui/main.js b/ui/main.js
@@ -1 +1,12 @@
 console.log('Loaded!');
+var element=document.getElementById('maintext');
+element.innerHTML='New Value';
+var img=document.getElementById('madi');
+var marginleft = 0;
+function moveright(){
+    marginleft = marginleft + 1;
+    img.marginleft = marginleft + 'px';
+}
+img.onclick = function(){
+    var interval = setInterval(moveright,50);
+};
diff --git a/ui/style.css b/ui/style.css
@@ -1,22 +1,30 @@
-body {
-    font-family: sans-serif;
-    background-color: lightgrey;
-    margin-top: 75px;
-}
-
-.center {
-    text-align: center;
-}
-
-.text-big {
-    font-size: 300%;
-}
-
-.bold {
-    font-weight: bold;
-}
-
-.img-medium {
-    height: 200px;
-}
-
+body {
+    font-family: sans-serif;
+    /*background-color: lightgrey;*/
+    margin-top: 75px;
+}
+
+.center {
+    text-align: center;
+}
+
+.text-big {
+    font-size: 300%;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.img-medium {
+    height: 200px;
+}
+.container{
+             font-family: sans-serif;
+            color:#454343;
+            max-width: 800px;
+            margin: 0 auto;
+            padding-top: 60px;
+            padding-right: 5px;
+            padding-left: 5px;
+        }