DOM_Practice.md

DOM Manipulation Practice

💻 Set Up

Fork this CodePen.

📍 Goal

Without editing the HTML or CSS code, make the site look like this when the user clicks the button:

🎨 Resources

• Kitten Heading Color: #208877
• Kitten Background Color: #F6B329
• Kitten Picture Source URL: https://icatcare.org/app/uploads/2018/07/Finding-homes-for-your-kittens-1.png (Make sure you change the alt text on the image too!)

👟 Steps

1. In your JS file, declare variables that store all of the HTML elements you'll need access to.
2. Use JS to change the text and image to make the webpage match the new comp. Do not worry about colors just yet!
3. Uncomment the button in the HTML file. (This is the only time you should be touching the HTML file!)
4. Refactor your JS code so that the page starts out being about puppies and changes to kittens on button click.
5. Now focus on the styling. The kittens page should match the colors from the comp.

🌶 Spicy Challenge

Add functionality that will allow the user to toggle between the puppies and kittens. There are a lot of ways to approach this! If you want to add a second button to your HTML, you can!

🤯 Stuck

• Slow down and take it step by step.
• Remember that console.logs are your friend!
• Refer to the DOM Manipulation lesson and the Event Listeners lesson.