Skip to content

Instantly share code, notes, and snippets.

@buck3000

buck3000/jquery_example.html

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

Revisions

  1. buck3000 revised this gist Mar 13, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion jquery_example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ $('body').css({'background-color': 'pink'})

    $('img').on('mouseleave', function(e){
    e.preventDefault()
    $(this).attr('src', 'dbc_logo_2.jpg')
    $(this).attr('src', 'http://socialtimes.com/files/2013/02/Dev-Bootcamp-logo.jpg')
    })


  2. buck3000 revised this gist Mar 13, 2014. 2 changed files with 27 additions and 4 deletions.
    5 changes: 4 additions & 1 deletion jquery_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,14 +4,17 @@
    <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 src="dbc_logo.jpg">

    </div>

    </body>
    26 changes: 23 additions & 3 deletions jquery_example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,19 +7,39 @@ $('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': 'blue'})
    $('h1').css({'border': 'blue'})
    $('h1').css({'visibility': 'hidden'})
    $('h1').css({'visibility': 'visible'})
    $('div.mascot h1').html('Fiddler Crab')


    //RELEASE 3: Event Listener
    // Add the code for the event listener here
    $('img').on('mouseover', function(e){
    e.preventDefault()
    $(this).attr('src', 'http://2.bp.blogspot.com/-JXdSrHoMR18/T9sxLkOJtkI/AAAAAAAAAZc/aNlkvHcZAso/s1600/fiddler-crab.jpg')
    })


    //RELEASE 4 : Experiment on your own
    $('img').on('mouseleave', function(e){
    e.preventDefault()
    $(this).attr('src', 'dbc_logo_2.jpg')
    })


    //RELEASE 4 : Experiment on your own
    $("div.mascot img").hover(function(){
    $(this).filter(':not(:animated)').animate({ width: "200px" });
    }, function() {
    $(this).animate({ width: "40%",
    height: "40%",
    border: "10px solid blue",
    });
    });



  3. @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.