JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<form>

    <label for="customer_name">Asiakkaan nimi:</label>
    <input name="customer_name" type="text" id ="customer_name" placeholder="Erkki" />

    <label for="monthly_fee">Kuukausihinta:</label>
    <input name="monthly_fee" type="text"  id="monthly_fee" placeholder="29" />
    
    <label for="startup_fee">Käyttöönotto hinta:</label>
    <input name="startup_fee" type="text" id="startup_fee" placeholder="50-499" />
    
    <label for="offer_ends">Tarjous voimassa:</label>
    <input name="offer_ends" type="text" id="offer_ends" placeholder="30.11.2012" />
    
    <label for="seller_phone">Myyjän numero:</label>
    <input name="seller_phone" type="text" id="seller_phone" placeholder="Oma numero" />
    
    <label for="seller_name">Myyjän nimi:</label>
    <input name="seller_name" type="text" id="seller_name" placeholder="Oma nimi" />
    
    <select>
      <option value="Piia">Piia</option>
      <option value="Sanni">Sanni</option>
      <option value="Markku">Markku</option>
      <option value="Mia">Mia</option>
    </select>

    <label>Tekstin väri:</label>
    <span id="text_color_white" for="text_color_white" class="active-color textColor">Valkoinen</span>
    <span id="text_color_black"  for="text_color_black" class="textColor">Musta</span>
    
    <span id="submit">Kokoa</span>
    
</form>

<div id="preview">
    
    <span id="textPreview" style=" background-color: transparent; "></span>

</div>

CSS

body {
    font-family: "Helvetica Neue", Verdana, Arial, Sans-serif;
    font-size: 14px;
    background: #222;
    color: #fff;
}

p {
    padding: 1em 0 1em 0;
    background-color: transparent;
}

form {
    width: 147px;
    float: left;
    clear: both;
    margin: 20px 0px 0px 20px;
}

#text_color_white,
#text_color_black,
label,
input {
    float: left;
    clear: both;
    padding: 5px;
    line-height: 20px;
    height: 20px;
}

input { width: 115px; }

#text_color_white,
#text_color_black {
    background: #fff;
    color: #222;
    width: 122px;
}

#text_color_white.active-color,
#text_color_black.active-color {
    border: 3px solid #9dd53a;
    width: 116px;
}

#submit {
    margin: 20px 0px 0px;
    float: left;
    padding: 10px;
    color: #222;
    text-align: center;
    width: 112px;
    
background: #9dd53a;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZDUzYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3Y2JjMGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #9dd53a 0%, #7cbc0a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(100%,#7cbc0a));
background: -webkit-linear-gradient(top, #9dd53a 0%,#7cbc0a 100%);
background: -o-linear-gradient(top, #9dd53a 0%,#7cbc0a 100%);
background: -ms-linear-gradient(top, #9dd53a 0%,#7cbc0a 100%);
background: linear-gradient(to bottom, #9dd53a 0%,#7cbc0a 100%);
filter:...

JavaScript

$('#preview').css({ backgroundColor: '#222' });
$("#submit").data({ "textColor": '#fff' });

getText();
getImage();

$('.textColor').on("click", function() {

    $(this)
        .addClass('active-color')
        .siblings('span').removeClass('active-color');
    
    if ( $(this).attr('id') === 'text_color_white') {
    
        $('#preview').css({ backgroundColor: '#222' });
        $("#submit").data({ "textColor": '#fff' });
        $('p, #textPreview').css({ color: $("#submit").data().textColor });
    
    }
    else {
    
        $('#preview').css({ backgroundColor: '#fff' });
        $("#submit").data({ "textColor": '#111' });
        $('p, #textPreview').css({ color: $("#submit").data().textColor });
        
    }
    
});

$('#submit').on("click", function() {

    getText();
    
    $('.hilight').each(function() {
        $(this)
          .addClass('temp')
          .removeClass('hilight');
    });
    
});

$('input').on("keydown keyup", function() {
    
    getText();
    
    $('.temp').each(function() {
        $(this)
          .addClass('hilight')
          .removeClass('temp');
    });
    
});

function getText() {

    var customer_name = $('#customer_name').attr('value') || '',
        monthly_fee = $('#monthly_fee').val() || '',
        startup_fee = $('#startup_fee').val() || '',
        offer_ends = $('#offer_ends').val() || '',
        seller_phone = $('#seller_phone').val() || '',
        seller_name = $('#seller_name').val() || '',
        textColor = 'color:'+ $("#submit").data().textColor + ';' || '',
        textColor2 = { color: $("#submit").data().textColor };

    console.log( textColor2 )
    
    $('#textPreview')
        .css( textColor2 )
        .html('<p style="'+textColor+' background-color: transparent;">Heippa <span class="hilight">'+ customer_name +'</span>.</p> \
    <p style="'+textColor+' background-color: transparent;">Nyt printtimainontaa voi jatkaa kätevästi mobiili-sivuilla. Lehti-ilmoituksiin ja muuhun...