JSFiddle - React, Tailwind, and code Playground

by Kamruz Jaman

HTML

<script id="empty-message" type="html/template">
    <div class="message new box animated bounceInDown">
        <div class="thecolor"></div>
        <div class="bubble">
            <input type="text" class="hexcolor" value="#2AC0A3" />
        </div>
        <div class="composeheader">
            <input type="text" value="Write Header Here:" />
        </div>
        <div class="body">
            <span contenteditable="true">Write context text here:</span>
        </div>
    </div>    
</script>

<div id="message-actions">
    <span class="compose">Compose</span>
    <span class="post">Post</span>
</div>
<div id="no-posts">- No Posts Yet -</div>
<div id="all-posts"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100);

/* css for animation */

.animated {
     -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
     -ms-animation-duration: 1s;
     -o-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
     -ms-animation-fill-mode: both;
     -o-animation-fill-mode: both;
     animation-fill-mode: both;
 }
 .animated.hinge {
     -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
     -ms-animation-duration: 2s;
     -o-animation-duration: 2s;
     animation-duration: 2s;
 }
 @-webkit-keyframes bounceInDown {
     0% {
         -webkit-transform: translateY(-2000px);
     }
     60% {
         -webkit-transform: translateY(30px);
     }
     80% {
         -webkit-transform: translateY(-10px)
     }
     100% {
         -webkit-transform: translateY()
     }
 }
 @-moz-keyframes bounceInDown {
     0% {
         -moz-transform: translateY(-2000px);
     }
     60% {
         -moz-transform: translateY(30px);
     }
     80% {
         -moz-transform: translateY(-10px)
     }
     100% {
         -moz-transform: translateY()
     }
 }
 @-ms-keyframes bounceInDown {
     0% {
         -ms-transform: translateY(-2000px);
     }
     60% {
         -ms-transform: translateY(30px);
     }
     80% {
         -ms-transform: translateY(-10px)
     }
     100% {
         -ms-transform: translateY()
     }
 }
 @-o-keyframes bounceInDown {
     0% {
         -o-transform: translateY(-2000px);
     }
     60% {
         -o-transform: translateY(30px);
     }
     80% {
         -o-transform: translateY(-10px)
     }
     100% {
         -o-transform: translateY()
     }
 }
 @keyframes bounceInDown {
     0% {
         transform: translateY(-2000px);
     }
     60% {
         transform: translateY(30px);
     }
     80% {
         transform: translateY(-10px)
     }
     100% {
         transform: translateY()
     }
 }
...

JavaScript

var getRGB = function(color) {
        var rgb = color.replace('#', '');		
        rgb = rgb.length === 3 ? rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2] : rgb;
        
        var conv = rgb.match(/.{2}/g);
        var r = parseInt(conv[0], 16) + 156;
        var g = parseInt(conv[1], 16); + 46;
        var b = parseInt(conv[2], 16); + 67;

        rgb = r + ',' + g + ',' + b;
        rgb = rgb.replace(/NaN/g, ' ... ');
        rgb = ('rgb(' + rgb + ')');
        return rgb;
};

$(document).ready(function() {

    $('#all-posts').on('keyup', '.message.new .hexcolor', function () {
        // update the background colour of the new post only
        var color = $(this).val();
        $(".message.new .thecolor, .message.new .composeheader").css("background-color", color);	
        $(".message.new .body").css("background-color", getRGB(color));
    });

    $('#message-actions').click(function () {

        if ($('.compose').is(':visible')) {	
            // add an empty message compose to the list
            // note the template includes all the markup necessary to bounce in and default values etc
            $('#all-posts').prepend($('#empty-message').html());
        } else {
            // lets post the message
            // we need to remove the animation classes and the "new" class 
            var $message = $('#all-posts .message:first').removeClass('new box animated bounceInDown');
            // and not make the content editable
            $message.find('.composeheader > input').attr('readonly', true);
            $message.find('.body > span').attr('contenteditable', false);
        }
        
        $('#no-posts').hide(); // we have posts now so hide this
        $('.compose, .post').toggle(); // and toggle between hiding and showing the 2 buttons text

    });

});