Skip to content

Instantly share code, notes, and snippets.

@MilanGrubnic70
Forked from dbc-challenges/jquery_example.html
Last active August 29, 2015 13:57
Show Gist options
  • Save MilanGrubnic70/9497088 to your computer and use it in GitHub Desktop.
Save MilanGrubnic70/9497088 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>
<!-- Add a link to jQuery CDN here script here -->
<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><p> My DBC Mascot</p></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.
$(document).ready(function(){
//RELEASE 0:
//Link this script and the jQuery library to the jquery_example.html file and analyze what this code does.
//A: The code below changes the background color to pink.//
$('body').css({'background-color': 'pink'});
//RELEASE 1:
//Add code here to select elements of the DOM
bodyElement = $('body');
h1Element = $('h1');
imgElement = $('img');
divElement = $('div');
//RELEASE 2:
// Add code here to modify the css and html of DOM elements
$('h1').css({"color":"blue"});
$('h1').css({"border":"dotted green 2px"});
$('h1').css({"visibility":"hidden"});
$('h1').css({"visibility":"hidden"});
$('h1').css({"visibility":"inherit"});
$("p").html("Dragonflies");
//RELEASE 3: Event Listener
// Add the code for the event listener here
$('img').on('mouseover', function(e){
e.preventDefault()
$(this).attr('src', 'data:image/jpeg;base64,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')
})
$('img').on('mouseleave', 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({'width': '200px', 'border':'red solid 1em'});
$('img').animate({'width': '400px', 'border': 'blue'}, 6000, 'swing');
$('img').animate({'border':'blue'});
}) // 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