JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

JavaScript

(function($){
$(function(){

    var $bubble = $('#bubble-demo');
    var $bubbleMessage = $bubble.find('.pf-bubble-message');

    $.each($('select'), function(i, el) {

       $(el).change(function() {

          var code = $(this).attr('data-code');
          var val = $(this).val();
          $bubble.attr('data-' + code, val);

          if (code === 'mode') {

              switch(val) {
                  case 'quest':
                    $bubble.prepend($bubble.find('.pf-bubble-name'));
                  break;
                  case 'stand':
                    $bubble.attr('data-type', 'talk');
                  break;
                  case 'cinema':
                    $(document.body).attr('id', 'cinema');
                  break;
                  default:
                    $bubble.find('.pf-bubble-bg').after($bubble.find('.pf-bubble-name'));
              }
          }

       });
    });

    $('#bubble-arrow').click(function(){
        $bubble.find('.pf-bubble-arrow').toggle($(this).is(':checked'));
    });

    $('#bubble-message').keyup(function() {
        $bubbleMessage.html($(this).val().replace(/\n/ig,'<br>'));
    });
});
}(jQuery));