JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<input id="optionId" type="text" placeholder="Option ID" /><input id="mainTitle" type="text" placeholder="Main title" /><input id="secdTitle" type="text" placeholder="Secondary title" /><input id="imageUrl" type="text" placeholder="Image URL"/><input id="ctaBtnText" type="text" placeholder="Text on button"/><input id="linksTo" type="text" placeholder="Page widget links to" />
<button id="generateBtn">Generate Code</button>
<p>Result <span>( insert in paajaf_widget.js )</span></p>
<textarea id="textArea" readonly></textarea>

CSS

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    outline: none;
}

body {
    padding: 20px;
    font: 12px helveticaneue, helvetica, arial, sans-serif;
    color: #444;
}

textarea,
button,
input {
    vertical-align: top;
    font: inherit;
}

textarea,
input {
    padding: 3px 5px;
    border: 1px solid #aaa;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

textarea:focus,
input:focus {
    border: 1px solid #3f4c6b;
}

input {
    width: 32.3333%;
    margin: 0 1% 1% 0;
}

textarea {
    width: 99%;
    height: 130px;
}

button {
    width: 32.3333%;
    margin-top: 2px;
    padding: 4px;
    border: 1px solid #333;
    border-radius: 1px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.22), 0 1px rgba(0,0,0,0.2);
    background: #606c88; /* Old browsers */
    background: -moz-linear-gradient(top,  #606c88 0%, #3f4c6b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #606c88 0%,#3f4c6b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
    color: #fff;
    cursor: pointer;
}

button:active {
    box-shadow: inset 0 0 0 50px rgba(0,0,0,0.13);
    background: #3f4c6b; /* Old browsers */
    background: -moz-linear-gradient(top,  #3f4c6b 0%, #606c88 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f4c6b), color-stop(100%,#606c88)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #3f4c6b 0%,#606c88 100%); /* Chrome10+,Safari5.1+ */
   ...

JavaScript

var doc = document,
    el_generateBtn = doc.getElementById('generateBtn'),
    el_textArea = doc.getElementById('textArea'),
    option_id, main_title, secd_title, image_url, cta_button_text, links_to;

function get(input) {
    return doc.getElementById(input).value;
}

function getAll() {
    option_id = get('optionId');
    main_title = get('mainTitle');
    secd_title = get('secdTitle');
    image_url = get('imageUrl');
    cta_button_text = get('ctaBtnText');
    links_to = get('linksTo');
}

function fillTextarea() {
    var result_string;
    getAll();
    result_string = "'" + option_id + "': {\n    main_title:'"+ main_title +"',\n    secondary_title:'" + secd_title + "',\n    image_url:'" + image_url + "',\n    call_to_action_text:'" + cta_button_text + "',\n    links_to:'" + links_to + "'\n},";
    el_textArea.value = result_string;
}

el_generateBtn.addEventListener('click', fillTextarea, false);