JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<div id="generator">
      <div id="generatorcontrols">
        <button id="smbutton" type="button">Generate Text</button>
      </div>
      <div id="wordcount">
        <label for="numwords">Number of words to generate:</label>
        <input id="numwords" type="text" value="1">
        </div>


      <div id="textblock">
        <div id="generatedtext" contenteditable="true"></div>
      </div>

CSS

#generatedtext {
  width:350;
  height:150px;
  background-color:#eee;
  overflow:auto;

  padding:10px;
}
#textblock { font-family:Helvetica; }

#generator { width:350px; margin:0 auto; }
#generatorcontrols { float:left; width:300px; margin-bottom:10px; }
#generatorcontrols button { float:left; }
#wordcount { width:100%; float:left; margin-bottom:10px;}
#wordcount label, #wordcount input { float:left; }
#wordcount label { padding:2px 5px 0 0; }

JavaScript

$('#smbutton').click(function() {     
        $('#generatedtext').html('Here is some text, with a <a href="/">link</a>.<br/><br/>And a number: '+String(Math.random()));

    });

$('#textblock').click(function() {
            SelectText('generatedtext');
});

function SelectText(element) {
    var doc = document
        , text = doc.getElementById(element)
        , range, selection
    ;    
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}