Skip to content

Instantly share code, notes, and snippets.

@alexpelan

alexpelan/index.html

Last active January 11, 2018 03:47
Show Gist options
  • Save alexpelan/a9ce680cee958aa7c7fe5e2f79ab38a3 to your computer and use it in GitHub Desktop.
Save alexpelan/a9ce680cee958aa7c7fe5e2f79ab38a3 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=a9ce680cee958aa7c7fe5e2f79ab38a3
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Greeting Card Maker</title>
</head>
<body>
<div class="greeting-card">
<div class="to">
Dear
</div>
<div class="message">
</div>
From,
<div class="from">
</div>
</div>
</body>
</html>
Raw
instructions.md

Greeting Card Creator - Medium 🌶 🌶

  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. In Javascript, add a click handler for the button. The rest of the javascript should be written inside this click handler.
  4. Get the value of To from the appropriate input and use .append() to append it to the div with the class 'to'
  5. Get the value of Color from the appropriate input and use .css to set the color of the body.
  6. Get the value of the message from the appropriate input and use .text() to set the text of the div with the class message.
  7. Get the value of the from input and use .text() to set the text of the div with the class 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