Skip to content

Instantly share code, notes, and snippets.

@juliettech13
Created July 15, 2020 04:30
Show Gist options
  • Save juliettech13/35de7030e48b8767fa84bd8c874b7452 to your computer and use it in GitHub Desktop.
Save juliettech13/35de7030e48b8767fa84bd8c874b7452 to your computer and use it in GitHub Desktop.
animate
const paragraph = document.querySelector('p');
paragraph.addEventListener('click', (event) => {
// First, we select the element we want to animate and confirm we are grabbing the right one.
const element = event.target; // In this scenario, the target is paragraph itself.
console.log(element); // note: this should be removed once the right element has been confirmed.
// Then, we perform the animation we want to occur when the click event is triggered.
element.style.color = 'red' // Add here your favorite color hehe that red one is dis.gus.ting. Don't say I didn't warn you 👀
element.style.fontSize = '10px' // You can pass any CSS property here. Just make sure to change the property from mid-snake-case to lowerCamelCase.
element.insertAdjacentHTML('beforeend', '<p>Hello there!</p>'); // This will add this paragraph element before my paragraph element
element.classList.add('bigger'); // Will add the class called bigger to the paragraph element
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment