AJAX request lesson(Maksi - Vik)

AJAX request lesson

Hello I'am Maksi - Vik.This course will teach you how to API requests using AJAX in JavaScript file.We will make app that gets the results of two football teams.

Now we will set-up our HTML,but I won't tell you that.I will im port Popper.js,jQuery,bootstrap and responsiveVoice.

Now we will add the StyleSheet to our Web Page.

CSS :

                html { 
    background: url(https://images.unsplash.com/photo-1473976345543-9ffc928e648d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOj
 EyMDd9&s=00fce9a43413012361bc9d62f20975cd&auto=format&fi
 t=crop&w=1385&q=80);
    background-size: fill;
}
 .container{
        text-align: center;
        width:400px;
        
        margin-top:auto;
      }
      body{
        background: none;
        color:white;
      }
      .special{
        margin-top :5px;
        margin-bottom :20px;
        font-family: "Montserrat";
      }
      #result{
        color:black;
        
      }
      .card-body {
          font-family: "Montserrat";
      }
      .card {
          border-radius: 32px;
      }
      html { 
  background: url(https://images.unsplash.com/photo-1473976345543-9ffc928e648d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=00fce9a43413012361bc9d62f20975cd&auto=format&fit=crop&w=1385&q=80) no-repeat center center fixed; 
}
input {
    font-family: "Montserrat";
}

Now, we will get the informations from the input fields and we will add the API key.

JS:

    var APIkey='c13063deb023376b60af37d8b7a6149f42810cc349adcb8ca8ff1ba57298e08e';
    var print="";
    var counter=0;
    var flag=true;
    var info ="";
    var sp="";
    var print ="";
    window.onload =function(){ 
    $( "#search").click(function(e){
    e.preventDefault();
    var team1=encodeURI($("#team1").val());
    var team2=encodeURI($("#team2").val());

Now,we will get AJAX request.It contains ajax function,type of the request and on success output.

JS:

            $.ajax({
url:"https://apifootball.com/api/?action=get_H2H&firstTeam="+team1+"&secondTeam="+team2+"&APIkey="+APIkey,
type:"GET",
success: function(a){
   if(a["firstTeam_VS_secondTeam"].length ==0){$("#result").html('No matches found!')}else{
    if(flag){$("#result").html('Result(s) found! Tap/Click "Search" again to proceed.');flag=false;}
   }

We added the GET type.It gets the info in JSON type,then we need to convert i in HTML.The success function represents the output if the request is successful.

Now,we will the request info to our page.

JS:

               $.each(a["firstTeam_VS_secondTeam"],function(key,value){
      counter++;
       info="Championship: "+value['country_name']+"
Stage: "+value['league_name']+"
Match Date: "+value['match_date']+"
Match Status: "+value['match_status']+"
Match Time: "+value['match_time']+"
"+value['match_hometeam_name']+"(Full Time Score) : "+value['match_hometeam_score']+"
"+value['match_awayteam_name']+"(Full Time Score) : "+value['match_awayteam_score'];
       print+='
Match: '+counter+'
'+info+'';
       sp = "Championship: "+value['country_name']+"Stage: "+value['league_name']+"Match Date"+value['match_date']+"Match status: "+value['match_status']+"Match time: "+value['match_time']+value['match_hometeam_name']+"score:"+value['match_hometeam_score']+value['match_awayteam_name']+"score:"+value['match_awayteam_score'];
       responsiveVoice.speak(sp);
     });
}
})
$("#result").html(print);
});

The value method gets a part of the request info.

Here is the full source JS code!

JS:

                //created by |Maksi - Vik|
var APIkey='c13063deb023376b60af37d8b7a6149f42810cc349adcb8ca8ff1ba57298e08e';
    var print="";
    var counter=0;
    var flag=true;
    var info ="";
    var sp="";
    var print ="";
window.onload =function(){ $( "#search").click(function(e){
 e.preventDefault();
  var team1=encodeURI($("#team1").val());
var team2=encodeURI($("#team2").val());
    $.ajax({
url:"https://apifootball.com/api/?action=get_H2H&firstTeam="+team1+"&secondTeam="+team2+"&APIkey="+APIkey,
type:"GET",
success: function(a){
   if(a["firstTeam_VS_secondTeam"].length ==0){$("#result").html('No matches found!')}else{
    if(flag){$("#result").html('Result(s) found! Tap/Click "Search" again to proceed.');flag=false;}
   }
    $.each(a["firstTeam_VS_secondTeam"],function(key,value){
      counter++;
       info="Championship: "+value['country_name']+"
Stage: "+value['league_name']+"
Match Date: "+value['match_date']+"
Match Status: "+value['match_status']+"
Match Time: "+value['match_time']+"
"+value['match_hometeam_name']+"(Full Time Score) : "+value['match_hometeam_score']+"
"+value['match_awayteam_name']+"(Full Time Score) : "+value['match_awayteam_score'];
       print+='
Match: '+counter+'
'+info+'';
       sp = "Championship: "+value['country_name']+"Stage: "+value['league_name']+"Match Date"+value['match_date']+"Match status: "+value['match_status']+"Match time: "+value['match_time']+value['match_hometeam_name']+"score:"+value['match_hometeam_score']+value['match_awayteam_name']+"score:"+value['match_awayteam_score'];
       responsiveVoice.speak(sp);
     });
}
})
$("#result").html(print);
});
$("#clear").click(function(e){
  e.preventDefault();
  $("#result").html("");
  flag=true;
  info ="";
     print ="";
     sp="";
     counter=0;
});}