5.1 App Screen 2 (UI + Backend integration)

Function of App screen 2:
To retrieve result of a student whose id is entered.

Sections where I used Hasura APIs:
Hasura Data API To retrieve the result of students from Result table of database.

Additional library used
1. Bootstrap
2. Sweet Alert

Web app Screens

Home Screen

click on View Result to go to student login page

Student login page

Just fill the your student ID to view your score

Marks Display (Second major screen of my web app)

Tabular representation of Result

When your result is not prepared by admin

Result of Student id 35 is not prepared

When student Id do not belong to registered student

Student id 100 is not registered

Backend Integration

I have used AJAX -XMLHttpRequest to fetch marks from result table, the basic ajax request I used is shown below:

function pulluser(){
    var request= new XMLHttpRequest(); 
    var x = document.getElementById("displayMarksTable").rows[1].cells;
    request.onreadystatechange= function(){
     if(request.readyState===XMLHttpRequest.DONE && request.status===200){
      var response=JSON.parse(this.responseText);
      
      x[2].innerHTML = Number(response[0].physics);
      x = document.getElementById("displayMarksTable").rows[2].cells;
      x[2].innerHTML = Number(response[0].chemistry);
      x = document.getElementById("displayMarksTable").rows[3].cells;
      x[2].innerHTML = Number(response[0].mathematics);
      x = document.getElementById("displayMarksTable").rows[4].cells;
      x[2].innerHTML = Number(response[0].biology);
      x = document.getElementById("displayMarksTable").rows[5].cells;
      x[2].innerHTML = Number(response[0].english);
      x = document.getElementById("displayMarksTable").rows[6].cells;
      x[2].innerHTML = Number(response[0].computer_science);
      document.getElementById("id").innerHTML=id;
      document.getElementById("remarks").innerHTML=response[0].remarks;
      pulluserinfo();
     }
    }
    request.open('POST', "https://data.cockerel94.hasura-app.io/v1/query", true);
    request.withCredentials=true;
    request.setRequestHeader('Content-type','application/json');
    request.send(JSON.stringify({  type:"select",  args:{    table:"Result",    columns:[ "*" ] , where:{"id":id}}}));
   };
   
   function pulluserinfo(){ 
   
    var request= new XMLHttpRequest(); 
    request.onreadystatechange= function(){
     if(request.readyState===XMLHttpRequest.DONE && request.status===200){
      var response=JSON.parse(this.responseText);
      document.getElementById("name").innerHTML=response[0].name;
     }
    }
    
    request.open('POST', "https://data.cockerel94.hasura-app.io/v1/query", true);
    request.withCredentials=true;
    request.setRequestHeader('Content-type','application/json');
    request.send(JSON.stringify({  type:"select",  args:{    table:"User_Info",    columns:[ "*" ] , where:{"id":id}}}));
   };

Links to my webapp:

Link to my web app

Next: 6.1 App Screen 3 (UI + Backend integration)