Skip to content

Instantly share code, notes, and snippets.

@alexcodreanu86

alexcodreanu86/jquery_example.html

Forked from dbc-challenges/jquery_example.html
Last active January 3, 2016 10:09
Show Gist options
  • Save alexcodreanu86/8447185 to your computer and use it in GitHub Desktop.
Save alexcodreanu86/8447185 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. alexcodreanu86 revised this gist Jan 15, 2014. 2 changed files with 67 additions and 24 deletions.
    31 changes: 16 additions & 15 deletions jquery_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,19 @@
    <!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>
    <head>
    <title>DOM manipulation with jQuery</title>

    <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>
    <button id = "add_borders"> Change image display</button>
    <button id = 'default'>Default</button>
    <img src="http://static6.businessinsider.com/image/51bb60d6eab8eafc73000036-1200/dev-bootcamp.jpg">
    </div>

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


    var bodyElement = $('body');

    bodyElement.css({'background-color': 'pink'});

    //RELEASE 1:
    //Add code here to select elements of the DOM
    var h1 = $('h1');
    var mascot = $('.mascot');
    var button = $('button');



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


    h1.css({'border': '2px solid purple',
    'border-radius': '5px',
    'color': 'green'});
    $('.mascot h1').css({'visibility' : 'visible'});
    $('img').css({
    'display': 'block',
    'border': '20px solid yellow',
    'border-radius': '7px' ,
    'width' : '400px',
    'margin': '5px 20px'});
    //RELEASE 3: Event Listener
    // Add the code for the event listener here


    $('img').hover(function(e){
    e.preventDefault()
    $(this).attr('src', 'http://alexcodreanu.com/portfolio/HTML_CSS_projects/treehouse_bakin/img/fox_logo.jpg')
    }, function(e){
    e.preventDefault()
    $(this).attr('src', 'http://static6.businessinsider.com/image/51bb60d6eab8eafc73000036-1200/dev-bootcamp.jpg')
    });
    //RELEASE 4 : Experiment on your own


    $('.mascot h1').on('mouseover', function(){
    $(this).css({'visibility': 'hidden'})
    });

    $('.mascot h1').on('mouseout', function(){
    $(this).css({'visibility': 'visible'})
    });


    $('#add_borders').on('click',function(){
    $('img').animate({
    'width' : '-=100px',
    'border-radius': '+=15px',
    'border-width': '-= 4px'
    },1100)
    });

    $('#default').on('click', function(){
    $('img').animate({
    'border-radius': '7px' ,
    'width' : '400px',
    'border-width': '20px'
    }, 500)
    })

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

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