Skip to content

Instantly share code, notes, and snippets.

@scarow
Forked from dbc-challenges/jquery_quiz.js
Last active December 22, 2015 04:29
Show Gist options
  • Save scarow/6417822 to your computer and use it in GitHub Desktop.
Save scarow/6417822 to your computer and use it in GitHub Desktop.
/* Here is your chance to take over Socrates!
Spend 10 minutes on each of the following hacks to the Socrates website.
Enter them in the console to make sure it works and then save
your results here.
Choose a new pair for each. Add your names to the section you complete.
*/
/*1. Use basic selectors (id, class, element) to choose an element on the page.
Use the .css() method to alter at least two CSS properties of this element. */
IR, SC
$('img:first-child').attr('src', 'http://llamahenrietta.webs.com/photos/LLAMA/llama_scarf.jpg');
/*2. Use basic selectors and the find() method to select an image on the page
and change it with another image of your choice. */
SC, GP
$('div.users').find('img').first().attr('src', 'http://cdn03.cdnwp.celebuzz.com/wp-content/uploads/2013/03/20/selena-gomez.jpg');
$("img[alt='Usman Chaudhary']").hide();
/*3. Use traverse methods to select all instances of a repeated element on the page
(like the h3 surrounding the words 'Code Review' ) and use the animate() method to modify it.
*/
$('h3').animate({
opacity: 0.25, color: 'red','font-size':'50px'
}, 5000, function() {
});
AB,DG (team Ninja turtles - without leonardo, nobody likes that guy)
/*4. Try to find an element that requires at least three selectors / traverse
methods to locate it and then use the .on() method to bind an event handler
on these elements (use an event other than click).*/
solution 1:
$('.content .span8 h1').mouseover(function(){
$("h1").css("background-color","yellow");
});
$('.content .span8 h1').mouseout(function(){
$("h1").css("background-color","white");
});
better solution 2:
$('.content .span8 h1').hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
SC, AB
/*5. Your choice. */
Rotate logo:
$('#logo').css({
'transform':'rotate(30deg)',
'-webkit-transform':'rotate(30deg)'
});
NA SC
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment