JSFiddle - React, Tailwind, and code Playground
by DustyWhite
HTML
What is your first name: <input type="text" id="name">
Something bad you did this year: <input type="text" name="bad_action" id="bad_action">
Your boss or someone else who is mean to you: <input type="text" name="jerk" id="jerk">
Use one adjective to say how awesome you are—don't be shy: <input type="text" name="superlative_adj" id="superlative_adj">
Chose a descriptive adjective like "hot," "cold" or "steaming": <input type="text" name="badj" id="badj">
Something like "coal" or "poo" if you are really angry at someone: <input type="text" name="lump_of" id="lump_of">
<button id="launch">Click me!</button>
<div id="story"></div>
<script type="text/javascript">
window.ready = function () {
var name = document.querySelector("#name");
var bad_action = document.querySelector("#bad_action");
var jerk = document.querySelector("#jerk");
var superlative_adj = document.querySelector("#superlative_adj");
var badj = document.querySelector("#badj");
var lump_of = document.querySelector("#lump_of");
var story = document.querySelector("#story")
var launch = document.querySelector("#launch");
launch.addEventListener("click", writeStory, false);
function writeStory(){
var launchedStory = "";
launchedStory += "<p class="madlib">Dear Santa,</p> <p class="madlib">This is your friend";
launchedStory += + name.value + ", and I have been accused of " + bad_action.value + ".</p>";
launchedStory += "<p class="madlib">But I have been *totally* <em>framed</em> by my jerk ";
launchedStory += + jerk.value + ", who is either angry or just healous that I am much ";
launchedStory += + superlative_adj.value +;
launchedStory += " than they are. All I am asking is that you overlook this obvious lie, and...