JSFiddle - React, Tailwind, and code Playground

by DustyWhite

HTML

<p class="madlib">What is your first name? <input type="text" id="firstname"></p>
<p class="madlib">Something bad you did this year: <input type="text" name="bad_action" id="bad_action"></p>
<p class="madlib">Your boss, or someone else who is mean to you: <input type="text" name="jerk" id="jerk"></p>
<p class="madlib">What is their relationship to you? (one word please): <input type="text" name="relationship" id="relationship"></p>
<p class="madlib">Use one adjective to say how awesome you are—don't be shy: <input type="text" name="superlative_adj" id="superlative_adj"></p>
<p class="madlib">Choose a descriptive adjective like "hot," "cold," "massive," or "steaming": <input type="text" name="badjective" id="badjective"></p>
<p class="madlib">Something unpleasant like "coal," or "poo": <input type="text" name="lump_of" id="lump_of"></p>
<p class="madlib">Your favorite vice that can fit in a bag <input type="text" name="munchies" id="munchies"></p>

            <button id="launch">Now click me!</button>

<div id="story"></div>




<script type="text/javascript">
window.onload = function () {
        var firstname = document.querySelector("#firstname");
        var bad_action = document.querySelector("#bad_action");
        var jerk = document.querySelector("#jerk");
        var relationship = document.querySelector("#relationship");
        var superlative_adj = document.querySelector("#superlative_adj");
        var badjective = document.querySelector("#badjective");
        var lump_of = document.querySelector("#lump_of");
        var munchies = document.querySelector("#munchies");


        
        
        var story = document.querySelector("#story")
        var launch = document.querySelector("#launch");
        launch.addEventListener("click", writeStory, false);

        function writeStory(){
            var launchedStory = "";
            

launchedStory += "<p>Dear Santa,</p> <p>This is your friend " + firstname.value + ". ";
launchedStory += "Someone...