Skip to content

Instantly share code, notes, and snippets.

@alexpelan

alexpelan/index.html

Last active January 11, 2018 03:39
Show Gist options
  • Save alexpelan/ad3e99bbf7e0ba1cc2a481e6ee2c2543 to your computer and use it in GitHub Desktop.
Save alexpelan/ad3e99bbf7e0ba1cc2a481e6ee2c2543 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=ad3e99bbf7e0ba1cc2a481e6ee2c2543
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Greeting Card Maker</title>
</head>
<body>
<p>To: <input id="to"> </p>
<p>Message: <input id="message"> </p>
<p>Color: <input id="color"></p>
<p>From: <input id="from"></p>
<button>Send</button>
<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 - Mild 🌶

  1. We have already gotten the value of color for you on line 4 of the javascript section. Set the color of the body to this color.
  2. Get the value of the message from the appropriate input and use .text() to set the text of the div with the class message.
  3. Get the value of the from input and use .text() to set the text of the div with the class from.
  4. Use CSS and optionally additional HTML to add images and styling to your greeting card
Raw
popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console"]}
Raw
script.js
$("button").click(function() {
var to = $("#to").val();
$(".to").append(" " + to);
var color = $("#color").val();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment