Skip to content

Instantly share code, notes, and snippets.

@darrrelll

darrrelll/jquery_example.html

Forked from dbc-challenges/jquery_example.html
Last active August 29, 2015 13:56
Show Gist options
  • Save darrrelll/9098561 to your computer and use it in GitHub Desktop.
Save darrrelll/9098561 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. darrrelll revised this gist Feb 24, 2014. 2 changed files with 51 additions and 5 deletions.
    7 changes: 2 additions & 5 deletions jquery_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,17 +2,14 @@
    <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> My DBC Mascot </h1>
    <img src="dbc_logo.jpg">
    <img id="image" src="fieryskipper.jpg">
    </div>

    </body>
    </html>
    49 changes: 49 additions & 0 deletions jquery_example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,56 @@ $('body').css({'background-color': 'pink'})

    //RELEASE 4 : Experiment on your own

    $(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': 'yellow'})
    $('h1').css({'border': '1px solid blue'})
    $('h1').css({'visibility': 'hidden'})
    $('h1').css({'visibility': 'visible'})
    $('img').css({'border': '1px solid blue'})
    $('img').css({'max-height': '400px'})
    $('img').css({'max-width': '350px'})


    //RELEASE 3: Event Listener
    // Add the code for the event listener here
    $('img').on('mouseenter', function(e){
    e.preventDefault()
    $(this).attr('src', 'dudehere.jpg')
    })

    $('img').on('mouseout', function(e){
    e.preventDefault()
    $(this).attr('src', 'fieryskipper.jpg')
    })

    //RELEASE 4 : Experiment on your own
    $( "#image" ).click(function() {
    $( "#image" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
    }, 5000, function() {
    // Animation complete.
    });
    });








  2. @dbc-challenges dbc-challenges created this gist Dec 14, 2013.
    18 changes: 18 additions & 0 deletions jquery_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>DOM manipulation with jQuery</title>

    <!-- Add a link to jQuery CDN here script here -->

    <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="dbc_logo.jpg">
    </div>

    </body>
    </html>
    27 changes: 27 additions & 0 deletions jquery_example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    $(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


    //RELEASE 2:
    // Add code here to modify the css and html of DOM elements


    //RELEASE 3: Event Listener
    // Add the code for the event listener here


    //RELEASE 4 : Experiment on your own






    }) // end of the document.ready function: do not remove or write DOM manipulation below this.