hasura-imad · Isaac6171 · Sep 17, 2016 · Sep 17, 2016 · Sep 18, 2016 · Sep 19, 2016
diff --git a/server.js b/server.js
@@ -4,18 +4,162 @@ var path = require('path');
 
 var app = express();
 app.use(morgan('combined'));
+var articles ={
+'article-one':{
+    title:"Article one | Isaac Philip",
+    heading:"Article one",
+    date: "Sep 19, 2016",
+    content:`<p>
+               This is the content for my first article.This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. 
+
+
+              </p>
+              <p>
+               This is the content for my first article.This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. 
+
+
+            </p>`
+},
+'article-two':{
+    title:"Article Two | Isaac Philip",
+    heading:"Article Two",
+    date: "Sep 19, 2016",
+    content:`<p>
+               This is the content for my first article.This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. 
+
+
+              </p>
+              <p>
+               This is the content for my first article.This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. 
+
+
+            </p>`
+},
+'article-three':{
+    title:"Article Three | Isaac Philip",
+    heading:"Article Three",
+    date: "Sep 19, 2016",
+    content:`<p>
+               This is the content for my first article.This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. 
+
+
+              </p>
+              <p>
+               This is the content for my first article.This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. This is the content for my first article. This is the content for my first article. 
+               This is the content for my first article. 
+
+
+            </p>`
+},
+};
+function createTemplate(data){
+    var title = data.title;
+    var heading = data.heading;
+    var date = data.date;
+    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>
+           <input type="text" placeholder="Comment Here!" id ="comment"/>
+           <input type ="submit" value="Comment"  id ="cmnt_btn"/>
+           <ul id="cmnt_list">
+
+           </ul>
+        </div>
+        </div>
+
+
+
+    </body>
+</html>
+ `;
+ return htmlTemplate;
+}
 
 app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname, 'ui', 'index.html'));
 });
+app.get('/bio.html',function(req, res){
+    res.sendFile(path.join(__dirname,'ui', 'bio.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));
+}
+);
+var comments =[];
+app.get('/art_cmnt',function(req,res){
+    var comment = req.query.comment;
+    comments.push(comment);
+    res.send(JSON.stringify(comments));
+
+});
+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'));
 });
-
-app.get('/ui/madi.png', function (req, res) {
-  res.sendFile(path.join(__dirname, 'ui', 'madi.png'));
+app.get('/ui/main.js', function (req, res) {
+  res.sendFile(path.join(__dirname, 'ui', 'main.js'));
 });
+app.get('/ui/photo_opt.jpg', function (req, res) {
+  res.sendFile(path.join(__dirname, 'ui', 'photo_opt.jpg'));
+});
+
 
 
 var port = 8080; // Use 8080 for local development because you might already have apache running on 80

diff --git a/ui/C.V-01.png b/ui/C.V-01.png
diff --git a/ui/IMG_20161010_202803.jpg b/ui/IMG_20161010_202803.jpg
diff --git a/ui/New_Logo_Gmail.svg.png b/ui/New_Logo_Gmail.svg.png
diff --git a/ui/Portfolio.jpg b/ui/Portfolio.jpg
diff --git a/ui/bio.html b/ui/bio.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+    <head>
+        <title>
+            Bio |Isaac Philip
+        </title>
+        <link href="/ui/style.css" rel="stylesheet" />
+    </head>
+    <body>
+        <div class="container">
+           <a href="/"><div class="nav1">Home</div></a>
+        <div class="center">
+            <img  class="img-medium" id='madi' src="/ui/photo_opt.jpg" />
+        </div>
+        <hr/>
+        <h3>Bio</h3>
+        <div>
+            Name : Isaac Philip<br>
+            D.O.B: 06/11/1991<br>
+            Age  : 24<br>
+            Sex  : Male<br>
+        </div>
+        <hr/>
+        <h3>Education</h3>
+        <div>
+            College    : St. Joseph college of communication<br>
+            University : M.G University<br>
+            Degree     : B.A<br>
+            Stream     : Multimedia<br>
+        </div>
+
+        <div id='main-text' class="center text-big bold">
+
+        </div>
+        <hr/>
+        <div class="footer">
+            <button id="counter">Like</button><br/>
+            Number of likes is <span id="count">0</span>!
+            <br/>
+            <input type="text"  placeholder="name" id="name"/>
+            <input type="submit" value="Submit" id="submit_btn"/>
+            <ul id="namelist">
+
+            </ul>
+        </div>
+        </div>
+        <script type="text/javascript" src="/ui/main.js">
+        </script>
+    </body>
+</html>
diff --git a/ui/fb-art.png b/ui/fb-art.png
diff --git a/ui/index.html b/ui/index.html
@@ -1,17 +1,40 @@
-<!doctype html>
+<!doctype html> 
 <html>
-    <head>
-        <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">
-        </script>
-    </body>
+<head>
+
+<title>Portfolio</title>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+<link href="/ui/style.css" rel="stylesheet" />
+</head>
+
+<body>
+<div class="main">
+<div class="sub">
+<h1 class="_folio _txt">My Portfolio</h1>
+<div class="img_box">
+  <img class="pic" src="images/photo-01.png" width="200" height="200" /> 
+</div>
+
+<div class="ent">
+
+<a href="portfolio.html"><div class="_ent">
+Enter
+</div></a>
+
+</div>
+<div class="footer"> 
+<a href="../App/index.html"><img class= "in" src="images/linkedin.png" width="34" height="34" /></a>
+<a href="../App/index.html"><img src="images/New_Logo_Gmail.svg.png" width="38" height="34" /></a> 
+<a href="../App/index.html"><img src="images/fb-art.png" width="34" height="34" /></a> 
+<span class="_ftxt">
+
+
+</span>
+</div>
+</div>
+</div>
+
+</body>
 </html>
+
diff --git a/ui/linkedin.png b/ui/linkedin.png
diff --git a/ui/main.js b/ui/main.js
@@ -1 +1,88 @@
-console.log('Loaded!');
+
+// Counter code
+var button = document.getElementById('counter');
+
+button.onclick = function(){
+    //create a request object
+    var request = new XMLHttpRequest();
+
+
+    //capture the response and store it in a variable
+    request.onreadystatechange = function(){
+
+        if(request.readyState === XMLHttpRequest.DONE){
+            //take some action
+            if(request.status === 200){
+                var counter = rerquest.responseText;
+                var span = document.getElementById('count');
+                span.innerHTML = counter.toString();
+
+            }
+        }
+        else( console.log("server Error"));
+    };
+    //make the request
+    request.open('GET','http://isaac6171.imad.hasura-app.io/counter' , true);
+    request.send(null);
+
+    //render the variable in the correct span
+ };
+ //submit
+
+ var submit = document.getElementById('submit_btn');
+ submit.onclick = function(){
+     var request = new XMLHttpRequest();
+
+
+    //capture the response and store it in a variable
+    request.onreadystatechange = function(){
+
+        if(request.readyState === XMLHttpRequest.DONE){
+            //take some action
+            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('namelist');
+     ul.innerHTML = list;
+
+
+
+
+            }
+        }
+    };
+    //make the request
+     var nameInput = document.getElementById('name');
+     var name = nameInput.value;
+    request.open('GET','http://isaac6171.imad.hasura-app.io/submit-name?name=' + name, true);
+    request.send(null);
+
+    };
+    //Comments
+    var comment = document.getElementById('cmnt_btn');
+    comment.onclick = function(){
+        var request = new XMLHttpRequest();
+        request.onreadystatechange = function(){
+            if(request.readystaechange === XMLHttpRequest.DONE){
+                if(request.status === 200){
+                    var comments = request.responseText;
+                    comments = JSON.parse(comments);
+                    var list ='';
+                    for(var i=0;i<comments.length;i++){
+                        list += '<li>' + comments[i] +'</li>';
+                        var ul = document.getElementById('cmnt_list');
+                        ul.innerHTML = list;
+                    }
+                }
+            }
+
+        };
+        var commentInput = document.getElementById('comment');
+        var comment = commentInput.value;
+        request.open('GET',"http://isaac6171.imad.hasura-app.io/art_cmnt?comment=" + comment, true);
+        request.send(null);
+    };
diff --git a/ui/photo-01.png b/ui/photo-01.png
diff --git a/ui/search-icon-png-2.png b/ui/search-icon-png-2.png