Photo Editor

Example

Basic Features

Step 1: From the Cloud9 dashboard: Create a new workspace
Fill in the following text boxes on the form:
→ Workspace name: photo-editor Copy
→ Clone from Git or Mercurial URL: https://github.com/studentmrcode/photo-editor.git Copy
Click Create workspace button
Open index.html and click Run

Step 2: Replace the default image with your own image. Change the box's size in your CSS to match the image's size.

Step 3: Make separate variables for the image and three sliders.
Hint: If you're having trouble, look at your Card Maker project.

Step 4: Change the image's width when the user moves the first slider.
Hint: It's similar to changing the title's font size in your Card Maker project.

Step 5: Change the image's opacity when the user moves the second slider.

Step 6: Change the image's rotation when the user moves the third slider.
Hint: There's no rotation style. Use the transform style.

Debugging help

Last topic Next topic