GDES-315 Exercise_15.6

Pop up alert on a click of a div box(class), div box (id), heading (h2) and an image (img)

by emilytrabert

HTML

<body>
    <div class="demo_class">Demo box (class)</div>
    <div id="demo_id"> Demo box (id) </div>
    <h2> Clickable header </h2>
    <img src="http://placekitten.com/150/100" />
</body>

CSS

.demo_class, #demo_id, h2{
    width: 250px;
    height: 30px;
    padding: 20px;
    margin-bottom:30px;
    color: #FFFFFF;
    background-color: #999999;
}

JavaScript

/* Write code that executes the following:
1. 
When a Demo box (class) is clicked, a pop-up alers the user:
"This box has a CSS class assigned!"
*/

/*2.
When a Demo box (id) is clicked, a pop-up alers the user:
"... and this box has a CSS id assigned!"*/

/*3.
When a <h2> header is clicked, a pop-up alers the user:
"you've clicked a generic header!"*/

/*4.
When an image is clicked, a pop-up alers the user:
"you've just petted a cute little kitten!"
*/

$('.demo_class').click(function(){
    alert("This box has a CSS class assigned!");
});

$('#demo_id').click(function(){
    alert("This box has a CSS id assigned!");
});

$('h2').click(function(){
    alert("You've clicked a generic header!");
});

$('img').click(function(){
    alert("You've just pet a cute little kitten!");
});