hasura · jntuv · Aug 3, 2017 · Aug 3, 2017 · Aug 3, 2017 · Aug 3, 2017
diff --git a/server.js b/server.js
@@ -4,10 +4,72 @@ var path = require('path');
 
 var app = express();
 app.use(morgan('combined'));
+var articles = {
+    'article-one': {
+    title: 'Senthilkumars', 
+   heading: 'Article one',
+   content: ' Whats up bro . This is my first project and it is successful. I am really happy at this point and i want to improve this page. blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah...blah... blah... blah...blah...blah...blah...blah...blah...blah...blah...vvblah...blah...blah...vblah...blah...blah...blah...vvblah...blah...blah...vblah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...'
+    },
+    'article-two':{
+    title: 'Senthilkumars2', 
+   heading: 'Article two',
+   content: ' This is my second project and it is successful. I am really happy at this point and i want to improve this page. blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah...blah... blah... blah...blah...blah...blah...blah...blah...blah...blah...vvblah...blah...blah...vblah...blah...blah...blah...vvblah...blah...blah...vblah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...'
+    },
+};
 
+function createtemplate (data) {
+    var title = data.title;
+    var heading = data.heading;
+    var content = data.content;
+var htmltemplate = 
+   `<html>
+<head> <title>
+    ${title} 
+</title>
+ <link href="/ui/style.css" rel="stylesheet" />
+</head>
+
+
+<body><div class='links'>
+    <div>
+        <a href="/">Home</a>
+    </div>
+
+<h>
+    ${heading}
+</h>
+${content}
+</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());
+});
+var names = [];
+app.get('/submit-name', function (req, res) {
+ var name = req.query.name;
+ names.push(name);
+ res.send(JSON.stringify(names));
+});
+
+
+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'));
@@ -18,6 +80,7 @@ app.get('/ui/madi.png', function (req, res) {
 });
 
 
+
 // Do not change port, otherwise your app won't run on IMAD servers
 // Use 8080 only for local development if you already have apache running on 80
 

diff --git a/ui/article one b/ui/article one
@@ -0,0 +1 @@
+
diff --git a/ui/article-one.html b/ui/article-one.html
@@ -0,0 +1,22 @@
+<html>
+<head> <title>
+    Senthilkumars
+</title>
+ <link href="/ui/style.css" rel="stylesheet" />
+</head>
+
+
+<body><div class='links'>
+    <div>
+        <a href="/">Home</a>
+    </div>
+
+<h>
+    Article one
+</h>
+<p>
+    Whats up bro . This is my first project and it is successful. I am really happy at this point and i want to improve this page. blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah...blah... blah... blah...blah...blah...blah...blah...blah...blah...blah...vvblah...blah...blah...vblah...blah...blah...blah...vvblah...blah...blah...vblah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...
+</p>
+</div>
+</body>
+</html>
diff --git a/ui/article-two.html b/ui/article-two.html
@@ -0,0 +1,23 @@
+<html>
+<head> <title>
+    Senthilkumars2
+</title>
+
+ <link href="/ui/style.css" rel="stylesheet" />
+ </head>
+
+<body><div class='links'>
+    <div>
+        <a href="/">Home</a>
+    </div>
+
+<h>
+    Article Two
+</h>
+<p>
+    Whats up bro . This is my first project and it is successful. I am really happy at this point and i want to improve this page. blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah...blah... blah... blah...blah...blah...blah...blah...blah...blah...blah...vvblah...blah...blah...vblah...blah...blah...blah...vvblah...blah...blah...vblah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...blah...
+</p>
+</div>
+</body>
+</html>
+
diff --git a/ui/index.html b/ui/index.html
@@ -4,13 +4,37 @@
         <link href="/ui/style.css" rel="stylesheet" />
     </head>
     <body>
+        <div class="links">
         <div class="center">
-            <img src="/ui/madi.png" class="img-medium"/>
+            <img id='madi' src="/ui/madi.png" class="img-medium"/>
         </div>
+        <hr/>
         <br>
-        <div class="center text-big bold">
-            Hi! I am your webapp.
+        <h2>Personal</h2>
+        <div>Hi. My name is KKK</div>
+   <div id='main-text' class="center text-big bold">
+       Hi! I am Senthilkumar M. cool is it. 
         </div>
+        </div>
+        <hr/>
+        <h3>Professional</h3>
+        <div>
+            I am working in Rural Electrification Corporation
+        </div>
+        <hr/>
+        <div class = "footer">
+            This button <button id ="counter">Click</button> has been clicked <span id ="counter">0</span> times
+            <hr/>
+            <input type = "text" id="name" placeholder="name"> </input>
+            <input type = "submit" value="submit" id="submit_btn"> </input>
+            <ul id = "name list">
+
+            </ul>
+        </div>
+       <script> 
+
+           alert('Hi guys whats up');//
+       </script>//
         <script type="text/javascript" src="/ui/main.js">
         </script>
     </body>

diff --git a/ui/main.js b/ui/main.js
@@ -1 +1,60 @@
-console.log('Loaded!');
+//console.log('Loaded!');
+
+//var element = document.getElementById('main-text'
+///);//
+
+//element.innerHTML = 'new value';
+//var img = document.getElementById('madi');
+//var marginLeft = 0;
+//function moveRight (){
+   // marginLeft = marginLeft + 10;
+   // img.style.marginLeft = marginLeft + 'px';
+//}
+//img.onclick = function (){
+   // var interval = setInterval(moveRight, 50);
+//};//
+
+var button = document.getElementById('counter');
+//var counter = 0;
+button.onclick = function (){
+
+    var request = new XMLHttpRequest();
+    request.onreadystatechange = function () {
+        if (request.readyState === XMLHttpRequest.DONE){
+        if (request.status === 200){
+           var counter = request.responseText;
+    var span = document.getElementById('count');
+    span.innerHTML = counter.toString();
+}
+}
+},
+request.open('GET', 'http://u034senthil.imad.hasura-app.io/counter', true);
+request.send(null);
+};
+
+
+var submit = document.getElementById('submit_btn');
+submit.onclick = function (){
+     var request = new XMLHttpRequest();
+    request.onreadystatechange = function () {
+        if (request.readyState === XMLHttpRequest.DONE){
+        if (request.status === 200){
+           var names = request.responseText;
+   names = JSON.parse(names);
+   var list = '';
+   for(var i=0; i< names.length; i++){
+
+       list += '<li>' + names[i] + '</li>';
+   }
+
+    var ul =document.getElementById('name list');
+    ul.innerHTML = list;
+}
+}
+},
+
+var nameInput = document.getElementById('name');
+var name = nameInput.value;
+request.open('GET', 'http://u034senthil.imad.hasura-app.io/submit-name?name=' + name, true);
+request.send(null);
+};
diff --git a/ui/style.css b/ui/style.css
@@ -1,7 +1,6 @@
 body {
     font-family: sans-serif;
-    background-color: lightgrey;
-    margin-top: 75px;
+
 }
 
 .center {
@@ -19,4 +18,12 @@ body {
 .img-medium {
     height: 200px;
 }
-
+.links
+ {
+        max width: 800px;
+        Color: #A52A2A;
+        padding-top: 60px;
+        padding-right: 70px;
+        padding-left: 60px;
+        padding-bottom: 50px;
+ }