Skip to content

Instantly share code, notes, and snippets.

@iancover
Last active May 11, 2017 19:34
Show Gist options
  • Save iancover/860687c1a977538dfabd3df165e2f30b to your computer and use it in GitHub Desktop.
Save iancover/860687c1a977538dfabd3df165e2f30b to your computer and use it in GitHub Desktop.
// 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
// 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'
// 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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment