Codelybrary: 4.1) App Screen 1 (UI + Backend integration)

Hello all !

My app
My app is powered by hasura

The screen 1 (or homepage) of my app houses
1. Signup/signin
2. Lists some most recent questions
3. Textarea to post your question

my app's screen 1 Homepage

My app's URL: https://app.veejay84.hasura-app.io/

Following are some screenshots of my app's Screen 1

================LAST UPDATED ON 21/06/17==============================

HOME PAGE - SCREEN 1

SIGNUP PAGE (New user signing-up)

AFTER SUCCESSFUL SIGNUP

NEW USER SIGNS-IN

NEW USER SUCCESSFULLY SIGNED-IN

NEW USER POSTING A QUESTION

QUESTION POSTED SUCCESSFULLY AND LIST OF RECENT QUESTIONS UPDATED

========================================================================

CODE OF THIS PAGE

LATEST UPDATE ON 07-07-2017 - With a new feature, allowing a logged-in user to
                                                   CHANGE his PASSWORD
========================================================================

<!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>

==================PREVIOUS UPDATE to 4.1 (ON 23/06/2017)====================

OCTYPE 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"></li>
      <li id="welcome_msg"></li>
      <li id="sign_out"></li>
      <li ><a id=date href="#"></a></li>
      <li ><a href="https://hasura.io/">powered by : Hasura</a></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-basic" 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="hyperlinks1 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="black btn btn-basic" 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=''>" + "WELCOME! " + "<span style=color:blue>"+ loggedIn_user +"</span>"+"</a>";
        document.getElementById("sign_in_body").innerHTML="<h2>"+"Welcome !"+"</h2>"+ " <a href='/subjects.html' class=hyperlinks1>"+"<h2>"+"Answer questions"+"</h2>"+"</a>"+"<h2>"+" OR"+"</h2>" + "<h2>"+ " Ask questions" + "</h2>" ;
       }
        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:#98ff98>"+(list[i])[3]+"</span>"+ " :"+"<a href=answersheet/"+(list[i])[0]+">"+(list[i])[6]+"</a>"+
                    "<span style=color:#fff380>"+" by - "+(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="#">'+ "WELCOME! " + " " +"<span style=color:blue>"+ username+"</span>"+'</a>';
                    document.getElementById("sign_in_body").innerHTML="<h2>"+"Welcome ! "+"</h2>"+" <a href='/subjects.html' class=hyperlinks1>"+"<h2>"+"Answer questions"+"</h2>"+"</a>"+"<h2>"+" OR"+"</h2>"+"<h2>"+" Ask questions"+"</h2>";
                    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 one 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:#98ff98>"+(list[i])[3]+"</span>"+ " :"+"<a href=answersheet/"+(list[i])[0]+">"+(list[i])[6]+"</a>"+
                    "<span style=color:#fff380>"+" by - "+(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>";
}

function alertIt(){
var answer = confirm ("Please click on OK to continue.")
if (answer)
window.location="https://app.veejay84.hasura-app.io/";
}

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

====================FRONT_END CODE OF THIS SCREEN==================

<!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" />
<link rel="icon" href="/logo.gif">
</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"></li>
       <li id="welcome_msg"></li>
      <li id="sign_out"></li>

    </ul>
</div>
</nav>

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

<div id = parent>
<div id=header>
<span class=white >This app is powered by: Hasura </span>                                                                  <span id=date class=white></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>
          <h2 class=white> Recent questions </h2><br>
          <span id = recent_questions class=white></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="Botany">Botany</option>
            <option value="Biology">Biology</option>
           <option value="Computer programming">Computer programming</option>
            <option value="Chemistry">Chemistry</option>
           <option value="Computer Sc. & Engg">Computer Sc. & Engg</option>
           <option value="English">English</option>
            <option value="Medical Sciences">Medical Sciences</option>
            <option value="Engineering">Engineering</option>
           <option value="Science">Science</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="Programming languages">Programming languages</option>

        </select>
   <br>

   <input type=text placeholder="Question title" id=question_title cols=50 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="black btn btn-basic" value="Post your question">
   </div>


   </div>

   <div class=col-md-4 >

          <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-basic" 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 class="hyperlinks1 " style=color:#fff380 href="/signup.html">Sign up</a>
<span id=pre></span>
<br><br>
</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>

                                   
   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="#">'+ "WELCOME! " + " " +"<span style=color:blue>"+ username+"</span>"+'</a>';
                   document.getElementById("pre").innerHTML=`<ul class=pager><li> <a href="/subjects.html" class=hyperlinks1>Answer questions</a></li></ul> `;
                   document.getElementById("login_btn").value='Welcome';
                   document.getElementById("error_msg").innerHTML='';
                   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="Please wait...";

};
</script>

<script>
                       

   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)
           {
                   document.getElementById("submit_btn").value="Posted! ";
           }
           else
           {
                   document.getElementById("submit_btn").value="Sign in/Sign up";
                   //alert("Sign in or 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= "Please wait...";
};
</script>

                               
<script>


   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=''>" + "WELCOME! " + "<span style=color:blue>"+ loggedIn_user +"</span>"+"</a>";
       }
       else{
       document.getElementById("sign_out").innerHTML='';
       document.getElementById("sign_in").innerHTML='<a href="/">'+'SIGNIN/SIGNUP'+'</a>';
       document.getElementById("welcome_msg").innerHTML='';
       }

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

   var recent_questions = document.getElementById('recent_questions');
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {
                var content = '<ul>';
               console.log(this.responseText); // returns Arrray of Objects
                 questions = JSON.parse(this.responseText);
               // console.log(questions); // returns Array of JSON objects
               // console.log(questions[1]);
                 //console.log(questions[0].question_id); // 13
                  console.log("Total no. of questions = "+questions.length);
                for (var i=(questions.length)-1; i >=(questions.length)-6; i--) {
                   var time= new Date(questions[i].created_date);
                    content += `<li>
                    <span style=color:#fff380>${questions[i].subject_category}</span>: <a href="answersheet/${questions[i].question_id}">${questions[i].question_title}</a>
                   <span style=color:#fff380>by  ${questions[i].user_name}</span>  - on ${time.toUTCString()}
                    </li>`;
                }
                content += "</ul>"
                recent_questions.innerHTML = content;
            } else {
                recent_questions.innerHTML='Please wait ...';
            }
        }
    };
   console.log(Cookies.get('user_id'));
   console.log(Cookies.get('user_name'));

    request.open('GET', 'https://data.veejay84.hasura-app.io/v1/template/questionlist', true);
    request.send(null);




};
</script>
<script>

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

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

=================CODE LOGOUT PAGE ======(24/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>Signing-out...</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>

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

            setTimeout(getQoute,1000);


           }

          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 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 =
           "<div style=text-align:center>"+ Qoute + "</div>";

           }

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

        }

   var random = Math.floor((Math.random() * 10) + 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>
===================CODE OF LOGOUT PAGE=====(23/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>
      
    </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>Signing-out...</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 request= new XMLHttpRequest();
        request.onreadystatechange= function()
       {
              if(request.readyState===XMLHttpRequest.DONE && request.status===200)
          {
           document.getElementById("logout_msg").innerHTML =
           "<div style=text-align:center>"+

       "You have gotta dance like there is nobody watching,"+'<br>'+
       "Love like you'll never be hurt,"+'<br>'+
       "Sing like there's nobody listening,"+'<br>'+
       "And live like it's heaven on earth."+
       "</div>";

           }

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

        }


   //making the HTTP request

   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...";

   };

</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>

=====================LAST UPDATE TO SIGN-UP ON 07-07-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/" target=_blank>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">
<label for="email"></label>
<input class="form-control" id=email placeholder="Enter a valid e-mail">
<label for="mobile"></label>
<input class="form-control" id=mobile placeholder="Enter your 10 digit mobile number">
<br>
Fields marked as * are compulsory

<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= "<span style=color:red>"+"Error : "+"</span>"+JSON.parse(this.responseText).message+"<br>";
            document.getElementById("signup_btn").value= "Sign up";
        }
     }

}
    var username1= document.getElementById("username").value;
    var username=username1.trim();
    var password= document.getElementById("password").value;
    var email= document.getElementById("email").value;
    var mobile= document.getElementById("mobile").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,email:email,mobile:mobile}));
    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>

=======================PREVIOUS UPDATE TO SIGN UP (23/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>
     
    </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>" + " please" + " <a href=/ class=hyperlinks2>" + "<kbd>" +" Sign in "+"</kbd>" + "<a/>" + " </h3>";
          }
          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 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>

Codelybrary

I am also active at:

Friday, June 9, 2017

4.1) App Screen 1 (UI + Backend integration)

2 comments:

Sacred Thought

Search This Blog