Skip to content

Instantly share code, notes, and snippets.

@pei-liu

pei-liu/jquery_example.html

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

Revisions

  1. girb0t revised this gist Apr 3, 2014. 1 changed file with 9 additions and 6 deletions.
    15 changes: 9 additions & 6 deletions jquery_example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@ $('body').css({'background-color': 'pink'});

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

    //RELEASE 2:
    // Add code here to modify the css and html of DOM elements
    @@ -18,16 +18,19 @@ $('#frog').css({ 'width': '200px' });
    //RELEASE 3: Event Listener
    // Add the code for the event listener here
    $('img').on('mouseover', function(e) {
    e.preventDefault()
    $(this).attr('src', 'frog_on_branch.png')
    e.preventDefault();
    $(this).attr('src', 'frog_on_branch.png');
    $(this).css({border: '0 solid black'}).animate({
    borderWidth: 4
    }, 200);
    })

    $('img').on('mouseleave', function() {
    $(this).attr('src', 'devbootcamp.png')
    $(this).attr('src', 'devbootcamp.png');
    $(this).css({'border-width' : '0'})
    })

    //RELEASE 4 : Experiment on your own
    var color = $('body').css('background-color');

    $('button').on('click', function(){
    var color = $('body').css('background-color');
    @@ -36,7 +39,7 @@ $('button').on('click', function(){
    } else {
    $('body').css({'background-color': 'pink'});
    }
    })
    })

    }) // end of the document.ready function: do not remove or write DOM
    //manipulation below this.
  2. girb0t revised this gist Apr 3, 2014. 2 changed files with 42 additions and 23 deletions.
    14 changes: 9 additions & 5 deletions jquery_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,17 +2,21 @@
    <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 src="devbootcamp.png">
    </div>

    <button>
    Toggle Me!
    </button>

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

    //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


    $('.mascot h1').html('Spring Peepers');
    $('h1').first().css({'color': 'red', 'border': 'black 1px solid'});
    $('#frog').css({ 'width': '200px' });
    //RELEASE 3: Event Listener
    // Add the code for the event listener here


    $('img').on('mouseover', function(e) {
    e.preventDefault()
    $(this).attr('src', 'frog_on_branch.png')
    })

    $('img').on('mouseleave', function() {
    $(this).attr('src', 'devbootcamp.png')
    })

    //RELEASE 4 : Experiment on your own






    }) // end of the document.ready function: do not remove or write DOM manipulation below this.
    var color = $('body').css('background-color');

    $('button').on('click', function(){
    var color = $('body').css('background-color');
    if (color == 'rgb(255, 192, 203)'){
    $('body').css({'background-color': 'green'});
    } else {
    $('body').css({'background-color': 'pink'});
    }
    })

    }) // end of the document.ready function: do not remove or write DOM
    //manipulation below this.
  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.