Random Can! From Flickr (would prefer google?)

index.html

<div class="flex">
  <h1>B<span class="lighterthanlight">/</span><img class="iAmACan" src="https://i.pinimg.com/564x/88/a9/c5/88a9c5e51edf59bf39f425e37349aa1a.jpg" /></h1>
</div>

random-can-from-flickr-would-prefer-google.markdown

Random Can! From Flickr (would prefer google?)

A Pen by Kristian Bjørnard on CodePen.

License.

script.js

// https://stackoverflow.com/questions/32615926/use-javascript-to-get-a-random-image-from-google-images#32616807

// var keyword = "can";

// $(document).ready(function() {
//   $.getJSON(
//     "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
//     {
//       tags: keyword,
//       tagmode: "any",
//       format: "json"
//     },
//     function(data) {
//       var rnd = Math.floor(Math.random() * data.items.length);

//       var image_src = data.items[rnd]["media"]["m"].replace("_m", "_b");

//       $("body").css("background-image", "url('" + image_src + "')");
//     }
//   );
// });

//http://jsfiddle.net/6gY83/148/

function getPicture(tags, cb) {
  var apiKey = "42d35386baf9e7a70ddd682b4d8930e0"; // replace this with your API key

  // get an array of random photos
  $.getJSON(
    "https://api.flickr.com/services/rest/?jsoncallback=?",
    {
      method: "flickr.photos.search",
      tags: tags,
      api_key: apiKey,
      format: "json",
      nojsoncallback: 1,
      per_page: 100 // you can increase this to get a bigger array
    },
    function(data) {
      // if everything went good
      if (data.stat == "ok") {
        // get a random id from the array
        var photo =
          data.photos.photo[
            Math.floor(Math.random() * data.photos.photo.length)
          ];

        // now call the flickr API and get the picture with a nice size
        $.getJSON(
          "https://api.flickr.com/services/rest/?jsoncallback=?",
          {
            method: "flickr.photos.getSizes",
            api_key: apiKey,
            photo_id: photo.id,
            format: "json",
            nojsoncallback: 1
          },
          function(response) {
            if (response.stat == "ok") {
              var the_url = response.sizes.size[5].source;
              cb(the_url);
            } else {
              console.log(" The request to get the picture was not good : ");
            }
          }
        );
      } else {
        console.log(" The request to get the array was not good :( ");
      }
    }
  );
}

getPicture("aluminum can", function(url) {
  $(".iAmACan").attr("src", url);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

body {
  color: red;
  -webkit-animation: color_morph 20s infinite linear;
	        animation: color_morph 20s infinite linear;
}

@-webkit-keyframes color_morph {
  0% { color: red; }
  15% { color: orange; }
  30% { color: yellow; }
  45% { color: green; }
  60% { color: blue; }
  75% { color: purple; }
  90% { color: magenta; }
  100% { color: red; }
}

@keyframes color_morph {
  0% { color: red; }
  15% { color: orange; }
  30% { color: yellow; }
  45% { color: green; }
  60% { color: blue; }
  75% { color: purple; }
  90% { color: magenta; }
  100% { color: red; }
}

h1 {
  font-size: 15vw;
  font-family: 'Work Sans', sans-serif;
  font-weight: 900;
  text-align: center;
  width: 100%;
  flex: auto;
}

.lighterthanlight { font-weight: 200 !important; }

.flex { 
  display: flex;
  align-items: center;
  justify-items: center;
  text-align: center;
}

html,body,.flex {
  height: 100%;
  width: 100%;
}

.flex * {
  vertical-align: middle;
}

h1 img {
  max-width: 60vw;
}

styles

<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet" />

B/CAN