EventListenerDrills.js

// Write JS code so when a user clicks on one of the 
// thumbnail images, that image should be displayed 
// in the full size image container at the top.

// ********* MY ANSWER ************

$(function() {
  $('.thumbnail').click(function(event) {
    $('.hero, img').attr();
    $('.hero').append(
      $(this.))
  
  });
});

// INCOMPLETE

// QUESTIONS:

// How does .attr() switch the sources?

// SOLUTION

function handleThumbnailClicks() {
  $('.thumbnail').click(function(event) {
    // to execute function listening to when user clicks the img with class 'thumbnail'
    
    var imgSrc = $(event.currentTarget).find('img').attr('src');
    // creates variable that equals the source of that image the event is happening to
    // .find('img') - returns the descendant element'img'
    // .attr('src') - returns/sets the attribute of the 'currentTarget' element
    
    $('.hero img').attr('src', imgSrc);
    // accesses the child element 'img' of element with class 'hero'
    // and sets the 'src' attribute to what 'imgSrc' var equals to
  })
}

$(function() {
  handleThumbnailClicks();
});
// Calls the function

LightbulbToggle.js

// Use event listeners to detect 
// when users click on an element with the .js-lightbulb class. 

// When that happens, the current clicked element should get the class 
// .bulb-on applied to it, and any other elements that previously 
// had the .bulb-on class should have it removed.

// With the CSS styles already in place, this will cause the 
// currently clicked lightbulb to appear to turn on, 
// and any other lit bulbs off.



  
$(function handleBulbClicks() {
  $('.lightbulb').click(function(event) {
    $('.lightbulb').removeClass('bulb-on');
    $(event.currentTarget).addClass('bulb-on');
  });
});

// Note: when adding classes remove the "." so instead of '.bulb-on'
// its just 'bulb-on'

ReturnFizzBuzz.js

// create event listener for when user submits a form
// indicating how high to count

// event should cause the program to create FizzBuzz sequence
// up to number requested by user

// for each element in FizzBuzz sequence, your code should insert
// an element into '.js-results' div that looks like this:

// <div class='fizz-buzz-item'>
//     <span>1</span>
// </div>

// using: input and submit


// ********** MY ANSWER *****************

$(function fizzBuzz() {
  $('form').submit(function() {
    var myInput = $('input.number-choice');
    if (myInput <= 0) {
      $('js-results').append('Please enter a positive number');
    } else {
      for (var i=1;i<=myInput;i++) {
        var countNum = i;
        var result = $('js-results').append("<div class='fizz-buzz-item'><span>" + countNum + "</span></div>");
        if (i % 15 === 0) {
          countNum = 'fizzbuzz';
          return result;
        } else if (i % 5 === 0) {
          countNum = 'buzz';
          return result;
        } else if (i % 3 === 0) {
          countNum = 'fizz';
          return result;
        } else {
          return result;
        }
        return result;
      }
    }
  });  
});





// *********** SOLUTION **************


var fizzString = 'fizz';
var buzzString = 'buzz';
var fizzBuzzString = 'fizzbuzz';

// 1. Create the variables that equal the expressions and
// a function to substitute the number if divisible by 3, 5 or both
// for the string 'fizz' or 'buzz' or 'fizzbuzz'


function getFizzBuzzValue(num) {
  var val = num;
  if (num % 15 === 0) {
    val = fizzBuzzString;
  } else if (num % 5 === 0) {
    val = buzzString;
  } else if (num % 3 === 0) {
    val = fizzString;
  }
  return val;
}

// 2. Create a function that uses previous function and creates the array by looping
// to return the number or the string

function makeFizzBuzzArray(num) {
  var result = [];
  for (var i=1; i<=num; i++) {
    result.push(getFizzBuzzValue(i));
    // this tells to push the number or the expression 'fizz' etc to array
  }
  return result;
}

// 3. Create a function that creates and adds the div with the result

function doFizzBuzz(num) {
  var fizzBuzzArray = makeFizzBuzzArray(num);
  // to DRY you make previous func into var
  fizzBuzzArray.forEach(function(item) {
  // for each item in array pass this function
      var newElem = $('<div class="fizz-buzz-item"><span>' + item + '</span></div>');
          // newElem will be the box displayed witht number
      if (item === fizzString || item === buzzString || item === fizzBuzzString) {
      //  newElem.addClass(item);
        // .addClass() method adds the class to the element 'newElem'
        // while converting item (which equals a string) to a class, so item = 'fizz' will be .fizz)
        // it was very confusing and completely worthless for purpose of this exercise
      }
      $(".js-results").append(newElem);
  })
}

// 4. Create the function that's gonna listen for submission and apply previous functions 

function handleFormSubmit() {
  $('#number-chooser').submit(function(event) {
    // note: # selects the 'id' attribute's value
    event.preventDefault();
    // in case there's already results the function won't be called
    $(".js-results").empty();
    // so instead it empties the results first
    var choice = parseInt( $(event.currentTarget).find('input[name="number-choice"]').val());
    // variable 'choice' is created to parse with parseInt() method to convert arg to string
    // $(event.currentTarget) targets the form
    // .find() finds the element in the form case the box to input number
    // .val() grabs the value (that in this case is found there in current event)
    // so this basically grabs the number value and 
   
    doFizzBuzz(choice);
    // don't understand why we need to parse the number, but Im assuming because
    // we're looping and returning strings or numbers
   
  });
}

$(function() {
  handleFormSubmit();
});