Skip to content

Instantly share code, notes, and snippets.

@kaylagordon

kaylagordon/DOM_Practice.md

Last active March 29, 2024 19:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 21 You must be signed in to fork a gist
  • Save kaylagordon/0d5621f9b4cb1c5a0d4da7a0405c8890 to your computer and use it in GitHub Desktop.
Save kaylagordon/0d5621f9b4cb1c5a0d4da7a0405c8890 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment