Codecademy Dynamic HTML

Jquery lesson examples

by pixeloco

HTML

<p>Hello I'm paragraph text</p>
<h1>Prepend/Append</h1>
<div class="pa">Hello<br />Hi</div>
<div class="pa">What's up</div>

<h1>Before/After</h1>
<div class="ba1">One</div>
<div class="ba2">Two</div>

<h1>Moving</h1>
<div class="m1">Moving one</div>
<div class="m2">Moving two</div>

<h1>Remove/Empty</h1>
<ol><li>hi</li><li>bye</li></ol>
<ul><li>hi</li><li>bye</li></ul>

<h1>Add/Remove and Toggle Class</h1>
<div id="clickadd">I would like a border please, click!</div>
<div id="toggle">My border toggles on click</div>
<div id="add">I get my border on load!</div>


<h1>Changing CSS</h1>
<section></section>

<h1>Change html</h1>
<div class="hi">replaces text ib all instances of element on page</div>

CSS

h1 {font-size:14px; margin:20px 0 5px 0;}

div {background-color: pink; margin-bottom:10px;}

span {background-color: silver}

ol {background-color: blue; height:20px; width: 100px;}

ul {background-color: green; height:20px; width: 100px; }

.border {border: 2px solid purple}

section {background-color:wheat; width:100px; height: 30px;}

JavaScript

$(document).ready(function(){
    $('.pa').append("<span>i'm appended to all div's with class pa</span>");
    
    $('.ba1').before("<div>place me!</div>");
    $('.ba2').after("<span>here i am</span>");
    
    $('.m1').after($('p')); 
    
    $('ol').remove();
    $('ul').empty();
    
    $('#clickadd').click(function(){
        $(this).addClass('border');
    });
    $('#toggle').click(function(){
        $(this).toggleClass('border');    
    });
    $( "#add" ).addClass( "border" );

    $('section').click(function(){
        $(this).width('200px');
        $(this).height('50px');
        $(this).css('border-radius', '10px');
    });
    
    $('div.hi').html('replacing html!');       
});