DOM_Practice.md

DOM Manipulation Practice

💻 Set Up

Fork this CodePen.

📍 Goal

Without editing the HTML, make the site look like this:

👟 Steps

Changing the Elements

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. Make sure you change the alt text on the image too!

Matching the Styles

3. The kittens page should match the colors from the comp. Look at the CSS file and notice the .kitten-heading and .kitten-box rule blocks. Do some googlin' and find a way to add those classes to the elements through JavaScript in order to apply that styling.

Adding Event Listeners

4. Uncomment the button in the HTML file. (This is the only time you should be touching the HTML file!)
5. Refactor your JS code so that the page starts out being about puppies and changes to kittens on button click.

Optional Spicy Challenge 🌶

6. Add functionality that will allow the user to toggle between the puppies and kittens. Make sure the styling changes as well. 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.
• Pair with your mentor/rock/peer.
• Sign up for Student Hours.
• Write down your questions and ask them in Friday's small group review session!