jQuery

Playing with interactivity using button

by cliftonyeo

HTML

<button id="boomz">DON'T CLICK HERE</button>
<!-- anything can be a button; video, picture,
div .etc -->

<div class="green"></div>

CSS

div {
    width: 100px;
    height: 100px;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    transition: 0.5s ease;
}
.green {
    background: green;
    width: 100px;
}
.orange {
    background: orange;
    height:300px;
    width:300px;
    transform: rotate(345deg);
}

JavaScript

//write some class properties with CSS, and use JavaScript to change the apperance

// '$' is the representation of a jQuery object
// $('div;) selects the div using jQuery; can be a class or id or any other element

// var x = $('button');
// alert(x); ~method to test that the button is getting retrieved


$('#boomz').click( function() {
    
    if( $('div').hasClass('green') ) {
    
        $('div').removeClass('green');
        $('div').addClass('orange');
        
    } else {
        $('div').removeClass('orange');
        $('div').addClass('green');   
    }

}   
);      

//function in a click in a get; placing a function within a click function; if using pure javascript, will have to define a variable through getElementId, then define the variable by a certain value upon click .etc... jQuery is a terse brief way to write javascript...

//problem is that the interaction is only one way; can only go from green to orange, but can't go the other way around. can get around this by using a IF-ELSE statement