Codelybrary: Complete code of State-of-the Art web application.

Hi all !

Check out my app    and suggest some changes which you think should be done.
My app is powered by hasura
Thanks.

NOTES:
1) Never use single or double backqoutes (used for multi-line html codes) in the front-end code, because some browsers like IE, Safari and Android browser consider backqoutes as 'Invalid character'. You can use them in your server side code (Nodejs-express).

2) Use IE inspect element to debug for IE, Safari and Android browsers. They are very similar.
and Use Chrome inspect element for Chrome, Opera and firefox

My app is made up of only six files :- 1)Homepage 2)questions page 3) Answer sheet 4) sign up page 5) logout page 6) CSS page

===============LATEST UPDATE TO 4.1 SCREEN 1 ON 07-07-2017==============
                    having an added feature to CHANGE PASSWORD by a logged-in user
=====================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>State of the Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/main.css" rel="stylesheet" />

</head>
<body class=scroll>

<nav class="navbar navbar-default container">
<div class="container-fluid">
   
    <ul class="nav navbar-nav">
      <li ><a href="#" onclick='aboutUs();'>State-of-the-Art</a>
      <li class="active"><a href="/">Home</a></li>
      <li><a href="/subjects.html">QUESTIONS</a></li>
     
      <li id="welcome_msg"></li>
     
      <li ><a id=date href="#" onclick='history();'></a></li>
      <li ><a href="https://hasura.io/ " target=_blank>powered by : Hasura</a></li>
      <li id=resetPassword></li>
      <li id="sign_out"></li>
    </ul>
</div>
</nav>

<div id=1 class="jumbotron text-center container">

<div id = parent>
</span>
<div id=header>
<span class=white>Join the</span> <span class=white text-medium>State-of-the-Art</span><span class=white> community</span>
</div>

<hr>
    
    <span class=white>We all have several un-answered questions. One person cannot answer all our questions. Here we help each other in finding answers. Happiness and liberation is possible only when we have no questions left.
    Ask till you have no doubts . Have no doubts...lucky !
    </span>
<hr>

<div class ="container ">
<div class=row>

    <div class=col-md-4>
   <span id=sign_in_body>
   
        <h2 ><span style=color:#fff380>Sign in</span></h2>
        <span id="" class=bold>

           <label for=username class=white></label><input placeholder=" *username" class="form-control black" type=text id=username >
           <label for = password class=white></label><input placeholder=" *password" class="form-control black" type=password id=password>
           <br>
           <span id = error_msg></span><br>
           <input type=button value="Sign in" class="btn btn-success" id=login_btn > <a href="#" class= "hyperlinks " id="forgotPassword" onclick="newPassword();" > Forgot password?</a><br>
           <span class=white>New to State-of-the-Art?</span> <a style=color:#fff380 href="/signup.html" >Sign up</a>
           <span id=pre></span>
           <br><br>
       </span>
    </span>
   <span id=resetPassword_body></span>
    </div>

    <div class=col-md-4>
    <h2 class=white>Ask Question</h2>
    <div class=form-group ng-app="">
    <label class=white>Subject catagory</label>
    <select type=number id=sub_category class="silver form-control">
            <option value="General">General</option>
            <option value="Aviation">Aviation</option>
            <option value="Ajax">Ajax</option>
            <option value="Botany">Botany</option>
            <option value="Biology">Biology</option>
            <option value="Bootstrap">Bootstrap</option>
            <option value="Computer programming">Computer programming</option>
            <option value="Chemistry">Chemistry</option>
            <option value="Computer Sc. & Engg">Computer Sc. & Engg</option>
            <option value="Cascading Style Sheets">Cascading Style Sheets</option>
            <option value="English">English</option>
           <option value="Entertainment">Entertainment</option>
            <option value="javaScript">javaScript</option>
            <option value="JQuery">JQuery</option>
            <option value="Medical Sciences">Medical Sciences</option>
            <option value="Nodejs-express">Nodejs-express</option>
           <option value="News">News </option>
            <option value="Engineering">Engineering</option>
            <option value="Science">Science</option>
           <option value="Sociology">Sociology</option>
            <option value="Maths">Maths</option>
            <option value="GK">General Knowledge</option>
            <option value="History">History</option>
            <option value="Spirituality">Spirituality</option>
            <option value="Physics">Physics</option>
           <option value="Phylosophy">Phylosophy</option>
            <option value="Web Development">Web Technologies</option>


        </select>
    <br>

    <input type=text placeholder=" *Question title" id=question_title cols=60 rows =1 maxlength=40 class="black form-control"><br>

    <textarea placeholder="Your question" id=your_question cols=40 rows =6 maxlength=5000 class="black form-control" ng-model="yr_question"></textarea><br>
    <h4>Fields marked as * are complusory</h4>
   <span class=white>
          <hr>
          <span maxlength=25>{{yr_question}}</span>
          <hr>
    </span>
    <input type=button id=submit_btn class=" btn btn-success white" value="Post your question">
    </div>

    </div>

    <div class=col-md-4 >

        

          <h2 class=white>Recent questions </h2><br>
          <span id = recent_questions class=white></span>

</div>
</div>
</div>

</div>

    <div id=footer>
    <span class=white>Site Owner & developer: Ashutosh Singh, U.P., India<br>
    Contact information:</span> <a href="mailto:webwithjs@gmail.com" class=hyperlinks>Send me a letter</a>
   <a href='https://stackoverflow.com/users/7394522/ashutosh-k-singh' target=_blank>Stack</a>   
   <a href='http://ashutosh-hasura.blogspot.in/' target=_blank>Blog</a>   
   <a href='https://github.com/internetadvancedsolutions' target= _blank>Git</a>
    </div>

</div>
</div>
    
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


                                
<script type="text/javascript">


    window.onload=function() {
    var loggedIn_user = Cookies.get('user_name');
        console.log(loggedIn_user);
        if(loggedIn_user!==undefined){
        document.getElementById("sign_out").innerHTML='<a href="/logout.html" >'+'SIGNOUT'+'</a>';
        //document.getElementById("sign_in").innerHTML='';
        document.getElementById("welcome_msg").innerHTML="<a href=''>" + "Hello, " + "<span style=color:blue>"+ loggedIn_user +"</span>"+"</a>";
        document.getElementById("sign_in_body").innerHTML= "<ul class=list-group>"+"<li class=list-group-item >" + "<span class= black text-medium>"+ " Welcome ! you may"+"</span>" + "</li>" + "<li class=list-group-item >" + " <a href='/subjects.html' >"+"<span class=black text-medium>"+"Answer questions"+"</span>"+"</a>"+"</li>"+"<li class=list-group-item black>"+"<span class=black text-medium>"+" OR "+"</span>"+"</li>"+"<li class=list-group-item >"+"<span class=black text-medium>"+" Ask questions"+"</span>"+"</li>"+"</ul>";
        document.getElementById("resetPassword").innerHTML="<a href='#' onclick='resetPassword();'>"+"Reset password"+"</a>";

       }
        else{
        document.getElementById("sign_out").innerHTML='';
        //document.getElementById("sign_in").innerHTML='<a href="/">'+''+'</a>';
        document.getElementById("welcome_msg").innerHTML='';
        }


    var request = new XMLHttpRequest();
    var orderedQuestions;

     var recent_questions = document.getElementById('recent_questions');
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {

               // console.log(this.responseText); // returns Arrray of Objects
               var content = '<ol class=left>';
                 orderedQuestions=JSON.parse(this.responseText);
           console.log(orderedQuestions);
           var list= orderedQuestions.result;
           //console.log(list);

           var l = list.length;
           console.log(l-1);
            console.log("Total no. of questions = "+(l-1));


                   for(var i =(l-1); i>=(l-10); i--)
                   { content+=

                   "<li>"+
                    "<span style=color:white>"+(list[i])[3]+"</span>"+ " :"+"<a href=answersheet/"+(list[i])[0]+">"+(list[i])[6]+"..."+"</a>"+
                    "<span style=color:#fff380>"+" "+(list[i])[2]+"</span>"+
                    "</li>";

                    }

                recent_questions.innerHTML = content;
            }
           else {
                recent_questions.innerHTML='Please wait ...loading recent questions';
                }
        };
    };

    console.log(Cookies.get('user_id'));
    console.log(Cookies.get('user_name'));

    request.open('POST', " https://data.veejay84.hasura-app.io/v1/query ", true);
   request.setRequestHeader('Content-type','application/json');
   request.send(JSON.stringify({type:"run_sql",args:{sql:"select * from ask_question order by created_date"}}));
   recent_questions.innerHTML='loading data...';
};

</script>



<script type="text/javascript">

                                    
    var user_id;
    var username;
    var user_id_cookie;
    var user_name_cookie;
    var login_btn = document.getElementById("login_btn");

    var error_msg = document.getElementById("error_msg");
    login_btn.onclick= function()
{    var requestObject1= new XMLHttpRequest();

        requestObject1.onreadystatechange= function()
{
              if (requestObject1.readyState===4){

                     if( requestObject1.status===200)
                    {
                    var welcome_msg = document.getElementById("welcome_msg");
                    welcome_msg.innerHTML='<a href="#">'+ "Hello, " + " " +"<span style=color:blue>"+ username+"</span>"+'</a>';
                    document.getElementById("sign_in_body").innerHTML= "<ul class=list-group>"+"<li class=list-group-item >"+"<span class =black text-medium>"+ " Welcome ! you may"+"</span>" + "</li>" + "<li class=list-group-item >" + " <a href='/subjects.html' >"+"<span class=black text-medium>"+"Answer questions"+"</span>"+"</a>"+"</li>"+"<li class=list-group-item black>"+"<span class=black text-medium>"+" OR "+"</span>"+"</li>"+"<li class=list-group-item >"+"<span class=black text-medium>"+" Ask questions"+"</span>"+"</li>"+"</ul>";
                    //document.getElementById("sign_in").innerHTML='';
                    document.getElementById("sign_out").innerHTML='<a href="/logout.html">'+'SIGNOUT'+'</a>';
                   document.getElementById("resetPassword").innerHTML="<a href='#' onclick='resetPassword();'>"+"Reset password"+"</a>";
                    user_id = JSON.parse(this.responseText).hasura_id;
                    console.log(this.responseText);    // returns JSON object
                    console.log("user_id = "+user_id); // user_id = 8

                    Cookies.set('user_id', user_id);
                    Cookies.set('user_name', username);


                    }
                    else
                    {
                    document.getElementById("error_msg").innerHTML="<h5>"+"Invalid username or password "+"</h5>";
                    document.getElementById("login_btn").value='Sign In ';
                    }
           }
}


     username= document.getElementById("username").value;
    var password= document.getElementById("password").value;

    requestObject1.open('POST', " https://auth.veejay84.hasura-app.io/login ", true);
    requestObject1.withCredentials=true;
    requestObject1.setRequestHeader('Content-type','application/json');
    requestObject1.send(JSON.stringify({username:username,password:password}));
    document.getElementById("login_btn").value="Signing-in...";

};
</script>

<script type="text/javascript">
                        

   var submit_btn= document.getElementById("submit_btn");

   submit_btn.onclick=function()
{   var request = new XMLHttpRequest();
        request.onreadystatechange=function()
        {
            if(request.readyState===XMLHttpRequest.DONE && request.status===200)
            {
                      console.log(JSON.parse(this.responseText));
                   setTimeout(newQuestionUpdate,2000);
                   document.getElementById("submit_btn").value="Great ! ask more";
            }
           else if(user_name_cookie==undefined)
           {
                   document.getElementById("submit_btn").value="Sign in/Sign up";
                   //document.getElementById("submit_btn").value="question title missing";
                   setTimeout(repostQuestion,5000);
           }
            else
            {
                    document.getElementById("submit_btn").value="question title missing";
                   setTimeout(repostQuestion,5000);
                   //document.getElementById("submit_btn").value="Sign in/Sign up";

            }

        }
        var subject_category   = document.getElementById("sub_category").value;
        var your_question1 = document.getElementById("your_question").value;
       var your_question = your_question1.trim();
        var question_title = document.getElementById("question_title").value;
        user_id_cookie=Cookies.get('user_id');
        user_name_cookie=Cookies.get('user_name');
        var user_id_cookie_int = parseInt(user_id_cookie);
        console.log(subject_category);
        console.log(your_question);
        console.log(question_title);
        console.log(user_id_cookie_int);
        console.log(user_name_cookie);
       //console.log(JSON.parse(this.responseText).message);

        request.open('POST', "https://data.veejay84.hasura-app.io/v1/query",true);
        request.withCredentials=true;
        request.setRequestHeader('Content-type','application/json');
        request.setRequestHeader('Authorization','Bearer');
        request.send(JSON.stringify({type:"insert",args:{table:"ask_question", objects:[{user_id:user_id_cookie_int,user_name:user_name_cookie,subject_category:subject_category, your_question:your_question, question_title:question_title}]}}));
        document.getElementById("submit_btn").value= "Posting...";




};

function newQuestionUpdate(){
        var request1 = new XMLHttpRequest();
        var orderedQuestions;
        var recent_questions = document.getElementById('recent_questions');
        request1.onreadystatechange = function () {
        if (request1.readyState === XMLHttpRequest.DONE) {
            if (request1.status === 200) {

               var content = '<ol class=left>';
                 orderedQuestions=JSON.parse(this.responseText);
           console.log(orderedQuestions);
           var list= orderedQuestions.result;
           //console.log(list);

           var l = list.length;
           console.log(l-1);
            console.log("Total no. of questions = "+(l-1));

                   for(var i =(l-1); i>=(l-10); i--)
                   { content+=

                   "<li>"+
                    "<span style=color:white>"+(list[i])[3]+"</span>"+ " :"+"<a href=answersheet/"+(list[i])[0]+">"+(list[i])[6]+"..."+"</a>"+
                    "<span style=color:#fff380>"+" "+(list[i])[2]+"</span>"+
                    "</li>";

                    }

                recent_questions.innerHTML = content;
            }
           else {
                recent_questions.innerHTML='Please wait ...loading recent questions';
                }
        };
    };


    request1.open('POST', " https://data.veejay84.hasura-app.io/v1/query ", true);
   request1.setRequestHeader('Content-type','application/json');
   request1.send(JSON.stringify({type:"run_sql",args:{sql:"select * from ask_question order by created_date"}}));
   recent_questions.innerHTML='loading data...';

}

</script>


<script type="text/javascript">

var d =new Date();
   var date_time= d.toDateString();
   document.getElementById("date").innerHTML=date_time;

function resetPassword(){
   document.getElementById("resetPassword").innerHTML='';
    document.getElementById("resetPassword_body").innerHTML= "<ul class=list-group>"+"<li class=list-group-item >"+"<span class =black text-medium>"+ "Enter old password "+"</span>" + "</li>" + "<li class=list-group-item >" + "<span class=black text-medium>"+"<input type=password id = oldPassword placeholder='Old password' >"+"</span>"+"</a>"+"</li>"+"<li class=list-group-item black>"+"<span class=black text-medium>"+" Enter new password, min 8 chars "+"</span>"+"</li>"+"<li class=list-group-item >"+"<span class=black text-medium>"+" <input type=password id=newPassword placeholder='New password' >"+"<br>"+"<input type=button id ='resetPassword_btn' value=' Submit' class=' btn btn-success'>"+"</span>"+"</li>"+"<li class=list-group-item >"+"</li>"+"</ul>";

var resetPassword_btn = document.getElementById('resetPassword_btn');
resetPassword_btn.onclick= function(){
        var request1 = new XMLHttpRequest();
        request1.onreadystatechange = function () {
        if (request1.readyState === XMLHttpRequest.DONE) {
            if (request1.status === 200) {

               document.getElementById("resetPassword_body").innerHTML="<ul class=list-group>"+"<li class=list-group-item >"+ "<span class=black text-medium>"+'Password changed successfully'+"</span>"+"</li>"+"</ul>";




            }
           else {
                document.getElementById("resetPassword_body").innerHTML="<ul class=list-group>"+"<li class=list-group-item >"+"<span class=black text-medium>"+'wrong old password ! re-try'+"</span>"+"</li>"+"</ul>";
               document.getElementById("resetPassword").innerHTML="<a href='#' onclick='resetPassword();'>"+"Reset pasword"+"</a>";;
                }
        };
    };


    oldPassword=document.getElementById('oldPassword').value;
   newPassword=document.getElementById('newPassword').value;
    request1.open('POST', " https://auth.veejay84.hasura-app.io/user/password/change", true);
    request1.withCredentials=true;
    request1.setRequestHeader('Content-type','application/json');
    request1.send(JSON.stringify({password:oldPassword,new_password:newPassword}));
    document.getElementById("resetPassword_btn").value="Please wait...";


};

};
/*
var pass=document.getElementById('password');

pass.= function(){
document.getElementById('login_btn').focus();
}
*/
function newPassword(){
       alert('Signup again with a new username');
}

function repostQuestion(){
   document.getElementById("submit_btn").value='Post your question';
}

function aboutUs(){
            alert('This is a MVP - minimum viable product , developed by Ashutosh, as his Hasura internship activty. You can ask any question from any field, this online community will try to answer it . First appeared on 13 June 2017');
                }

function history(){
   alert(' Today on 13 July 2017, we at State-of-the-Art and Hasura, celebrate the first month of our app !!!');
}
</script>
<script src=/js.cookie.js></script>
</body>

======LAST UPDATE TO 6.1 SCREEN 3 (New answer uploads without page refresh)     on 29/06/2017======

var express = require('express');
var path = require('path');
var crypto =require('crypto');

var app = express();

function answerSheet(data1){
    var question_id = data1;
    var answersht =`
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<title>State of the Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/main.css" rel="stylesheet" />

</head>

<body id=body class=scroll>

<nav class="navbar navbar-default container">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">State-of-the-Art</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Home</a></li>
      <li><a href="/subjects.html">QUESTIONS</a></li>
      <li id="sign_in"><a href="/">SIGNIN/SIGNUP</a></li>
    <li id="welcome_msg"></li>
     
    <li ><a id=date href="#"></a></li>
    <li ><a href="https://hasura.io/" target=_blank >powered by : Hasura</a></li>
       <li id="sign_out"></li>
    </ul>
</div>
</nav>

<div class="jumbotron text-center container">



    <div id=header>
    <h2>Answer Sheet</h2>
    </div>


   <div id=header>
    <h2 id=question_title> </h2>
    </div>
    <span id=your_question class=white bold></span><br>
    <div id=header>
    <h2>Answers</h2>
    </div>

   <span id=all_answers class=black bold>

    </span>

        <div id=header>
    <h2>Post your answer</h2>
    </div>
    <div class=form-group ng-app="">

    <textarea id= "answer_text" placeholder="Type your answer here" class=class="black form-control" ng-model="yr_answer" cols=70 rows=10 maxlength=1000></textarea>
    <hr>
    <span class="white" maxlength=70>{{yr_answer}}</span>
    <hr>
        <input id="submit_btn" type =button value ="Post your answer" class ="btn btn-success">
    </div>
    <div id=footer>
    <span class=white>Site Owner & developer: Ashutosh Singh, U.P., India<br>
    Contact information:</span> <a href="mailto:webwithjs@gmail.com" class=hyperlinks>Send me a letter</a>
    </div>

    
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <script >

                                         

                                        

    var question_id=${question_id};
    var all_cookies;
    var user_id;
    var user_name;


    window.onload=function() {
    var d =new Date();
    var date_time= d.toDateString();
    document.getElementById("date").innerHTML=date_time;
    var request = new XMLHttpRequest();

    var all_answers = document.getElementById('all_answers');
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {

                var content = '<ol class=left>';
                console.log(this.responseText); // returns Arrray of Objects
                var answers = JSON.parse(this.responseText);
                console.log(answers); // returns Array of JSON objects
                    for (var i=(answers.length)-1; i >=0; i--) {
                    var time= new Date(answers[i].answer_date);
                    content += "<li>"+
                   answers[i].your_answer+"<br>"
                    + " "+"<span style=color:#fff380>"+ answers[i].user_name+"</span>"+ " - on "+time.toUTCString()
                   +" </li>";
                }
                content += "</ol>"
                all_answers.innerHTML = content;
            } else {
                all_answers.innerHTML('Please wait ...');
            }
        }
    };



    user_id=Cookies.get('user_id');
     user_name=Cookies.get('user_name');
    console.log("user_id cookie = "+ user_id);
    console.log("user_name cookie = "+ user_name);

    if(user_name!==undefined){
        document.getElementById("sign_out").innerHTML='<a href="/logout.html">SIGNOUT</a>';
        document.getElementById("sign_in").innerHTML='';
        document.getElementById("welcome_msg").innerHTML="<a href=''>"+"Hello, " + " " +"<span style=color:blue>"+ user_name+"</span>"+"</a>";;
        }
        else{
        document.getElementById("sign_out").innerHTML='';
        document.getElementById("sign_in").innerHTML='<a href="/">'+'SIGNIN/SIGNUP'+'</a>';
        document.getElementById("welcome_msg").innerHTML="";
        }


        request.open("POST", "https://data.veejay84.hasura-app.io/v1/query", true);
        request.setRequestHeader('Content-type','application/json');
        request.send(JSON.stringify({type:"select",args:{table:"your_answer", columns:["user_id","user_name", "your_answer", "answer_date"], where:{"answer2_question_id":question_id}}}));

            

                            var request1 = new XMLHttpRequest();
    var your_question = document.getElementById('your_question');
    var question_title = document.getElementById('question_title');
    request1.onreadystatechange = function () {
        if (request1.readyState === XMLHttpRequest.DONE) {
            if (request1.status === 200) {

                var j = question_id;
                console.log("question id = " +j);
                //console.log(JSON.parse(this.responseText)); // returns Arrray of Objects
                // var questions = this.responseText;
                var questions = JSON.parse(this.responseText); // returns Array of JSON objects
                console.log(questions);
                var time= new Date(questions[0].created_date);
                question_title.innerHTML= questions[0].question_title;
                your_question.innerHTML=questions[0].your_question+"<br>"+ " " +"<span style=color:#fff380>"+ questions[0].user_name +"</span>" + " on "+ time.toUTCString();


                }
             else {
                your_question.innerHTML='Please wait ...loading question';
            }
        }
    }


    request1.open('POST', 'https://data.veejay84.hasura-app.io/v1/query', true);
    request1.setRequestHeader('Content-type','application/json');
    request1.send(JSON.stringify({type:"select",args:{table:"ask_question", columns:["user_id","user_name", "your_question", "created_date","question_title"], where:{"question_id":question_id}}}));





};




                               

   var submit_btn= document.getElementById("submit_btn");

   submit_btn.onclick=function()
{   var request = new XMLHttpRequest();
        request.onreadystatechange=function()
        {
            if(request.readyState===XMLHttpRequest.DONE && request.status===200)
            {

                    setTimeout( newQuestion, 2000);
                    document.getElementById("submit_btn").value="Thanks ! answer more";
            }
            else
            {
                    document.getElementById("submit_btn").value="Sign in/Sign up";

            }

        }

        var answer_text   = document.getElementById("answer_text").value;
        console.log("your_answer= "+answer_text);
        var user_id_int= parseInt(user_id);
        request.open('POST', "https://data.veejay84.hasura-app.io/v1/query",true);
        request.withCredentials=true;
        request.setRequestHeader('Content-type','application/json');
        request.setRequestHeader('Authorization','Bearer');
        request.send(JSON.stringify({type:"insert",args:{table:"your_answer", objects:[{user_id:user_id_int,user_name:user_name, answer2_question_id:question_id,your_answer:answer_text}]}}));
        document.getElementById("submit_btn").value= "Posting...";
        console.log("user_id = "+user_id);
        console.log("user_name = "+user_name);
        console.log("question_id = "+ question_id);
        console.log("user_id_int = "+ user_id_int);
};

function newQuestion(){
    var request = new XMLHttpRequest();

    var all_answers = document.getElementById('all_answers');
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {

                var content = '<ol class=left>';
                console.log(this.responseText); // returns Arrray of Objects
                var answers = JSON.parse(this.responseText);
                console.log(answers); // returns Array of JSON objects
                    for (var i=(answers.length)-1; i >=0; i--) {
                    var time= new Date(answers[i].answer_date);
                    content += "<li>"+
                   answers[i].your_answer+"<br>"
                    + " "+"<span style=color:#fff380>"+ answers[i].user_name+"</span>"+ " - on "+time.toUTCString()
                   +" </li>";
                }
                content += "</ol>"
                all_answers.innerHTML = content;
            } else {
                all_answers.innerHTML('Oops ! re-try...');
            }
        }
    };

        request.open("POST", "https://data.veejay84.hasura-app.io/v1/query", true);
        request.setRequestHeader('Content-type','application/json');
        request.send(JSON.stringify({type:"select",args:{table:"your_answer", columns:["user_id","user_name", "your_answer", "answer_date"], where:{"answer2_question_id":question_id}}}));
         all_answers.innerHTML = "<h4>"+"loading data..."+"</h4>";
}


</script>

    <script src=/js.cookie.js></script>
</body>
</html>

    `;
    return answersht;
}

app.get('/', function (req, res) {

    res.sendFile(path.join(__dirname, 'index.html'));
});

app.get('/:fileName', function (req, res) {
res.sendFile(path.join(__dirname, req.params.fileName));
});

app.get('/answersheet/:question_id', function(req,res){
    res.send(answerSheet(req.params.question_id));
});

app.listen(8080, function () {
console.log('State-of-the-Art app listening on port 8080!');
});

===========LATEST UPDATE TO 4.1 SCREEN 1 (New questions loads without refreshing page) on 29/06/2017===========

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>State of the Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/main.css" rel="stylesheet" />

</head>
<body class=scroll>

<nav class="navbar navbar-default container">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">State-of-the-Art</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Home</a></li>
      <li><a href="/subjects.html">QUESTIONS</a></li>
     
      <li id="welcome_msg"></li>
     
      <li ><a id=date href="#"></a></li>
      <li ><a href="https://hasura.io/ " target=_blank>powered by : Hasura</a></li>
      <li id="sign_out"></li>
    </ul>
</div>
</nav>

<div id=1 class="jumbotron text-center container">

<div id = parent>
</span>
<div id=header>
<span class=white>Join the</span> <span class=white text-medium>State-of-the-Art</span><span class=white> community</span>
</div>

<hr>
    
    <span class=white>We all have several un-answered questions. One person cannot answer all our questions. Here we help each other in finding answers. Happiness and liberation is possible only when we have no questions left.
    Ask till you have no doubts . Have no doubts...lucky !
    </span>
<hr>

<div class ="container ">
<div class=row>

    <div class=col-md-4>
   <span id=sign_in_body>
        <h2 ><span style=color:#fff380>Sign in</span></h2>
        <span id="" class=bold>

           <label for=username class=white></label><input placeholder="username" class="form-control black" type=text id=username >
           <label for = password class=white></label><input placeholder="password" class="form-control black" type=password id=password>
           <br>
           <span id = error_msg></span><br>
           <input type=button value="Sign in" class="btn btn-success" id=login_btn > <a href="" class= "hyperlinks " id="forgotPassword" onclick="return confirm('Signup again with a new username');" > Forgot password?</a><br>
           <span class=white>New to State-of-the-Art?</span> <a class=" text-medium" style=color:#fff380 href="/signup.html" >Sign up</a>
           <span id=pre></span>
           <br><br>
       </span>
    </span>
    </div>

    <div class=col-md-4>
    <h2 class=white>Ask Question</h2>
    <div class=form-group ng-app="">
    <label class=white>Subject catagory</label>
    <select type=number id=sub_category class="silver form-control">
            <option value="General">General</option>
            <option value="Aviation">Aviation</option>
            <option value="Ajax">Ajax</option>
            <option value="Botany">Botany</option>
            <option value="Biology">Biology</option>
            <option value="Bootstrap">Bootstrap</option>
            <option value="Computer programming">Computer programming</option>
            <option value="Chemistry">Chemistry</option>
            <option value="Computer Sc. & Engg">Computer Sc. & Engg</option>
            <option value="Cascading Style Sheets">Cascading Style Sheets</option>
            <option value="English">English</option>
           <option value="Entertainment">Entertainment</option>
            <option value="javaScript">javaScript</option>
            <option value="JQuery">JQuery</option>
            <option value="Medical Sciences">Medical Sciences</option>
            <option value="Nodejs-express">Nodejs-express</option>
           <option value="News">News </option>
            <option value="Engineering">Engineering</option>
            <option value="Science">Science</option>
           <option value="Sociology">Sociology</option>
            <option value="Maths">Maths</option>
            <option value="GK">General Knowledge</option>
            <option value="History">History</option>
            <option value="Spirituality">Spirituality</option>
            <option value="Physics">Physics</option>
           <option value="Phylosophy">Phylosophy</option>
            <option value="Web Development">Web Technologies</option>


        </select>
    <br>

    <input type=text placeholder="Question title" id=question_title cols=60 rows =1 maxlength=40 class="black form-control"><br>

    <textarea placeholder="Your question" id=your_question cols=40 rows =6 maxlength=2000 class="black form-control" ng-model="yr_question"></textarea><br>
    <span class=white>
          <hr>
          <span maxlength=25>{{yr_question}}</span>
          <hr>
    </span>
    <input type=button id=submit_btn class=" btn btn-success white" value="Post your question">
    </div>

    </div>

    <div class=col-md-4 >

        

          <h2 class=white>Recent questions </h2><br>
          <span id = recent_questions class=white></span>

</div>
</div>
</div>

</div>

    <div id=footer>
    <span class=white>Site Owner & developer: Ashutosh Singh, U.P., India<br>
    Contact information:</span> <a href="mailto:webwithjs@gmail.com" class=hyperlinks>Send me a letter</a>
    </div>

</div>
</div>
    
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


                                
<script type="text/javascript">


    window.onload=function() {
    var loggedIn_user = Cookies.get('user_name');
        console.log(loggedIn_user);
        if(loggedIn_user!==undefined){
        document.getElementById("sign_out").innerHTML='<a href="/logout.html" >'+'SIGNOUT'+'</a>';
        //document.getElementById("sign_in").innerHTML='';
        document.getElementById("welcome_msg").innerHTML="<a href=''>" + "Hello, " + "<span style=color:blue>"+ loggedIn_user +"</span>"+"</a>";
        document.getElementById("sign_in_body").innerHTML= "<ul class=list-group>"+"<li class=list-group-item >" + "<span class= black text-medium>"+ " Welcome ! you may"+"</span>" + "</li>" + "<li class=list-group-item >" + " <a href='/subjects.html' >"+"<span class=black text-medium>"+"Answer questions"+"</span>"+"</a>"+"</li>"+"<li class=list-group-item black>"+"<span class=black text-medium>"+" OR "+"</span>"+"</li>"+"<li class=list-group-item >"+"<span class=black text-medium>"+" Ask questions"+"</span>"+"</li>"+"</ul>";
       }
        else{
        document.getElementById("sign_out").innerHTML='';
        //document.getElementById("sign_in").innerHTML='<a href="/">'+''+'</a>';
        document.getElementById("welcome_msg").innerHTML='';
        }


    var request = new XMLHttpRequest();
    var orderedQuestions;

     var recent_questions = document.getElementById('recent_questions');
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {

               // console.log(this.responseText); // returns Arrray of Objects
               var content = '<ol class=left>';
                 orderedQuestions=JSON.parse(this.responseText);
           console.log(orderedQuestions);
           var list= orderedQuestions.result;
           //console.log(list);

           var l = list.length;
           console.log(l-1);
            console.log("Total no. of questions = "+(l-1));


                   for(var i =(l-1); i>=(l-10); i--)
                   { content+=

                   "<li>"+
                    "<span style=color:white>"+(list[i])[3]+"</span>"+ " :"+"<a href=answersheet/"+(list[i])[0]+">"+(list[i])[6]+"</a>"+
                    "<span style=color:#fff380>"+" "+(list[i])[2]+"</span>"+
                    "</li>";

                    }

                recent_questions.innerHTML = content;
            }
           else {
                recent_questions.innerHTML='Please wait ...loading recent questions';
                }
        };
    };

    console.log(Cookies.get('user_id'));
    console.log(Cookies.get('user_name'));

    request.open('POST', " https://data.veejay84.hasura-app.io/v1/query ", true);
   request.setRequestHeader('Content-type','application/json');
   request.send(JSON.stringify({type:"run_sql",args:{sql:"select * from ask_question order by created_date"}}));
   recent_questions.innerHTML='loading data...';
};

</script>



<script type="text/javascript">

                                    
    var user_id;
    var username;
    var user_id_cookie;
    var user_name_cookie;
    var login_btn = document.getElementById("login_btn");

    var error_msg = document.getElementById("error_msg");
    login_btn.onclick= function()
{    var requestObject1= new XMLHttpRequest();

        requestObject1.onreadystatechange= function()
{
              if (requestObject1.readyState===4){

                     if( requestObject1.status===200)
                    {
                    var welcome_msg = document.getElementById("welcome_msg");
                    welcome_msg.innerHTML='<a href="#">'+ "Hello, " + " " +"<span style=color:blue>"+ username+"</span>"+'</a>';
                    document.getElementById("sign_in_body").innerHTML= "<ul class=list-group>"+"<li class=list-group-item >"+"<span class =black text-medium>"+ " Welcome ! you may"+"</span>" + "</li>" + "<li class=list-group-item >" + " <a href='/subjects.html' >"+"<span class=black text-medium>"+"Answer questions"+"</span>"+"</a>"+"</li>"+"<li class=list-group-item black>"+"<span class=black text-medium>"+" OR "+"</span>"+"</li>"+"<li class=list-group-item >"+"<span class=black text-medium>"+" Ask questions"+"</span>"+"</li>"+"</ul>";
                    //document.getElementById("sign_in").innerHTML='';
                    document.getElementById("sign_out").innerHTML='<a href="/logout.html">'+'SIGNOUT'+'</a>';
                    user_id = JSON.parse(this.responseText).hasura_id;
                    console.log(this.responseText);    // returns JSON object
                    console.log("user_id = "+user_id); // user_id = 8

                    Cookies.set('user_id', user_id);
                    Cookies.set('user_name', username);


                    }
                    else
                    {
                    document.getElementById("error_msg").innerHTML="<h5>"+"Invalid username or password "+"</h5>";
                    document.getElementById("login_btn").value='Sign In ';
                    }
           }
}


     username= document.getElementById("username").value;
    var password= document.getElementById("password").value;

    requestObject1.open('POST', " https://auth.veejay84.hasura-app.io/login ", true);
    requestObject1.withCredentials=true;
    requestObject1.setRequestHeader('Content-type','application/json');
    requestObject1.send(JSON.stringify({username:username,password:password}));
    document.getElementById("login_btn").value="Signing-in...";

};
</script>

<script type="text/javascript">
                        

   var submit_btn= document.getElementById("submit_btn");

   submit_btn.onclick=function()
{   var request = new XMLHttpRequest();
        request.onreadystatechange=function()
        {
            if(request.readyState===XMLHttpRequest.DONE && request.status===200)
            {

                   setTimeout(newQuestionUpdate,2000);
                   document.getElementById("submit_btn").value="Great ! ask more";
            }
            else
            {
                    document.getElementById("submit_btn").value="Sign in/Sign up";

            }

        }
        var subject_category   = document.getElementById("sub_category").value;
        var your_question = document.getElementById("your_question").value;
        var question_title = document.getElementById("question_title").value;
        user_id_cookie=Cookies.get('user_id');
        user_name_cookie=Cookies.get('user_name');
        var user_id_cookie_int = parseInt(user_id_cookie);
        console.log(subject_category);
        console.log(your_question);
        console.log(question_title);
        console.log(user_id_cookie_int);
        console.log(user_name_cookie);

        request.open('POST', "https://data.veejay84.hasura-app.io/v1/query",true);
        request.withCredentials=true;
        request.setRequestHeader('Content-type','application/json');
        request.setRequestHeader('Authorization','Bearer');
        request.send(JSON.stringify({type:"insert",args:{table:"ask_question", objects:[{user_id:user_id_cookie_int,user_name:user_name_cookie,subject_category:subject_category, your_question:your_question, question_title:question_title}]}}));
        document.getElementById("submit_btn").value= "Posting...";




};

function newQuestionUpdate(){
        var request1 = new XMLHttpRequest();
        var orderedQuestions;
        var recent_questions = document.getElementById('recent_questions');
        request1.onreadystatechange = function () {
        if (request1.readyState === XMLHttpRequest.DONE) {
            if (request1.status === 200) {

               var content = '<ol class=left>';
                 orderedQuestions=JSON.parse(this.responseText);
           console.log(orderedQuestions);
           var list= orderedQuestions.result;
           console.log(list);

           var l = list.length;
           console.log(l-1);
            console.log("Total no. of questions = "+(l-1));

                   for(var i =(l-1); i>=(l-10); i--)
                   { content+=

                   "<li>"+
                    "<span style=color:white>"+(list[i])[3]+"</span>"+ " :"+"<a href=answersheet/"+(list[i])[0]+">"+(list[i])[6]+"</a>"+
                    "<span style=color:#fff380>"+" "+(list[i])[2]+"</span>"+
                    "</li>";

                    }

                recent_questions.innerHTML = content;
            }
           else {
                recent_questions.innerHTML='Please wait ...loading recent questions';
                }
        };
    };


    request1.open('POST', " https://data.veejay84.hasura-app.io/v1/query ", true);
   request1.setRequestHeader('Content-type','application/json');
   request1.send(JSON.stringify({type:"run_sql",args:{sql:"select * from ask_question order by created_date"}}));
   recent_questions.innerHTML='loading data...';

}

</script>


<script type="text/javascript">

var d =new Date();
   var date_time= d.toDateString();
   document.getElementById("date").innerHTML=date_time;

function newPassword(){
document.getElementById("forgotPassword").innerHTML="<h4>"+'Signup and create a new account '+"</h4>";
}

</script>
<script src=/js.cookie.js></script>
</body>


===========LATEST UPDATES TO 5.1 SCREEN 2 ( ON 12-07-2017)=============
   WITH ENHANCED FEATURE
        WHICH LISTS UNANSWERED QUESTIONS SEPERATELY
                                       FROM    ANSWERED    QUESTIONS
=====================================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>State of the Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/main.css" rel="stylesheet" />

</head>

<body class=scroll>

<nav class="navbar navbar-default container">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">State-of-the-Art</a>
    </div>
    <ul class="nav navbar-nav">
      <li ><a href="/">Home</a></li>
      <li class="active"><a href="/subjects.html">QUESTIONS</a></li>
     <li id="sign_in"><a href="/">SIGNIN/SIGNUP</a></li>
    <li id="welcome_msg"></li>
     
    <li ><a id=date href="#"></a></li>
    <li ><a href="https://hasura.io/" target=_blank>powered by : Hasura</a></li>
    <li id="sign_out"></li>
    </ul>
</div>
</nav>

<div class="jumbotron text-center container">

        

<div id=header>
<h2>Click on a question to answer it</h2>

</div>
<div class="container">

<div class="col-md-4">
<h2>Unanswered questions</h2>
<span id =all_questions1 class=white>
</div>
<div class="col-md-4">
<h2> Answered questions</h2>
<span id =all_questions2 class=white>
</div>
<div class="col-md-4">
<h2> Answered questions</h2>
<span id =all_questions3 class=white>
</div>

</div>

<div id=footer>
    <span class=white>Site Owner & developer: Ashutosh Singh, U.P., India<br>
    Contact information:</span> <a href="mailto:webwithjs@gmail.com" class=hyperlinks>Send me a letter</a>
    <a href='https://stackoverflow.com/users/7394522/ashutosh-k-singh' target=_blank>Stack</a>    
    <a href='http://ashutosh-hasura.blogspot.in/' target=_blank>Blog</a>   
    <a href='https://github.com/internetadvancedsolutions' target= _blank>Git</a>   
</div>

</div>

      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript">
        window.onload=function()
{


        var user_name = Cookies.get('user_name');
        console.log(user_name);
        if(user_name!==undefined){
        document.getElementById("sign_out").innerHTML='<a href="/logout.html">SIGNOUT</a>';
        document.getElementById("sign_in").innerHTML='';
        document.getElementById("welcome_msg").innerHTML="<a href=''>"+"Hello, " + " " +"<span style=color:blue>"+ user_name+"</span>"+"</a>";;
        }
        else{
        document.getElementById("sign_out").innerHTML='';
        document.getElementById("sign_in").innerHTML='<a href="/">SIGNIN/SIGNUP</a>';
        document.getElementById("welcome_msg").innerHTML="";
        }


    var request = new XMLHttpRequest();

    var all_questions1 = document.getElementById('all_questions1');
    var all_questions2 = document.getElementById('all_questions2');
    var all_questions3 = document.getElementById('all_questions3');
    request.onreadystatechange = function ()
    {
        if (request.readyState === XMLHttpRequest.DONE)
        {
            if (request.status === 200)
            {
                var content1 = '<ol class=left>';
                var content2 = '<ol class=left>';
                var content3 = '<ol class=left>';

                 var orderedQuestions = JSON.parse(this.responseText);
                var questions = orderedQuestions.result;
                console.log(questions);
                 console.log((questions[18])[2]);
                console.log(questions.length-1);
                for (var i= (questions.length)-1; i >=1; i--)
                {
                    //var time= new Date(questions[i].created_date);
                    content1 += "<li>"+
                    "<span style=color:white>"+(questions[i])[3]+" </span>"+" : "+"<a href=answersheet/"+(questions[i])[0]+">"+(questions[i])[6] +"..."+"</a>"+
                    "<span style=color:#fff380>"+" "+(questions[i])[2]+"</span>"+
                    "</li>";
                }

                all_questions1.innerHTML = content1;

            }
            else{
                    all_questions2.innerHTML = 'Refresh page';
            }


        }

    }


    request.open('POST', " https://data.veejay84.hasura-app.io/v1/query ", true);
    request.setRequestHeader('Content-type','application/json');
    request.send(JSON.stringify({type:"run_sql",args:{sql:"select * from ask_question where question_id not in (select answer2_question_id from your_answer) order by created_date"}}));
    all_questions2.innerHTML ='loading data...';

    var request1 = new XMLHttpRequest();
    request1.onreadystatechange = function ()
    {

        if (request1.readyState === XMLHttpRequest.DONE)
        {
            if (request1.status === 200)
            {
                var content1 = '<ol class=left>';
                var content2 = '<ol class=left>';
                var content3 = '<ol class=left>';

                 var orderedQuestions = JSON.parse(this.responseText);
                var questions = orderedQuestions.result;
                console.log(questions);

                 console.log((questions[18])[2]);
                console.log(questions.length-1);


                for ( var j= (questions.length)-1; j >=(questions.length)-40; j--)
                {
                    //var time= new Date(questions[i].created_date);
                    content2 += "<li>"+
                    "<span style=color:white>"+(questions[j])[3]+"</span>"+" : "+"<a href=answersheet/"+(questions[j])[0]+">"+(questions[j])[6]+"..."+" </a>"+
                    "<span style=color:#fff380>"+" "+ (questions[j])[2]+"</span>"+
                    "</li>";
                }

                all_questions2.innerHTML = content2;

                for (var k=(questions.length)-41; k >=1; k--)
                {
                    //var time= new Date(questions[k].created_date);
                    content3 += "<li>"+
                    "<span style=color:white> "+(questions[k])[3]+" </span>"+" : "+"<a href=answersheet/"+(questions[k])[0]+">"+(questions[k])[6]+"..."+" </a>"+
                    "<span style=color:#fff380>"+" "+ (questions[k])[2]+"</span>"+
                    "</li>";
                }

                all_questions3.innerHTML = content3;

            }
            else{
                    all_questions2.innerHTML = 'Refresh page';
            }


        }

    }


    request1.open('POST', " https://data.veejay84.hasura-app.io/v1/query ", true);
    request1.setRequestHeader('Content-type','application/json');
    request1.send(JSON.stringify({type:"run_sql",args:{sql:"select * from ask_question where question_id in (select distinct answer2_question_id from your_answer) order by created_date"}}));
    all_questions2.innerHTML ='loading data...';
};
        </script>
        <script type="text/javascript">var d =new Date();
    var date_time= d.toDateString();
    document.getElementById("date").innerHTML=date_time;</script>
        <script type="text/javascript" src=/js.cookie.js></script>
</body>
</html>

=========PREVIOUS UPDATES TO 5.1 SCREEN 2==( on 29/06/2017)===============

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>State of the Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/main.css" rel="stylesheet" />

</head>

<body class=scroll>

<nav class="navbar navbar-default container">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">State-of-the-Art</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Home</a></li>
      <li><a href="/subjects.html">QUESTIONS</a></li>
     <li id="sign_in"><a href="/">SIGNIN/SIGNUP</a></li>
   <li id="welcome_msg"></li>
     
   <li ><a id=date href="#"></a></li>
   <li ><a href="https://hasura.io/" target=_blank>powered by : Hasura</a></li>
   <li id="sign_out"></li>
    </ul>
</div>
</nav>

<div class="jumbotron text-center container">

       

<div id=header>
<h2>Click on a question to answer it</h2>

</div>
<div class="container">

<div class="col-md-4">
<span id =all_questions1 class=white>
</div>
<div class="col-md-4">
<span id =all_questions2 class=white>
</div>
<div class="col-md-4">
<span id =all_questions3 class=white>
</div>

</div>

<div id=footer>
   <span class=white>Site Owner & developer: Ashutosh Singh, U.P., India<br>
    Contact information:</span> <a href="mailto:webwithjs@gmail.com" class=hyperlinks>Send me a letter</a>
</div>

</div>

      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
       <script type="text/javascript">
       window.onload=function()
{


       var user_name = Cookies.get('user_name');
       console.log(user_name);
       if(user_name!==undefined){
       document.getElementById("sign_out").innerHTML='<a href="/logout.html">SIGNOUT</a>';
       document.getElementById("sign_in").innerHTML='';
       document.getElementById("welcome_msg").innerHTML="<a href=''>"+"Hello, " + " " +"<span style=color:blue>"+ user_name+"</span>"+"</a>";;
       }
       else{
       document.getElementById("sign_out").innerHTML='';
       document.getElementById("sign_in").innerHTML='<a href="/">SIGNIN/SIGNUP</a>';
       document.getElementById("welcome_msg").innerHTML="";
       }


    var request = new XMLHttpRequest();

   var all_questions1 = document.getElementById('all_questions1');
   var all_questions2 = document.getElementById('all_questions2');
   var all_questions3 = document.getElementById('all_questions3');
    request.onreadystatechange = function ()
   {
        if (request.readyState === XMLHttpRequest.DONE)
       {
            if (request.status === 200)
           {
                var content1 = '<ol class=left>';
               var content2 = '<ol class=left>';
               var content3 = '<ol class=left>';

                 var orderedQuestions = JSON.parse(this.responseText);
               var questions = orderedQuestions.result;

                 //console.log((questions[18])[2]); // 5
                for (var i= (questions.length)-1; i >=(questions.length)-40; i--)
               {
                   //var time= new Date(questions[i].created_date);
                    content1 += "<li>"+
                    "<span style=color:white>"+(questions[i])[3]+" </span>"+" : "+"<a href=answersheet/"+(questions[i])[0]+">"+(questions[i])[6] +"</a>"+
                   "<span style=color:#fff380>"+" "+(questions[i])[2]+"</span>"+
                    "</li>";
                }

                all_questions1.innerHTML = content1;

               for ( var j= (questions.length)-41; j >=(questions.length)-87; j--)
               {
                   //var time= new Date(questions[i].created_date);
                    content2 += "<li>"+
                    "<span style=color:white>"+(questions[j])[3]+"</span>"+" : "+"<a href=answersheet/"+(questions[j])[0]+">"+(questions[j])[6]+" </a>"+
                   "<span style=color:#fff380>"+" "+ (questions[j])[2]+"</span>"+
                    "</li>";
                }

                all_questions2.innerHTML = content2;

               for (var k=(questions.length)-88; k >=1; k--)
               {
                   //var time= new Date(questions[k].created_date);
                    content3 += "<li>"+
                    "<span style=color:white> "+(questions[k])[3]+" </span>"+" : "+"<a href=answersheet/"+(questions[k])[0]+">"+(questions[k])[6]+" </a>"+
                   "<span style=color:#fff380>"+" "+ (questions[k])[2]+"</span>"+
                    "</li>";
                }

                all_questions3.innerHTML = content3;
           }
           else{
                   all_questions2.innerHTML = 'Refresh page';
           }


        }

   }


    request.open('POST', " https://data.veejay84.hasura-app.io/v1/query ", true);
   request.setRequestHeader('Content-type','application/json');
   request.send(JSON.stringify({type:"run_sql",args:{sql:"select * from ask_question order by created_date"}}));
   all_questions2.innerHTML ='loading data...';
};
       </script>
       <script type="text/javascript">var d =new Date();
   var date_time= d.toDateString();
   document.getElementById("date").innerHTML=date_time;</script>
       <script type="text/javascript" src=/js.cookie.js></script>
</body>
</html>

===============LATEST UPDATE TO LOGOUT PAGE==(29/06/2017)=======

<!DOCTYPE html>
<html lang="en">
<head>

<title>State of the Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="/main.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>


</head>
<body class=scroll>

<nav class="navbar navbar-default container">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">State-of-the-Art</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Home</a></li>
      <li><a href="/subjects.html">QUESTION</a></li>
      <li><a href="/">SIGNIN/SIGNUP</a></li>
      
    <li ><a id=date href="#"></a></li>
    <li ><a href="https://hasura.io/">powered by : Hasura</a></li>
    </ul>
</div>
</nav>
<div class="jumbotron text-center container">

   <div id=header>
    <h2 id = msg>Thanks for contributing !<span id=date ></h2>
</div>


<pre>


<span class=center id=logout_msg>wait something is coming up...</span>

</pre>


    <div id=footer>
    <span class=white>Site Owner & developer: Ashutosh Singh, U.P., India<br>
    Contact information:</span> <a href="mailto:webwithjs@gmail.com" class=hyperlinks>Send me a letter</a>
    </div>
</div>

<script>

    // var logout_btn = document.getElementById("logout_btn");

    //logout_btn.onclick=function()
    window.onload=function()
{//var random = Math.floor((Math.random() * 10) + 1);
                var request= new XMLHttpRequest();
        request.onreadystatechange= function()
        {
              if(request.readyState===XMLHttpRequest.DONE && request.status===200)
          {

            setTimeout(getQoute,1000);
            setTimeout(NavigateToHome, 6000);


            }

          else
        {
        document.getElementById("logout_msg").value ="JSON.parse(this.responseText).message";
        }

        }



    Cookies.remove('user_id');
    Cookies.remove('user_name');

    request.open('GET'," https://auth.veejay84.hasura-app.io/user/logout ", true);
    request.withCredentials=true;
    request.send(null);
    //document.getElementById("logout_btn").value="Please wait...";

   };


   function NavigateToHome() {
           location.href = "/";
       }

function getQoute()
{
                var request1= new XMLHttpRequest();
        request1.onreadystatechange= function()
        {
              if(request1.readyState===XMLHttpRequest.DONE && request1.status===200)
          {

            var Qoute = ((JSON.parse(request1.responseText))[0]).qoute;
            console.log((request1.responseText));
            console.log(JSON.parse(request1.responseText));
            console.log(((JSON.parse(request1.responseText))[0]).qoute);
            console.log((request1.responseText).qoute);
            console.log(Qoute);
            document.getElementById("logout_msg").innerHTML = "<span class=black text-large bold>"+" This is for you "+"</span>"+"<br>"+"<br>"+
            "<div style=text-align:center>"+ Qoute + "</div>";

            }

          else
        {
        document.getElementById("logout_msg").value ="JSON.parse(this.responseText).message";
        }

        }

    var random = Math.floor((Math.random() * 20) + 1);
    console.log(random);
    request1.open('POST'," https://data.veejay84.hasura-app.io/v1/query ", true);
    request1.setRequestHeader('Content-type','application/json');
    request1.send(JSON.stringify({type:"select",args:{table:"qoutes", columns:["qoute"], where:{"qoute_id":random}}}));
    };



</script>
<script>
var d =new Date();
    var date_time= d.toDateString();
    document.getElementById("date").innerHTML=date_time;
</script>
    
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src=/js.cookie.js></script>

</body>
</html>

=================LATEST UPDATE SIGN UP PAGE ON 29/06/2017==============
<!DOCTYPE html>
<html lang="en">
<head>

<title>State of the Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/main.css" rel="stylesheet" />

</head>

<body class=scroll>
<nav class="navbar navbar-default container">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">State-of-the-Art</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Home</a></li>
      <li><a href="/subjects.html">QUESTIONS</a></li>
     <li><a href="/">SIGNIN/SIGNUP</a></li>
     
    <li ><a id=date href="#"></a></li>
    <li ><a href="https://hasura.io/">powered by : Hasura</a></li>
    </ul>
</div>
</nav>

<div class="jumbotron text-center container">

    <div id=header>
    <h2>Sign Up </h2>
    </div>

    <div id=content>
    <pre id = pre class=bold>
<label for="username"></label>
<input class="form-control" type=text id=username placeholder="Choose a username">
<label for="password"></label>
<input class="form-control" type=password id=password placeholder="Password:minimum 8 chars">
<span id=error_msg></span>
<input type=button value="Sign up" class="btn btn-success" id=signup_btn>
    </pre>
    </div>

    <div id=footer>
    <span class=white>Site Owner & developer: Ashutosh Singh, U.P., India<br>
    Contact information:</span> <a href="mailto:webwithjs@gmail.com" class=hyperlinks>Send me a letter</a>
    </div>
<script>

    var signup_btn = document.getElementById("signup_btn");

    signup_btn.onclick= function(){
   var request= new XMLHttpRequest();

    request.onreadystatechange= function(){

    if(request.readyState===XMLHttpRequest.DONE){

        if(request.status===200)
        {
                document.getElementById("pre").innerHTML= "<h3>"+" Welcome "+"<span style=color:blue>" + username + "</span>" + " sign-up success ! sign in using your credentials... " + "</h3>";
                setTimeout(NavigateToHome, 3000);
            }
        else
        {
            document.getElementById("error_msg").innerHTML= "Username is already taken/password too short "+"<br>";
            document.getElementById("signup_btn").value= "Sign up";
        }
     }

}
    var username= document.getElementById("username").value;
    var password= document.getElementById("password").value;
    var signup=document.getElementById("signup_btn");
    request.open('POST', " https://auth.veejay84.hasura-app.io/signup", true);
    request.setRequestHeader('Content-type','application/json');
    request.send(JSON.stringify({username:username,password:password}));
    signup_btn.value="Signing-up...";


};



</script>
<script>
var d =new Date();
    var date_time= d.toDateString();
    document.getElementById("date").innerHTML=date_time;

function NavigateToHome() {
           location.href = "/";
       }
</script>

    
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
</body>

================LATEST UPDATE TO MAIN.CSS 0N 29/06/2017=================

.jumbotron {
background:#6d7b8d; //blue Gray 98afc7 ; light slate grey 6d7b8d
color: white;
padding-bottom: 80px; }
.jumbotron .btn-primary {
    background: #e5e4e2;
    border-color: #e54ee2; }
    .jumbotron .btn-primary:hover {
      background: white; }
.jumbotron p {
    color: white;
    max-width: 75%;
    margin: 1em auto 2em; }
.navbar + .jumbotron {
    margin-top: -20px; }
.jumbotron .lang-logo {
    display: block;
    background: #B01302;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: auto;
    border: 2px solid white; }
    .jumbotron .lang-logo img {
      max-width: 100%; }

    li {
   color:#848482;
}

    textarea {
        color: 00ffff
    }

   li {   color:white;
    }

    body {
    font-family: Times New Roman, Times, serif , Arial, Helvetica, sans-serif, Verdana, Geneva ;
}

    ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

    .siblings * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

   div#header {
       display:block;
       background-color:#e77471; //light coral

   }

div#answer {
       display:block;
       background-color:#ccceee;

   }
   h5,h4,h2 {
       color:white;
   }

   table {
    display: table;
    border-spacing: 15px;
       border:solid white;
}

   div#footer {
       display:block;
       background-color:#e77471;
   }

.hyperlinks1 {
       text-decoration:none;
       color:black;
   }

.hyperlinks2 {
       text-decoration: underline;
       color:black;
   }


   .hyperlinks {
       text-decoration:none;
       color:white;
   }

   .white {
       color:white;
   }

   .blue {
       color:blue;
   }

.green {
       color:green;
   }

   .black, b {
       color:black;
   }

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.text-big {
    font-size: 400%;
}

.text-medium{
    font-size:200%;
}

.text-table{
    font-size:150%;
}

.bold {
    font-weight: bold;
}

.img-medium {
    height: 150px;

}

.fontcolor_white {
    color:white;
}

u {
    text-decoration: underline;
}

scroll {
    width: 1024px;
         height: 768px;
    overflow: scroll;
}

a {
    color:white;
}

a:hover, a:active {
    color:#fff380;
    //font-size:150%;
    font-size:110%;transition: font-size 0.45s ease-in-out;

}

a:visited {
    color:#ffdfdd;
}

                                                       YOUR FEEDBACK SOLICITED

Codelybrary

I am also active at:

Thursday, June 15, 2017

Complete code of State-of-the Art web application.

No comments:

Post a Comment

इश्क में ग़ैरत-ए-जज़्बात ने रोने ना दिया - सुदर्शन फ़ाकिर

Search This Blog