Skip to content

Instantly share code, notes, and snippets.

@kma3a

kma3a/jquery_example.html

Forked from dbc-challenges/jquery_example.html
Last active August 29, 2015 13:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kma3a/8778808 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kma3a/8778808 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kma3a revised this gist Feb 4, 2014. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion jquery_example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -38,7 +38,11 @@ $('body').css({'background-color': 'pink'});

    //RELEASE 4 : Experiment on your own



    $('p').css('font-size','2em');
    $('p').css('color', 'blue');
    $('p').addClass('cohort');
    $('.cohort').fadeOut('slow');



  2. kma3a revised this gist Feb 3, 2014. 1 changed file with 28 additions and 9 deletions.
    37 changes: 28 additions & 9 deletions jquery_example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,21 +1,40 @@
    $(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'})

    $('body').css({'background-color': 'pink'});
    //RELEASE 1:
    //Add code here to select elements of the DOM


    var bodyElement = $('body');
    var header = $('h1');

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



    header.css('color','#FF0000');
    header.css('border','4px solid #191970');
    header.css('border-radius','10px');
    $('div h1').after('<h3></h3>');
    $('div h1').after('<p></p>');
    $('p').html('Otters');
    $('h3').html('and proud');
    $('h3').css('visibility','hidden');


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


    $('img').on('mouseover', function(e){
    e.preventDefault();
    $(this).attr('src', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRKvTqBf1UjfXEOdihEXYgOaSrHLyn_b16_7H2IljA2s0Fi66pScw');
    });

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

    //RELEASE 4 : Experiment on your own

  3. kma3a revised this gist Feb 3, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions jquery_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,9 +2,9 @@
    <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>
    @@ -13,6 +13,6 @@ <h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
    <h1> My DBC Mascot </h1>
    <img src="dbc_logo.jpg">
    </div>

    </body>
    </html>
  4. @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.