Skip to content

Instantly share code, notes, and snippets.

@csmucker83

csmucker83/DOM_Practice.md

Forked from kaylagordon/DOM_Practice.md
Created May 21, 2021 21:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save csmucker83/0adf0cc29b3992f932944c99a77036a1 to your computer and use it in GitHub Desktop.
Save csmucker83/0adf0cc29b3992f932944c99a77036a1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
DOM_Practice.md

DOM Manipulation Practice

💻 Set Up

Fork this CodePen.

📍 Goal

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

👟 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

  1. 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

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

Optional Spicy Challenge 🌶

  1. 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!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment