In the code snippet provided below, dynamic creation of paragraphs with changing background colors and styles is demonstrated.
One challenge faced in this script is maintaining the printed background colors for each dynamically generated paragraph. The issue arises during the printing process when bootstrap CSS removes the background color styling.
You can access the fiddle here.
An updated version of the fiddle to address this specific problem would be greatly appreciated, especially for those new to coding like myself.
Thank you!
HTML:
<div>
<div id="styles">
<label>Color:
<select data-property="color">
<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>
JQuery:
$(function () {
$('button').on('click', function () {
var v = $('#text_land + textarea').val(),
paragraphs = '<p>' + v.split(/\n\n/).join('</p><p>') + '</p>';
$(paragraphs).appendTo('#text_land');
});
$('select').on('change', function () {
var targets = $('#text_land p'),
property = this.dataset.property;
targets.css(property, this.value);
}).prop('selectedIndex', 0);
});