Skip to content

Instantly share code, notes, and snippets.

@danapplegate

danapplegate/index.html

Created June 16, 2017 04:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save danapplegate/f9b6e526b2ceff8b264c8bb5b8d43688 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save danapplegate/f9b6e526b2ceff8b264c8bb5b8d43688 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. danapplegate created this gist Jun 16, 2017.
    116 changes: 116 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    <!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>
    1 change: 1 addition & 0 deletions popcode.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css"]}
    22 changes: 22 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    // 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);
    8 changes: 8 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    .placeholder {
    font-weight: bold;
    color: blue;
    }

    p.hint {
    display: inline-block;
    }