TheCatAPI: VanillaJS load an image

Loading an image with basic JS

by wchristine

HTML

<head>
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sofia" rel="stylesheet">
</head>
<div id = "title">Generate Random Cat n Dog Images</div>
<button id= "getPic">
Get Other Pictures!
</button>

<div id= "cat">
<div id="image"></div>
<img id="heart"...

CSS

#title {
  font-size: 50px;
  font-family: 'Sofia', cursive;
}

body {
  background: #ADD8E6;
}

img {
  width: 300px;
  border: 2px black solid;
}

 #dogPic {
  width: 300px;
  /* float: left; */
}

#getPic {
margin-left: 5%;
font-family: 'Fredericka the Great', cursive;
background: black;
color: white;
height: 50px;
}

#getPic2 {
  margin-left: 40%;
  font-family: 'Fredericka the Great', cursive;
  background: black;
  color: white;
  height: 50px;
}

#cscore {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: black 2px solid;
  background: white;
  font-size: 40px;
  text-align: center;
}

#dscore {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: black 2px solid;
  background: white;
  font-size: 40px;
  text-align: center;
}

#heart {
  height: 20px;
  width: 20px;
  position: absolute;
  left: 280px;
  display: none;
}

#dheart {
  height: 20px;
  width: 20px;
  position: absolute;
  left: 280px;
  display: none;
}

#cat{
  position: relative;
}

#dog{
  position: relative;
}

JavaScript

var catScore= 0;
 var dogScore=0;
 var catlike = document.getElementById("heart");
 var doglike = document.getElementById("dheart");
 var catPoints = document.getElementById("cpoints");
 var dogPoints = document.getElementById("dpoints")
 
function ajax_get(url, callback) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      console.log('responseText:' + xmlhttp.responseText);
      try {
        var data = JSON.parse(xmlhttp.responseText);
      } catch (err) {
        console.log(err.message + " in " + xmlhttp.responseText);
        return;
      }
      callback(data);
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

document.getElementById("getPic").onclick = function() {
cpoints = Math.floor(Math.random()*5)
dpoints = Math.floor(Math.random()*5)
catScore = catScore+cpoints
dogScore = dogScore+dpoints

 ajax_get('https://api.thecatapi.com/v1/images/search?size=full', function(data) {
  var html = '<img src="' + data[0]["url"] + '">';
  document.getElementById("image").innerHTML = html;
  if(catScore >= 100){
  	document.getElementById("cscore").style.size = "20px";
  }
  var catString  = " " + catScore.toString();
  document.getElementById("cscore").innerHTML = catString;
  catPoints.innerHTML = cpoints
  catlike.style.display = "inline"
  
  ajax_get('https://dog.ceo/api/breeds/image/random', function(data) {
  var html = '<img src="' + data["message"] + '">';
  document.getElementById("dogPic").innerHTML = html;
  var dogString = " " + dogScore.toString();
  document.getElementById("dscore").innerHTML = dogString;
  dogPoints.innerHTML = dpoints
  doglike.style.display = "inline"
 });
});

}
catlike.onclick = function (){
	catScore +=1
  var catString  = " " + catScore.toString();
  document.getElementById("cscore").innerHTML = catString;

}
doglike.onclick = function (){
	dogScore +=1
  var dogString  = " " + dogScore.toString();
 ...