/101-AnimatePractice

Primary LanguageHTML

101-AnimatePractice

  1. In the index.html file you'll find a form with a couple inputs: color and animation name. Go ahead and live serve this page and type in something then click "Create New Element". Try "bounce" and "red".
  2. What's happening?
  3. Look at the HTML file and then look at the main.js file to see how the values are being changed?
  4. Figure it out yet?
  5. On the keyup event, the input fields' values are being saved to the variables at the top of the JS file. When the "Create New Element" button is clicked another function is fired. What's happening there?
  6. Walk through it line by line and ask yourself what's going on? How does this work?
  7. Create a new input that will let the user change the text that's inside the "New Element". How can you do that? What function will you need to create?
  8. Can you see a pattern yet?
  9. Create a new input, that will let the user choose what type of HTML Element will be created next.
  10. Bonus: Create ways to add speed, delay, and an option for infinite or not.