Skip to content

Instantly share code, notes, and snippets.

@alexpelan

alexpelan/index.html

Last active January 11, 2018 03:49
Show Gist options
  • Save alexpelan/87de8e40ed775c7df4eaa98d20092f4b to your computer and use it in GitHub Desktop.
Save alexpelan/87de8e40ed775c7df4eaa98d20092f4b to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=87de8e40ed775c7df4eaa98d20092f4b
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Greeting Card Maker</title>
</head>
<body>
</body>
</html>
Raw
instructions.md

Greeting Card Creator - Spicy 🌶 🌶🌶

  1. Add four inputs to the HTML for To, From, Message, and Color. They should have classes or IDs to use in your javascript later on.
  2. Add a button to your HTML.
  3. Add a div with class greeting-card to your HTML. Inside this div, add a div with the class to, a div with the class message, and a div with the class from
  4. In Javascript, add a click handler for the button. The rest of the javascript should be written inside this click handler.
  5. Get the value of To from the appropriate input and use .append() to append it to the div with the class 'to'
  6. Get the value of Color from the appropriate input and use .css to set the color of the body.
  7. Repeat this process for message and from
  8. Use CSS and optionally additional HTML to add images and styling to your greeting card
Raw
popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console"]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment