diff --git a/server.js b/server.js index 3d5cece3ab..98b6e1ee59 100644 --- a/server.js +++ b/server.js @@ -5,19 +5,146 @@ var path = require('path'); var app = express(); app.use(morgan('combined')); +var articlesContent={ + //javacript data structure +'article-one':{ + title:'Article One', + heading:'Article 1 |Anita MC', + content:`

This is the content.This is the content.This is the content.this is the content.This is the content.This is the content.This is the content.This is the content.This is the content. +

This is the content.This is the content.This is the content.this is the content.This is the content.This is the content.This is the +

This is the content.This is the content.This is the content.this is the content.This is the content.This is the content.This is the `}, + + 'article-two':{ + title:'Article Two', + heading:'Article 2 | Anita MC', + content:`

This is the content.This is the content.This is the content.this is the content.This is the content.This is the content.This is the content.This is the content.This is the content. +

This is the content.This is the content.This is the content.this is the content.This is the content.This is the content.This is the +

This is the content.This is the content.This is the content.this is the content.This is the content.This is the content.This is the ` + }, + 'article-three':{ + title:'Article Three', + heading:'Article 3 | Anita MC', + content:`

This is the content.This is the content.This is the content.this is the content.This is the content.This is the content.This is the content.This is the content.This is the content. +

This is the content.This is the content.This is the content.this is the content.This is the content.This is the content.This is the +

This is the content.This is the content.This is the content.this is the content.This is the content.This is the content.This is the ` + } + + +}; + +var articleFour={ + title:'Article 4', + heading1:'About me', + heading2:'About my sister', + content1:'

I am anita mc. I live in Indore.I want to be a software engineer.Thats all for today.

', + content2:'

She is a very fun person to be with. really like and love her,she is my role mode. thats all.

' +}; + +function Createtemplate(data){ + var title=data.title; + var heading1=data.heading1; + var heading2=data.heading2; + var content1=data.content1; + var content2=data.content2; + + var HTMLTemplate=` + + ${title} + + + +
+

${heading1}

+
+ ${content1} +
+
+

${heading2}

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

${heading}

+
+
+
+ ${content} +
+ +`; +return htmlTemplate; +} + +app.get('/article-four',function(req,res){ + res.send(Createtemplate(articleFour)); +}); + +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); + + //JSON COMES INTO PLAY:JAVASCRIPT OBJECT NOTATION. which converst the java objects to strings + res.send(JSON.stringify(names)); +}); + 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(articlesContent[articleName])); +}); + + + app.get('/ui/style.css', function (req, res) { 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/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')); }); - var port = 8080; // Use 8080 for local development because you might already have apache running on 80 app.listen(8080, function () { console.log(`IMAD course app listening on port ${port}!`); diff --git a/ui/article-five.html b/ui/article-five.html new file mode 100644 index 0000000000..9adce33c69 --- /dev/null +++ b/ui/article-five.html @@ -0,0 +1,109 @@ + + + + + Layout 10 + + + + +
+ + +
+
+
+ +
+
+ +
+
+ +
+ +
+ + + diff --git a/ui/index.html b/ui/index.html index 5a28644db4..2af592a590 100644 --- a/ui/index.html +++ b/ui/index.html @@ -5,13 +5,27 @@
- +
-
-
- Hi! I am your webapp. +
+
+
Personal
+

My name is Anita MC.

- +
+
+
Professional
+

I study at IIPS.

+
+ +
+ + + + diff --git a/ui/main.js b/ui/main.js index 4cf7ed58de..8f59a8a276 100644 --- a/ui/main.js +++ b/ui/main.js @@ -1 +1,35 @@ -console.log('Loaded!'); +var submit=document.getElementById('submit-btn'); + +submit.onclick=function(){ + + //create a reqest object + var request=new XMLHttpRequest(); + + //capture the response and store it in a variable + 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'; + } + var ul=document.getElementById('the_list'); + ul.innerHTML=list; + } + } + }; + + var nameInput=document.getElementById('name'); + var name=nameInput.value; + + + //make a request + request.open('GET','http://anitamahotra63.imad.hasura-app.io/submit-button?name='+name,true); + request.send(null); + +}; \ No newline at end of file diff --git a/ui/style.css b/ui/style.css index 71a5f6acc1..51bf3a8f6d 100644 --- a/ui/style.css +++ b/ui/style.css @@ -19,4 +19,14 @@ body { .img-medium { height: 200px; } - +body{ + + background-color:black; + color:grey; + margin:0 auto; + max-width:800px; + font-family:sans-serif; + padding-left:10px; + padding-right:10px; + +}