Card Maker

Example

Basic Features

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

Step 2: Make separate variables for the card, title, paragraph, buttons, text box, color picker, and slider.
Hint: If you're having trouble, look at your Mad Libs project.

Step 3: Change the card's background color when the button is clicked.
Hint: Watch the setting style video. The video shows an example. Do NOT copy it exactly.

Step 4: Make two more buttons to change the card's background color.

Step 5: Show the card's title in the paragraph as the user types in the text box.
Hint: Add an input event listener to the text box so that the paragraph is updated as the user types:
yourTextBoxVariable.addEventListener("input", yourFunction);
Step 6: Change the title's color when the user selects a color.
Hint: Add an input event listener to the color picker, and set the paragraph's color style to the selected color:
yourParagraphVariable.style.color = yourColorPickerVariable.value;
Step 7: Change the title's font size when the user moves the slider.
Hint: Add an input event listener to the slider, and set the paragraph's font-size style to the slider value:
yourParagraphVariable.style.fontSize = yourSliderVariable.value + "px";

Debugging help

Last topic Next topic