$[\{"$breed$"$:"abyssinian","url":"http:$\backslash /\backslash /20\mathrm{.}50\mathrm{.}199\mathrm{.}192\backslash /$catimages$\backslash /$abyssinian$.$png$"\},\{"$breed$"$:"American$-$Bobtail","url":"http:$\backslash /\backslash /20\mathrm{.}50\mathrm{.}199\mathrm{.}192\backslash /$catimages$\backslash /$American$-$Bobtail$-01.$png$"\},\{"$breed$"$:"american$-$curl","url":"http:$\backslash /\backslash /20\mathrm{.}50\mathrm{.}199\mathrm{.}192\backslash /$catimages$\backslash /$american$-$curl$-$detail$-$scaled.png$"\},\{"$breed$"$:"balinese","url":"http:$\backslash /\backslash /20\mathrm{.}50\mathrm{.}199\mathrm{.}192\backslash /$catimages$\backslash /$balinese$-$card$-$large.png$"\},\{"$breed$"$:"bengal","url":"http:$\backslash /\backslash /20\mathrm{.}50\mathrm{.}199\mathrm{.}192\backslash /$catimages$\backslash /$bengal$-$card$-$large.png$"\},\{"$breed$"$:"birman","url":"http:$\backslash /\backslash /20\mathrm{.}50\mathrm{.}199\mathrm{.}192\backslash /$catimages$\backslash /$birman$-$card$-$large.png$"\},\{"$breed$"$:"bombay","url":"http:$\backslash /\backslash /20\mathrm{.}50\mathrm{.}199\mathrm{.}192\backslash /$catimages$\backslash /$bombay$-$card$-$large.png$"\}]$Instructions:

$1-$ There are $3$ files, cats.html$,$ ajax$-$utils.js and getcatinfo.js$.$ Copy these $3$ files to your

computer's local disk. $($Note that getcatinfo.js is empty.$)$

$2-$ Open given cats.html file using a browser and inspect the given cats.html file in Visual

Studio Code. At the end when you finish the lab, when "Retrieve the cats" button clicked

it will look like the image shown at the end of the page.

$3-$ You will update just getcatinfo.js$,$ you should not make any changes to other files.

Task $1$:

$1-$ First catInfo.php file located on my Virtual Server Apache root which has IP address

$20\mathrm{.}50\mathrm{.}199\mathrm{.}192.$ You should open this file in Chrome and inspect it$.$

$2-$ catInfo.php file returns cats information from a MySQL table.

$3-$ In getcatinfo.js file;

Add an event listener to "button" element.

The event listener will pass the url of the catInfo.php file to the ajaxUtils

sendgetrequest function and a callback function.

As a first task, inside this callback function print the coming request object on the

console.

Task $2$:

$1-$ You must get each element from the returning array using a loop.

$2-$ If you inspect elements, each element is an object and has two properties.

$3-$ You should create a section inside the div for each element and inside the section create

an image element and h$2$ element.

$4-$ To obtain the figure below create elements inside the section appropriately.

$5-$ At last, add the section to div.

$6-$ Do $2-5$ for each loop iteration.

CENG $361$