GDES-315 Exercise_15.5

Multiple pop-up alerts, and FadeOut() over controlled time

by emilytrabert

HTML

<body>
    <div class="demo">
        Demo box
    </div>
    
    <button>
        Awesome generic button
    </button>
    
    <div class="slide">
        When you click the awesome button i fade out, and the animation is taking 5 seconds!
    </div>
</body>

CSS

.demo, .slide {
    width: 350px;
    padding: 15px;
    margin: 50px 0 50px 0;
    background-color: #84CBDB;
    color: #FFFFFF;
    border: solid 2px #999999;
}

.slide{
        background-color: #FA0064;
}

JavaScript

/* Write code that executes the following:
1. 
When a demo box div is clicked, a pop-up alerts the user:
"You've clicked the demo box!"

2.
When a button is clicked, a pop-up alerts the user:
"You've clicked the awesome button!"

3.
When a button is clicked, a red box fades out taking 5 seconds"
*/

$('.demo').click(function(){
    alert("You've clicked the demo box!")
});

$('button').click(function(){
    alert("You've clicked the awesome button!");
    $('.slide').fadeOut(5000);
});