You just moved into a brand new home and it's time to decorate!! That's always the best part. And then once you're all moved in, time to enjoy your new crib.
##Let's Get Started
We've set up the click
functions for you, but your job is to fill in the rest.
You'll be coding your solution in js/decorate.js
. You'll want to open up index.html
in both the browser and the text editor. You shouldn't need to make any changes to index.html
in order to code your solution. Don't worry about the code in css/style.css
. All the styling has be written for you, and will work perfectly if you don't change the HTML.
Step 1: When a user clicks the button Add Chair
, the blue-chair.png
should appear on the screen. You'll need to use the append
function to add the HTML to put the image on the page to the div with the class chair
.
Step 2: When a user clicks the button Add Couch
, the couch.png
image should appear on the screen. Again, you'll want to use the append
function to add the HTML for the image to the div with the class couch
.
Step 3: When a user clicks the button Add Chandelier
, the chandelier.png
image should appear in the house. You'll need to use the append
function to add the HTML to put the image on the page to the div with the class chandelier
.
Step 4: When a user clicks the Frame Art
button, a 5 pixel wide orange frame should go around the art on the wall. You'll want to use the addClass
function to add the class frame-art
to the image with the ID art
.
Step 5: We all like to eat a lot of pizza. When a user clicks the Eat Pizza
button, the box of pizza should disappear, and when the button is clicked again, the pizza should reappear. You'll want to use the toggle
function on the image with the ID pizza
.
Step 6: When a user clicks the button Add TV
, the off-tv.png
image should appear in the house. You'll need to use the append
function to add the HTML to put the image on the page to the div with the class chandelier
.
Step 6: When a user clicks the button Watch TV
, the tv.png
image should appear in the house instead of the off-tv.png
. You'll need to use the replaceWith
function on the image inside the div
with the class tv
to replace the images.
Done and done!
View Room Decorator on Learn.co and start learning to code for free.