Skip to content

Instantly share code, notes, and snippets.

@danapplegate

danapplegate/index.html

Created June 16, 2017 04:29
Show Gist options
  • Save danapplegate/f9b6e526b2ceff8b264c8bb5b8d43688 to your computer and use it in GitHub Desktop.
Save danapplegate/f9b6e526b2ceff8b264c8bb5b8d43688 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=f9b6e526b2ceff8b264c8bb5b8d43688
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Madlib With Hints</title>
</head>
<body>
<h1>Madlib With Hints</h1>
<div>
<label for="adjective1">adjective1</label>
<input id="adjective1" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="adjective2">adjective2</label>
<input id="adjective2" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="adjective3">adjective3</label>
<input id="adjective3" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="adjective4">adjective4</label>
<input id="adjective4" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="awardName">awardName</label>
<input id="awardName" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="decimalNumber">decimalNumber</label>
<input id="decimalNumber" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="number1">number1</label>
<input id="number1" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="number2">number2</label>
<input id="number2" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="petName">petName</label>
<input id="petName" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="superlativeAdjective">superlativeAdjective</label>
<input id="superlativeAdjective" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="continuingAction">continuingAction</label>
<input id="continuingAction" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="pastTenseAction">pastTenseAction</label>
<input id="pastTenseAction" placeholder="" />
<p class="hint">()</p>
</div>
<div>
<label for="travelDestination">travelDestination</label>
<input id="travelDestination" placeholder="" />
<p class="hint">()</p>
</div>
<button id="fill-madlib-btn">Complete Madlib</button>
<h2 id="madlib-title"></h2>
<p id="madlib-target"></p>
<script>
var blanks = ['adjective1', 'adjective2', 'adjective3', 'adjective4', 'awardName', 'decimalNumber', 'number1', 'number2', 'petName', 'superlativeAdjective', 'continuingAction', 'pastTenseAction', 'travelDestination'];
Number.prototype.ordinal = function(){
var stringVal = this.toString(10)
, onesCol = stringVal.slice(-1)
, ending = "th";
if (stringVal.indexOf(".") === -1) {
if (onesCol === "1") {
ending = "st";
} else if (onesCol === "2") {
ending = "nd";
} else if (onesCol === "3") {
ending = "rd";
}
}
return this + ending;
};
function fillHints() {
blanks.forEach(function(blank) {
$('#'+blank).attr('placeholder', window[blank]);
var typeName = blank + 'Type';
if (window.hasOwnProperty(typeName)) {
$('#'+blank+' + .hint').text('(Should be of type ' + window[typeName] + ')');
}
});
}
function fillMadlib() {
blanks.forEach(function(blank) {
window[blank] = $('#'+blank).val();
});
$('#madlib-title').html("Kim Kardashian Sends Kanye West the <span class='placeholder'>" + superlativeAdjective + "</span> Birthday Message");
var output = "On Kanye West's big day, Kim Kardashian isn't being <span class='placeholder'>" + adjective2 + "</span> about her love for her <span class='placeholder'>" + adjective3 + "</span> husband. The <span class='placeholder'>" + awardName + "</span>-winning rapper is celebrating his <span class='placeholder'>" + Number(number1).ordinal() + "</span> birthday today, complete with a special message from Kim. \"Happy Birthday <span class='placeholder'>" + petName + "</span>,\" she tweeted. \"I love you so much! You inspire me every day to be a <span class='placeholder'>" + adjective1 + "</span> person! I'm so grateful for you.\" She completed the post with a throwback photo of her and her beloved holding hands while <span class='placeholder'>" + continuingAction + "</span> down the sidewalk. While the rapper's celebrations today remain unknown, he and Kim recently <span class='placeholder'>" + pastTenseAction + "</span> off to <span class='placeholder'>" + travelDestination + "</span> with friends for a luxurious and <span class='placeholder'>" + adjective4 + "</span> <span class='placeholder'>" + number2 + "</span>-day getaway. No exact figures are known, but rumors are that it cost upwards of $<span class='placeholder'>" + decimalNumber + "</span> million. Fun in the sun with all of your loved ones? We can't think of a better birthday present. Happy Birthday Kanye!";
$('#madlib-target').html(output);
};
</script>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css"]}
Raw
script.js
// Assign default values to these variables below
var adjective1 = 'smelly';
var adjective2;
var adjective3;
var adjective4;
var awardName;
var continuingAction;
var decimalNumber;
var number1;
var number2;
var pastTenseAction;
var petName;
var superlativeAdjective;
var travelDestination;
// Next, declare a new variable for each one above and assign as its value the type of the original variable. These will be used to provide a hint to the user. Call each of these variables XType, where X is the variable name. For example:
var adjective1Type = 'string';
// Now call the fillHints function
fillHints();
$("#fill-madlib-btn").click(fillMadlib);
Raw
styles.css
.placeholder {
font-weight: bold;
color: blue;
}
p.hint {
display: inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment