JSFiddle - React, Tailwind, and code Playground

by shaunxcode

HTML

<h1>Mad Libz</h1>
<img src="http://placekitten.com/500/500">
    
<div class="Fields">
    <label>Animal</label>
    <input class="AnimalInput" value="monkey" />
</div>

<div class="Fields">
    <label>Color</label>
    <input class="ColorInput" value="red" />
</div>

<div class="Fields">
    <label>Size</label>
    <input class="SizeInput" value="large" />
</div>

<div>
    <button>Madlibize</button>
</div>

<div class="StoryOutput"></div>

CSS

body {
    background: #9999cc;
    font-family: helvetica;
    color: white;
}

.Fields {
    margin-bottom: 10px;
}


label {
    display: inline-block;
    width: 55px;
    text-align: right;
}

label:after {
    content: ":";
}

input {
    font-size: inherit;
    background: inherit;
    color: inherit;
    border:0;
    border-bottom: 1px dashed white;
}

button {
    margin-top: 10px;
    color: #3399FF;
    background: #efefef;
    padding: 10px;
    font-size: 1.5em;
    border-radius: 5px;
    border: 1px solid grey;
    font-weight: bold;
    cursor: pointer;
}

JavaScript

var animalInput = $(".AnimalInput");
var colorInput = $(".ColorInput");
var sizeInput = $(".SizeInput");
var storyOutput = $(".StoryOutput");

$("button").click(function(){
    var animalVal = animalInput.val();
    var colorVal = colorInput.val();
    var sizeVal = sizeInput.val();
    storyOutput.text([
        "Once there was an ", animalVal, 
        ". He was a ", sizeVal, " ", colorVal, 
        " creature. He ate his ", animalVal, " brothers."].join(""));
});