Skip to content

Instantly share code, notes, and snippets.

@EmFoley

EmFoley/jquery_example.html

Forked from dbc-challenges/jquery_example.html
Last active December 31, 2015 23:19
Show Gist options
  • Save EmFoley/8059142 to your computer and use it in GitHub Desktop.
Save EmFoley/8059142 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. EmFoley revised this gist Dec 20, 2013. 2 changed files with 41 additions and 10 deletions.
    11 changes: 5 additions & 6 deletions jquery_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,17 @@
    <!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>
    <script type="text/javascript" src="jquery.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">
    <h2> My DBC Mascot </h2>
    <img src="dbc_logo.jpeg">
    </div>
    <p>Higher cosmic force the wisdom of your body grass-fed, biodiesel full moon. Farm to table five rhtyhms carob, world peace empowering messages. Loving kindness with cayenne pepper radical acceptance vegan nectar wicca bay area, soul-level contract whole earth catalog. Kefir peacock feather yerba matte conflict resolution juicy, combined energy fields entheogen.</p>

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

    //RELEASE 1:
    //Add code here to select elements of the DOM
    var bodyElement = $('body')

    var findElement = $( "input[name~='bootcamp']" ).val( "bootcamp" );

    //This did not work at all, and I have no idea why.

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

    $('h1').css({'color':'red'})
    $( ".mascot" ).css( "border", "3px solid red" )
    $('h2').html("YOUR COHORT MASCOT")

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

    $('img').on('mouseenter', function(e){
    e.preventDefault()
    $(this).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRpwQGdZ-6qMpQ-uSzuPxWZFf_3hGd-phb4O6x-5TXDzC2oswsaRA')
    })
    $('img').on('mouseleave', function(e){
    e.preventDefault()
    $(this).attr('src', 'dbc_logo.jpeg')
    })

    //RELEASE 4 : Experiment on your own


    $( "h1" ).hover(
    function() {
    $( this ).append( $( "<span>Hi Guys!</span>" ) );
    }, function() {
    $( this ).find( "span:last" ).remove();
    }
    );
    $( "h1" ).hover(function() {
    $( this ).fadeOut( 100 );
    $( this ).fadeIn( 500 );
    });
    $( "h1" ).on( "mouseover", function() {
    $( this ).css( "color", "blue" );
    });
    $( "h1" ).on( "mouseout", function() {
    $( this ).css( "color", "red" );
    });
    $( "p" ).hover(function() {
    $( this ).fadeOut( 100 );
    $( this ).fadeIn( 500 );
    });



  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.