JSFiddle - React, Tailwind, and code Playground

by princefiddle

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
 
<ol id="selectable">
  <li id="sel1" class="ui-widget-content">Item 1</li>
  <li id="sel2" class="ui-widget-content">Item 2</li>
  <li id="sel3" class="ui-widget-content">Item 3</li>
  <li id="sel4" class="ui-widget-content">Item 4</li>
  <li id="sel5" class="ui-widget-content">Item 5</li>
  <li id="sel6" class="ui-widget-content">Item 6</li>
</ol>
 
 <div class="textarea-bold">
 <div class="bold-txt">Bold</div>
 <select name="bold_change" id="bold_change">
    <option value="normal">Narmal</option>
    <option value="bold">Bold</option>
 </select>
</div>


<div class="textarea-size">
<div class="size-txt">Text Size</div>
  <select name="size_change" id="size_change">
    <option value="14px">14px</option>
    <option value="16px">16px</option>
 </select>
</div>

CSS

#feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

JavaScript

$(function() {
    
    $( "#selectable" ).selectable({
      stop: function() {
        var result = $( "#select-result" ).empty();
        $( ".ui-selected", this ).each(function() {
          var index = $( "#selectable li" ).index( this );
          result.append( " #" + ( index + 1 ) );
        });
      }
    });
    
    $( "#bold_change" ).change(function() {
       
        weight=$( "#bold_change" ).val();
        
        $( ".ui-selected", $( "#selectable" )).each(function() {
            
            $(this).css({"font-weight":weight });
            
        });
        
    });
    
     $( "#size_change" ).change(function() {
       
        size=$( "#size_change" ).val();
        
        $( ".ui-selected", $( "#selectable" )).each(function() {
            
            $(this).css({"font-size":size });
            
        });
        
    });
        
        
   
    
  });