First let's create a button
Search "jquery on click" to grab the syntax for an .on('click' ) event
inspect console, then click on the button
//animation_js_actions.js
$( document ).ready(function() {
console.log( "ready!" );
//used this syntax the most flexibility
$(document).on('click', '#consoleClick', function(event){
console.log('clicked: '+ $(this).text());
console.log('element id: ' + event.target.id);
});
});
hover over the css3 logo to see a 2d transformation
/* animation_js_actions.js */
$(document).on('click', '#triggerLeft', function(event){
$('#car').removeClass();
$('#car').addClass('translateLeft');
});
$(document).on('click', '#triggerRight', function(event){
$('#car').removeClass();
$('#car').addClass('translateRight');
});
//can you guess what this does?
$(document).on('click', '#car', function(event){
$('#car').removeClass();
});
hover over the css3 logo to see a 3d transformation
//animation_js_native.js
let plane = document.getElementById('plane');
let planeLeft = document.getElementById('planeLeft');
let planeRight = document.getElementById('planeRight');
planeLeft.addEventListener('click', function(event){
console.log("clicked: " +event.target.id);
plane.classList = '';
plane.classList.add('translateLeft');
});
planeRight.addEventListener('click', function(event){
console.log("clicked: " +event.target.id);
plane.classList = '';
plane.classList.add('translateRight');
});
plane.addEventListener('click', function(event){
console.log("clicked: " +event.target.id);
plane.classList = '';
});