How to change all paragraph text colors and size d

Question

The following fiddle allows text to be pasted into a <textarea> and generated into paragraphs on button click.

Is it possible, within the following code below, to create two dropdown lists <select></select>, one that changes the color of the paragraphs <p> to any color the user selects on click and the other to change the size of the text dynamically?

Attached is the Fiddle. It would be extremely helpful if the fiddle could please be updated, as I am still new to coding.

HTML:

<div>
<div id="text_land" style="border:1px solid #ccc; padding:25px; margin-bottom:30px;">xzxz</div>
<textarea style="width:95%;"></textarea>
<button>Go</button>

Javascript:

$(function () {
  $('button').on('click', function () {
    var theText = $('textarea').val();
    var i = 200;
    while (theText.length > 200) {
        console.log('looping');
        while (theText.charAt(i) !== '.') {
            i++;   
        }

        console.log(i);
        $("#text_land").append("<p>" + theText.substring(0, i+1) + "</p>");
        theText = theText.substring(i+1);
        i = 200;
    }

    $('#text_land').append("<p>" + theText + "</p>");
  })

})

Thank You!

Answer 1

While you've already accepted an answer, I thought I'd offer a slight alternative; which is a little more concise and, hopefully, obvious as to how to extend further to support other css properties:

$(function() {
  
  // a slight change to your own approach,
  // binding an anonymous function as the
  // click event-handler of the <button>:
  $('button').on('click', function() {
    
    // getting the value of the <textarea>
    // element that follows the '#text_land'
    // element:
    var v = $('#text_land + textarea').val(),
        
        // splitting the value on double-
        // linebreaks to allow paragraphs to
        // be formed, and joining the array-
        // elements together with closing and
        // opening tags; then wrapping the
        // whole string in an opening and
        // closing tag:
      paragraphs = '<p>' + v.split(/\n\n/).join('</p><p>') + '</p>';
    
    // appending the paragraphs to the
    // '#text_land' element:
    $(paragraphs).appendTo('#text_land');
  });

  // binding an anonymous function as the
  // change event-handler for the <select>
  // elements:
  $('select').on('change', function() {
    
    // finding the elements that should
    // be affected:
    var targets = $('#text_land p'),
        
        // finding the CSS property to
        // update (held in the
        // 'data-property' attribute):
      property = this.dataset.property;

    // updating the CSS property of
    // those elements with the
    // property-value held in the 
    // <select> element's value property:
    targets.css(property, this.value);
    
    // because we're using disabled <option>
    // elements to act as the 'label' within
    // the <select> we set the selectedIndex
    // property to 0 (since those disabled
    // <label> elements are the first <option>
    // which shows the 'label' on page-load,
    // but the disabled attribute/property
    // prevents the user from re-selecting it):
  }).prop('selectedIndex', 0);
});

#text_land {
  border: 1px solid #ccc;
  padding: 25px;
  margin-bottom: 30px;
}
textarea {
  width: 95%;
}
label {
  display: block;
  width: 50%;
  clear: both;
  margin: 0 0 0.5em 0;
}
label select {
  width: 50%;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="styles">
    <!--
    wrapping the <select> elements in <label> elements, so that
    clicking the text will focus the <select>:
    -->
    <label>Color:
      <!--
      using a custom data-* attribute to store the css property
      that each <select> will affect/update:
      -->
      <select data-property="color">
        <!--
        Setting the first <option> to 'disabled' in order that
        the user cannot select the (pseudo) 'label' text:
        -->
        <option disabled>Select color:</option>
        <option>red</option>
        <option>green</option>
        <option>blue</option>
      </select>
    </label>
    <label>Font-size:
      <select data-property="font-size">
        <option disabled>Select font-size:</option>
        <option>smaller</option>
        <option>10px</option>
        <option>12px</option>
        <option>14px</option>
        <option>16px</option>
        <option>18px</option>
        <option>20px</option>
        <option>larger</option>
      </select>
    </label>
    <label>Background-color:
      <select data-property="background-color">
        <option disabled>Select background-color:</option>
        <option>aqua</option>
        <option>fuchsia</option>
        <option>limegreen</option>
        <option>silver</option>
      </select>
    </label>
  </div>
  <div id="text_land">xzxz</div>
  <textarea></textarea>
  <button>Go</button>
</div>

JS Fiddle demo.

The advantage of this approach is that one event-handler can act as the event handler for all the <select> elements, so long as the appropriate values are given in the <option> tags, and the appropriate CSS property is held in the data-property attribute of the <select> element itself. This avoids the need to write out event-handlers for each individual <select> element that updates a different property-value.

References:

• JavaScript:
  • Array.prototype.join().
  • Guide to JavaScript Regular Expressions.
  • Element.dataset.
  • String.prototype.split().
• jQuery:
  • appendTo().
  • css().
  • on().
  • prop().
  • val().

Answer 2

Following is the Updated Fiddle.

Code

$(function () {
    $('button').on('click', function () {
        var theText = $('textarea').val();
        var i = 200;
        while (theText.length > 200) {
            console.log('looping');
            while (theText.charAt(i) !== '.') {
                i++;   
            }
            
            console.log(i);
            $("#text_land").append("<p>" + theText.substring(0, i+1) + "</p>");
            theText = theText.substring(i+1);
            i = 200;
        }
        
        $('#text_land').append("<p>" + theText + "</p>");
    })
    
    $("#color").on("change", function(){
    	$("#text_land").css("color", $(this).val())
    });
    
    $("#size").on("change", function(){
    	$("#text_land").css("font-size", $(this).val());
    });
    
    $("#bgcolor").on("change", function(){
    	$("#text_land").css("background", $(this).val())
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <div id="text_land" style="border:1px solid #ccc; padding:25px; margin-bottom:30px;">xzxz</div>
    <textarea style="widht:95%;"></textarea>
    <button>Go</button>
</div>

<select id="color">
    <option>Color</option>
    <option>Red</option>
    <option>Blue</option>
    <option>Black</option>
    <option>Green</option>
</select>

<select id="bgcolor">
    <option>Background Color</option>
    <option>Red</option>
    <option>Blue</option>
    <option>Black</option>
    <option>Green</option>
</select>


<select id="size">
    <option>Size</option>
    <option>16px</option>
    <option>18px</option>
    <option>20px</option>
    <option>22px</option>
</select>

Answer 3

1. create css classes eg: .red,.blue etc

   .red { color : red; }

2. On change of dropdown value, loop through the <p> tags in the block and add the required class to the <p> tags (<p class="red">).

Repeat the same for changing the font size by creating css class of required font size