Skip to content

Instantly share code, notes, and snippets.

@CharlieTruong
Forked from dbc-challenges/jquery_example.html
Last active December 31, 2015 22:39
Show Gist options
  • Save CharlieTruong/8055422 to your computer and use it in GitHub Desktop.
Save CharlieTruong/8055422 to your computer and use it in GitHub Desktop.
Intro to jQuery for Phase 0
<!DOCTYPE html>
<html>
<head>
<title>DOM manipulation with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery_example.js"></script>
</head>
<body>
<h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
<div class="mascot">
<h1> My DBC Mascot </h1>
<img src="http://socialtimes.com/files/2013/02/Dev-Bootcamp-logo.jpg">
</div>
</body>
</html>
$(document).ready(function(){
//RELEASE 0:
//Link this script and the jQuery library to the jquery_example.html file and analyze what this code does.
$('body').css({'background-color': 'pink'})
//RELEASE 1:
//Add code here to select elements of the DOM
var bodyElement = $('body')
//RELEASE 2:
// Add code here to modify the css and html of DOM elements
$('h1').css({
'color': 'red',
'border': 'solid',
'visibility': 'visible'
})
$('.mascot h1').html('DBC Squirrel')
//RELEASE 3: Event Listener
// Add the code for the event listener here
$('img').on('mouseover', function(e){
e.preventDefault()
$(this).attr('src', 'http://www.charlietruong.com/img/squirrel.jpg')
})
$('img').on('mouseout', function(e){
e.preventDefault()
$(this).attr('src', 'http://socialtimes.com/files/2013/02/Dev-Bootcamp-logo.jpg')
})
//RELEASE 4 : Experiment on your own
$('img').css({
'border-style': 'solid',
'border-color': 'red'
})
$( "img" ).animate({
width: '10%',
borderWidth: '5px'
},
2000,
'linear'
);
}) // end of the document.ready function: do not remove or write DOM manipulation below this.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment