JSFiddle - React, Tailwind, and code Playground

by Andra Jimenez

HTML

<h3>My Very Catty Final Assignment</h3>

<p>How can anyone resist these charming furballs? I hope you enjoy the gallery as much as I did. </p>

<p>If you want to check out more adorable photos, click <a href = "https://www.flickr.com/search/?q=kittens">here.</a></p>


<div id="placeholder"></div>

CSS

h3{
color:#2795B6;
font-size: 25px; 
text-align: center;
font-family: 'arial';
    
}

img{
display:block;
margin-left:auto;
margin-right: auto;
border-style: solid;
border-width:4px;
border-color:#2795B6;
/*border-color:#2795B6;*/
margin-top: 15px;    
-webkit-box-shadow: 4px 4px 6px 0px rgba(135, 135, 135, 0.75);
-moz-box-shadow:    4px 4px 6px 0px rgba(135, 135, 135, 0.75);
box-shadow:         4px 4px 6px 0px rgba(135, 135, 135, 0.75);
}

p{
text-align:center;
font-family: 'verdana';
padding-left: 10px; 
padding-right: 10px;
font-size:14px;    
}

JavaScript

//Final project FLICKR Version 7


function FlickrPhoto(json) {
    this.photos = json.photos.photo;

}


FlickrPhoto.prototype.toString = function () {
       var output = '';
   
    
    for (var i = 0; i < this.photos.length; i++) {

output = "https://farm" + this.photos[i].farm +".staticflickr.com/" + this.photos[i].server +"/" + this.photos[i].id + "_" + this.photos[i].secret + ".jpg" + "\n";

         var img = document.createElement("img");
img.setAttribute("src", output);
document.body.appendChild(img);
img = document.createElement("img");


    }
return img;

};



var FlickrPhoto = new FlickrPhoto({
    "photos": {
        "page": 1,
            "pages": 172045,
            "perpage": 12,
            "total": "2064529",
            "photo": [{
            "id": "14427815703",
                "owner": "100340878@N05",
                "secret": "7ff4e5660c",
                "server": "3926",
                "farm": 4,
                "title": "En attendant mon mod\u00e8le.",
                "ispublic": 1,
                "isfriend": 0,
                "isfamily": 0
        }, {
            "id": "14220986179",
                "owner": "21641933@N00",
                "secret": "d97cc73afe",
                "server": "2920",
                "farm": 3,
                "title": "LOM crate inspector",
                "ispublic": 1,
                "isfriend": 0,
                "isfamily": 0
        }, {
            "id": "14221029060",
                "owner": "93782583@N02",
                "secret": "0b5b48f430",
                "server": "5239",
                "farm": 6,
                "title": "Dovanojamas gyv\u016bnas",
                "ispublic": 1,
                "isfriend": 0,
                "isfamily": 0
        }, {
            "id": "14406298022",
                "owner": "21109902@N00",
                "secret": "91b6a9e6cb",
                "server": "3859",
                "farm": 4,
                "title": "TIJGER EN ZIJN HUIS",
         ...