Code Monkey home page Code Monkey logo

hs-intro-web-design-decorate-room's Introduction

Room Decorator

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 tvto replace the images.

Done and done!

View Room Decorator on Learn.co and start learning to code for free.

hs-intro-web-design-decorate-room's People

Contributors

victhevenot avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

einarstensson

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.