Skip to content

Instantly share code, notes, and snippets.

@wmcguire18

wmcguire18/DOM_Practice.md

Forked from kaylagordon/DOM_Practice.md
Created March 31, 2021 22:52
Show Gist options
  • Save wmcguire18/fab111cac6cd0de5f77c39f9179b7a4c to your computer and use it in GitHub Desktop.
Save wmcguire18/fab111cac6cd0de5f77c39f9179b7a4c 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