Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Marco Kühbauch
Marco Kühbauch
10,099 Points

Ajax Stage 4 Challenge My Solution

I recreated the flickr photo feeder made in this course in pure JavaScript (except the ajax request). I also combined the three buttons and the search form. Any suggestions on how to improve? You can see a working example on CodePen: http://codepen.io/Mkuehb/pen/PNxjpO

// Select all buttons
var btn = document.getElementsByTagName('button');
// Select the form submit
var formSub = document.getElementById('submit');
// Declare animal variable globally, the value will be declared either on clicking a button or using the search form
var animal;
// Declare inputText variable globally
var inputText;

// Loop over the buttons and attach an EventListener to every single one
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', classChange, false);
}

// When a button is clicked, the classChange function is called
function classChange() {
  // Loop over all buttons and remove the selected class
  for (var i= 0; i < btn.length; i++) {
    btn[i].classList.remove('selected');
  }
  // Add the selected class to the clicked button to highlight it
  this.classList.add('selected');
  // Save the buttons text in the animal variable
  animal = this.textContent;
  // Call the function to make the AJAX request and display the photos
  makeAjaxRequest();
}

// When the submit button is clicked
formSub.addEventListener('click', function(e) {
  // Stop the default event
  e.preventDefault();
  // Select the input
  inputText = document.getElementById('search');
  // Select the inputs text value
  var inputTextVal = inputText.value;
  // Save the inputs text in the animal variable
  animal = inputTextVal;
  // Loop over all buttons and remove the selected class
  for (var i= 0; i < btn.length; i++) {
    btn[i].classList.remove('selected');
  }
  // Disable the search input while searching
  inputText.setAttribute('disabled', true);
  // Change the submit buttons text while searching
  formSub.value = 'Searching...';
  // Disable the submit button while searching
  formSub.setAttribute('disabled', true);
  // Call the function to make the AJAX request and display the photos
  makeAjaxRequest();
});

function makeAjaxRequest() {
  // flickr URL
  var flickerAPI = 'https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
  // flickr options
  var flickrOptions = {
    tags: animal,
    format: 'json'
  };
  // function to display the photos
  function displayPhotos(data) {
    // create an unordered list
    var photoHTML = '<ul>';
    // loop over the retrieved items and create a list item with a link & image
    for (var i = 0, photo, n = data.items.length; i < n; i++) {
      photo = data.items[i];
      photoHTML += '<li>';
      photoHTML += '<a href=' + photo.link + '" class="image">';
      photoHTML += '<img src="' + photo.media.m + '"></a></li>';
    }
    photoHTML += '</ul>';
    // add the photos to the div with the id of photos
    var photos = document.getElementById('photos');
    photos.innerHTML = photoHTML;
    if (formSub.hasAttribute('disabled')) {
      // Re-enable the search input while searching
      inputText.removeAttribute('disabled');
      // Change back the submit buttons text while searching
      formSub.value = 'Search';
      // Re-enable the submit button while searching
      formSub.removeAttribute('disabled');
    }
  }
  // Make the AJAX request with jQuery's getJSON
  $.getJSON(flickerAPI, flickrOptions, displayPhotos);
}